@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
* {
    --bg-color: rgb(185, 0, 0);
    --rainbow: linear-gradient(90deg in hsl longer hue, red 0 50%) 0/200%;
    --shop-card-bg: #212121;
    --shop-card-b: #3f3f3f;
}

.quicksand-500 {
    font-family: "Quicksand", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

html {
    height: fit-content;
}

body {
    background: var(--bg-color);
    background: -moz-linear-gradient(0deg, var(--bg-color) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(0deg, var(--bg-color) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, var(--bg-color) 0%, rgba(0,0,0,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;

    /* Font Stuff */
    color: white;
    font-family: "Quicksand", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.background-pattern {
    -webkit-mask-image: url(/Files/Images/Patterns/Checkerboard.png);
    mask-image: url(/Files/Images/Patterns/Checkerboard.png);
    mask-size: 250px 250px;
    mask-repeat: repeat;
    opacity: .15;
    height: 200%;
    width: 200%;
    background-color: white;
    position: fixed;
    mask-position: 0 0;
    animation: scrolling-pattern 12s infinite linear;
    top: -200px;
    left: -200px;
    z-index: -1;
}

.background-pattern-static {
    -webkit-mask-image: url(/Files/Images/Patterns/Checkerboard.png);
    mask-image: url(/Files/Images/Patterns/Checkerboard.png);
    mask-size: 250px 250px;
    mask-repeat: repeat;
    opacity: .15;
    height: 100%;
    width: 100%;
    background-color: white;
}

.socials {
    display: flex;
    position: fixed;
    justify-content: end;
    width: 30%;
    height: 10%;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.socials a {
    width: 64px;
    height: fit-content;
    display: inline-block;

    margin-top: auto;
    margin-bottom: auto;
    margin-right: 16px;
    transition: 0.3s;

    filter: 
    drop-shadow(-2px -2px 0px #000) 
    drop-shadow( 2px -2px 0px #000) 
    drop-shadow( 2px  2px 0px #000)
    drop-shadow(-2px  2px 0px #000);

    opacity: .15;
}

.socials a:hover {
    width: 80px;

    filter: 
    drop-shadow(-3px -3px 0px #000) 
    drop-shadow( 3px -3px 0px #000) 
    drop-shadow( 3px  3px 0px #000)
    drop-shadow(-3px  3px 0px #000);

    opacity: .75;
}

.socials a img{
    width: 100%;

    
}

.build-info {
    display: flex;
    flex-direction: column;
    position: fixed;
    text-align: end;
    justify-content: end;
    
    right: 0px;
    top: 8px;
    min-width: 25%;
    z-index: 8;
    
}

.build-info h3 {
    margin: 2px 16px 0 0;
}

/* Text */
.text-outline {
    -webkit-text-stroke: 3px transparent;
    -webkit-text-fill-color: #ffffff;
    background: black;
    -webkit-background-clip: text;
}

.text-outline h3 {
    -webkit-text-stroke: 6px transparent;
}

.text-outline h2 {
    -webkit-text-stroke: 8px transparent;
}

.text-outline h1 {
    -webkit-text-stroke: 10px transparent;
}



.gold-text-outline {
    -webkit-text-stroke: 3px transparent;
    -webkit-text-fill-color: #000;
    background: linear-gradient(#ffb455,#f99205);
    -webkit-background-clip: text;
}

.rainbow-text-outline {
    
    -webkit-text-fill-color: rgba(0,0,0,0);
    background: var(--rainbow);
    -webkit-background-clip: text;
    animation: rainbow 4s linear infinite;
}

.only-text-outline {
    -webkit-text-stroke: 10px black;
    -webkit-text-fill-color: #000000;
}
 
/* Animations */
@keyframes scrolling-pattern {
    100% {
        mask-position: -250px -250px;
    }
}

/* https://gist.github.com/ajaegers/52a82619cc191f898ec4 */
@keyframes rainbow {
    to {background-position: 100%}
}