/* Fonts */
    @font-face {
        font-family: "AppleGaramond";
        src: url("fonts/AppleGaramond.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: "AppleGaramondLight";
        src: url("fonts/AppleGaramond-Light.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: "BarcodeFont";
        src: url("fonts/BarcodeFont.ttf") format("truetype");
    }
    @font-face {
        font-family: "RainyHearts";
        src: url("fonts/rainyhearts.ttf") format("truetype");
    }
    @font-face {
        font-family: "Daydream";
        src: url("fonts/Daydream.ttf") format("truetype");
    }

/* Elements */
    body {
        background-color: black;
        /* background-image: url("images/doitforyou.png"); */
        background-repeat: repeat;
        color: white;
        font-size: 1.16em;
        image-rendering: pixelated;
        overflow-x: hidden;
        margin: 0;
        margin-top: 10px;
        font-family:"RainyHearts";
    }
    footer {
        text-align: center;
        color: #FF1D00;
        margin-top: 100px;
        margin-bottom: 100px;
    }
    h1 {
        margin: 0;
    }
    h2 {
        color: #FF1D00;
        text-shadow: -5px 5px purple;
        font-family: "Daydream";
        margin: 0;
    }
    h3 {
        color: #FF1D00;
        margin: 0;
    }
    h4 {
        color: #FF1D00;
        margin: 0;
    }
    a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    a:hover {
        text-decoration: underline;
    }
/* Classes */
    .banner {
        text-align: center;
        width: 100%;
    }
    .banner-letter {
        display: inline-block;
        height: 8vh;
        margin: 0;
        padding: 0;
        animation: bannerLetterAnim 10s infinite linear;
    }
    @keyframes bannerLetterAnim {
        0% {transform: rotate3d(0,0,0,0deg);}
        50% {transform: rotate3d(0, 1, 0, 360deg);}
        100% {transform: rotate3d(0,0,0,0deg);}
    }
    .navlink {
        display: inline-block;
        margin-bottom: 5px;
    }
    .container {
        width: 50%;
        margin: 0 auto;
    }
    .maintd {
        width: 85%;
        vertical-align: top;
    }
    .menutd {
        width: 15%;
        vertical-align: top;
    }
    .box {
        border: 2px solid #FF1D00;
        border-radius: 4px;
        padding: 10px 15px;
        margin: 5px;
        background-color: black;
        background-blend-mode: difference;
        animation: boxBgAnim .25s ease-in-out infinite;
    }
    .box::after {
        content: "";
        display: table;
        clear: both;
    }
    @keyframes boxBgAnim {
        0% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #1a1a1a,
                    #00000088,
                    .25vw,
                    transparent .25vw,
                    transparent .25vw);
        }
        25% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #1a1a1a,
                    #00000088,
                    .5vw,
                    transparent .5vw,
                    transparent .5vw);
        }
        50% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #1a1a1a,
                    #00000088,
                    .75vw,
                    transparent .75vw,
                    transparent .75vw);
        }
        75% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #1a1a1a,
                    #00000088,
                    .5vw,
                    transparent .5vw,
                    transparent .5vw);
        }
        100% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #1a1a1a,
                    #00000088,
                    .25vw,
                    transparent .25vw,
                    transparent .25vw);
        }
    }
    
    .wiki {
        border: 2px solid darkgray;
        border-radius: 4px;
        padding: 10px;
        margin: 0px 20px 0px 0px;
    }
    .mainMarquee {
        font-size: 24pt;
    }
    .pfp {
        float: left;
        width: 99%;
        border: 1px solid #FF1D00;
    }
    .spinner {
        display: inline-block;
        transition: transform 1s ease-in-out;
        transform-origin: center;
    }
    .underConstruction {
        color: yellow;
    }
    .buddy {
        position: absolute;
        top: 8vh;
        transform: translateX(var(--xpos)) scaleX(var(--flip));
        width: 25px;
    }
    .gamerCard {
        width: 100%;
    }
    .lexietop {
        font-family: Georgia, 'Times New Roman', Times, serif;
        z-index: -998;
        width: 100%;
        height: 100%;
        position: fixed;
        font-size: 6em;
        mix-blend-mode: color-burn;
        background-size: 75px 75px;
        background-image:
            url("images/doitforyou.png");
        animation: bgAnim 30s linear infinite;
    }
    .lexiebottom {
        font-family: Georgia, 'Times New Roman', Times, serif;
        z-index: -999;
        width: 100%;
        height: 100%;
        position: fixed;
        font-size: 6em;
        background-blend-mode: color-burn;
        background-image:
            radial-gradient(circle at center center,
                #000000,
                #ffa600),
            repeating-radial-gradient(circle at top right,
                #f7c1a1,
                #a02500,
                .2em,
                transparent .2em,
                transparent .1em);
    }
    @keyframes bgAnim {
        0% {
            background-position: top left;
        }
        100% {
            background-position: bottom center;
        }
    }

    #statuscafe {
        background-color: #FF1D00;
    }
    #statuscafe-username {
        margin-bottom: .5em;
        font-size: 12pt;
        color: #ffffff;
    }
    #statuscafe-content {
        
    }