:root {
                --green: #00ff7a;
                --lightPurple: #6e2543bd;
                --darkPurple: #440f49;
                --statusEmote: 'url(images/home/status_deltarune_anime.png)';
            }
            
            @font-face {
                font-family: Citree;
                src: url("../fonts/Citree\ regular.otf")format("opentype");
            }

            @font-face {
                font-family: Grunge;
                src: url("../fonts/Grunge.ttf")format("truetype");
            }

            @font-face {
                font-family: James;
                src: url("../fonts/James-regular.otf")format("opentype");
            }

            @font-face {
                font-family: Pixel;
                src: url("../fonts/PixelOperator8.ttf")format("truetype");
            }

            @font-face {
                font-family: Pixel;
                src: url("../fonts/PixelOperator8-Bold.ttf")format("truetype");
                font-weight: bold;
            }

            ::selection {
                background-color: var(--green);
                color: var(--darkPurple);
            }

            * {
                box-sizing: border-box;
            }

            #loading{
                background:url(/images/home/loadingscreen_PH.png) no-repeat bottom center;
                background-size:cover;
                background-color: var(--darkPurple);
                position:fixed;
                z-index:100;
                height: 100%;
                width: 100%;
                }
                
            body {
                font-family: Citree;
                font-size:18px;
                margin: 0 auto;
                background-color: #210b3d;
                background: url(/images/sitewide/newbg.png) no-repeat top right;
                background-attachment: fixed;
                background-size:auto;
                color: #f2feff;
                overflow-x:hidden;
                height:900px;
            }

            button {
                background-color: rgba(255, 255, 255, 0);
                border:none;
            }

            body a {
                color: var(--green);
            }

            a:visited {
                color:#2799ed;
            }

            #checkOut {
                position:absolute;
                bottom:200px;
                right:20px;
            }

            #checkOut iframe{
                position:relative;
                width:140px;
                height:140px;
                top:200px;
                left:10px;
                border: 2px solid var(--green);
                border-radius: 10px;
                box-shadow: 0 1px 0px 0px black;
                z-index:9;
            }

            #ncring {
                position:relative;
                top:150px;
                left:30px;
                width:10px;
                z-index:9;
            }

            main {
                display: flex;
                flex-wrap:nowrap;
                max-width: 76%;
                max-height:900px;
                margin: 0 auto;
            }

            #logo{
                position:absolute;
                top:30px;
                left:500px;
                height:auto;
                margin:0px;
                pointer-events: none;
                transform: rotate(-10deg);
                z-index:99;
            }

            .container {
                display:flex;
                text-align: center;
                min-height: 800px;
                min-width:1300px;
                margin-left:0px;
                margin-top:100px;
                flex: 1 1 0;
                order:2;
                background-image: url(/images/home/home_maincontainer.png);
                background-repeat: no-repeat;
                overflow-y: hidden;
                padding-left:60px;
                image-rendering: crisp-edges;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: -webkit-optimize-contrast;
                -ms-interpolation-mode: nearest-neighbor;
                overflow:hidden;
            }

            .newStuff {
                width:620px;
                position:relative;
                height:500px;
            }

            .newStuffList {
                color:#ffffff;
                position:relative;
                top:110px;
                left:65px;
                text-align:left;
                font-size:34px;
                font-family: Grunge;
            }

            .newStuffList li {
                list-style-type: none;
                margin:20px;
                transform: rotate(-2deg);
            }

            .newStuffList a {
                color:#ebfff4;
                text-decoration:dotted underline;
            }

            .newStuffList a:hover {
                color:#00ff7a;
            }

            .newStuffView img{
                position:relative;
                top:60px;
                z-index:99;
                margin:10px 20px 0px 40px;
            }

            .newStuffView img:hover {
                filter:brightness(1.7)
            }

            .newStuff .preview {
                position:relative;
                z-index:-1;
                top:80px;
                max-width: 540px;
                max-height:320px;
                transform:rotateZ(-3deg);
                object-fit: cover;
            }

            #streamSchedule {
                display:flex;
                order:3;
                flex-wrap: wrap;
                width:400px;
                text-align:left;
            }

            #countdown {
                position:relative;
                width:500px;
                top:20px;
                font-family: Grunge;
                color:#370045;
                text-align: center;
                font-size: 60px;
                margin-top: 0px;
            }

            #streamSchedule li{
                list-style: none;
                position:relative;
                top:100px;
                left:100px;
                font-family: Grunge;
                font-size:40px;
                text-decoration: none;
                color:#370045
            }

            #streamSchedule iframe {
                position:relative;
                top:0px;
                left:70px;
            }

            .sidebarLeft {
                position:fixed;
                width:260px;
                min-height:100%;
                padding:0px;
                order:1;
                z-index:99;
                transition: .2s;
                transform: translate(-560px);
                background-color: rgba(81, 0, 97, 0.836);
            }

            .sidebarLeft img{
                margin-top:10px;
                width:250px;
                pointer-events: none;
            }

            .sidebarLeft button {
                background-color: rgba(255, 0, 0, 0);
                border-radius:5px;
                border:none;
                margin-bottom: 20px;
                align-self: center;
            }

            .sidebarLeft button:hover {
                background-color: rgba(0, 0, 0, 0);
                border:none;
                transform:scale(1.05);
            }

            .sidebarLeft button:active {
                background-color: rgba(0, 0, 0, 0.397);
                border:none;
                transform:scale(.9);
            }

            #img-load {
                height:0px;
            }

            #img-load img{
                mix-blend-mode: multiply;
                margin:0px;
                padding:0px;
            }

            #mobile-img-load {
                visibility: hidden;
                height:0px;
                width:100%;
            }

            .artStuff {
              border: none;
              cursor: pointer;
              position: relative;
              display: inline-block;
            }
            
            .artStuffMenu {
              display: none;
              color:var(--green);
              position: absolute;
              left:100%;
              top:-30%;
              background-color: var(--darkPurple);
              min-width: 200px;
              border: 2px solid #47ff6f;
            }
            
            .artStuffMenu a {
              color: var(--green);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .artStuffMenu a:hover {
                color:rgb(0, 44, 61);
                background-color: #d18dff;
            }

            .otherStuff {
              border: none;
              cursor: pointer;
              position: relative;
              display: inline-block;

            }
            
            .otherStuffMenu {
              display: none;
              color:var(--green);
              position: absolute;
              left:100%;
              top:-30%;
              background-color: var(--darkPurple);
              min-width: 200px;
              z-index: 99;
              border: 2px solid #47ff6f;
            }
            
            .otherStuffMenu a {
              color: var(--green);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .otherStuffMenu a:hover {
                color:rgb(0, 44, 61);
                background-color: #d18dff;
            }

            .siteStuff {
              border: none;
              cursor: pointer;
              position: relative;
              display: inline-block;
            }
            
            .siteStuffMenu {
              display: none;
              color:var(--green);
              position: absolute;
              left:100%;
              top:-30%;
              background-color: var(--darkPurple);
              min-width: 200px;
              z-index: 99;
              border: 2px solid #47ff6f;
            }
            
            .siteStuffMenu a {
               color: var(--green);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .siteStuffMenu a:hover {
                color:rgb(0, 44, 61);
                background-color: #d18dff;
            }
            .shrines {
              border: none;
              cursor: pointer;
              position: relative;
              display: inline-block;
            }
            
            .shrinesMenu {
              display: none;
              color:var(--green);
              position: absolute;
              left:100%;
              top:-30%;
              background-color: var(--darkPurple);
              min-width: 200px;
              z-index: 99;
              border: 2px solid #47ff6f;
            }
            
            .shrinesMenu a {
              color: var(--green);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .shrinesMenu a:hover {
                color:rgb(0, 44, 61);
                background-color: #d18dff;
            }

            .sidebarRight {
                position:absolute;
                top:150px;
                right:200px;
                order:4;
                padding:10px;
                font-size:12px;
                width:215px;
                z-index:99;
            }

            #phone {
                display:flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                background-image: url(/images/home/home_phone.png);
                background-repeat: no-repeat;
                background-size:contain;
                width:200px;
                height:300px;
                padding:20px;
                transform: rotate(5deg);
            }

            #mobile-phone {
                visibility:hidden;
                width:0px;
                height:0px;
            }

            .sidebarRight img{
                display: inline-block;
                max-width:30px;
                height:auto;
                border: none;
                margin:2px;
                border-radius: 0px;
                transition: transform .2s;
            }

            .sidebarRight img:hover {
                transform: scale(1.2) rotate(-2deg);
                position: relative;
                image-rendering: pixelated;
            }        

            h1, h2, h3, strong {
                font-family: James;
            }
            
            h1 {
                font-size:32px;
                color: var(--green);
            }

            h2 {
                font-size: 20px;
                color: var(--green);
            }

            @keyframes open {
                0%, 100%{ transform: scaleY(.01);}
                100%{ transform: scaleY(1);}
            }

            @keyframes close {
                0%, 100%{ transform: scaleY(1);}
                100%{ transform: scaleY(0.1);}
            }

            .chatbtn {
                font-family: Pixel;
                background-color: white;
                position:absolute;
                left:70px;
                width:200px;
                height:130px;
                color: black;
                padding: 16px;
                font-size: 20px;
                border: none;
                cursor: pointer;
                border: dashed 2px black;
                border-top:none;
                z-index:1;
            }
            
            .chatclosebtn {
                display: none;
                position:absolute;
                top:5px;
                left:60px;
                background-color:rgb(50, 0, 83);
                border: 2px outset rgb(109, 255, 146);
                color:white;
                width: 30px;
                height: 30px;
                z-index:99;
                border-radius:50%;
            }

            .chatclosebtn h1{
                position:relative;
                top: -14px;
                font-size:18px;
            }

            @keyframes pulse {
                0% {transform: scale(1) rotate(-10deg);}
                50% {transform: scale(1.1) rotate(-12deg);}
                100% {transform: scale(1) rotate(-10deg);}
            }

            .chatbtn img {
                position:relative;
                width:150px;
                top:0px;
                animation: pulse 3s infinite ease-in-out;
            }

            .chatbtn img:hover {
                filter: brightness(2)
            }

            .chatbtn:hover {
                background-color: rgb(211, 219, 209);
            }

            .chat-content {
                display: none;
                position: absolute;
                top:55px;
                left:50px;
                background-color: #f1f1f1;
                min-width: 160px;
                overflow: auto;
                z-index: 1;
            }

            #teshFloat {
                height:450px;
            }

            #teshFloatCredit {
                position:relative;
                top:400px;
                color:white;
                font-size:12px;
            }
            
            #teshFloat img {
                position:relative;
                top:0px;
                width:260px;
                height:600px;
                object-fit: cover;
                object-position: 60% 100%;
                animation: float 4s infinite ease-in-out;
                margin: 0px;
                padding: 0px;
                pointer-events: none;
            }

            .sidebarLeft .logo {
                background-image: url(/images/sitewide/logo.png);
                background-size: contain;
                pointer-events: none;
                position:absolute;
                width:250px;
                height:100px;
                transform: rotate(-10deg);
            }
            
            .logo {
                mix-blend-mode:color-dodge;
            }
            
            .statusbtn {
                position:absolute;
                left:300px;
                border:none;
                width:100px;
                animation: deltawiggle 2s infinite ease-in-out;
                transform-origin: bottom center;
            }

            @keyframes deltawiggle {
                0% {transform: rotate(10deg) translateX(20px) translateY(-10px);}
                50% {transform: rotate(-10deg) translateX(-20px) translateY(3px);}
                100% {transform: rotate(10deg) translateX(20px) translateY(-10px);}
            }

            @keyframes float {
                0%, 100%{ transform: translateY(-20px);}
                50%{ transform: translateY(0px); }
            }

            #statuscloseBtn {
                display: none;
                font-size:30px;
                position:absolute;
                left:330px;
                color:white;
                width: 30px;
                height: 30px;
                z-index:999;
                
            }

            #statuscloseBtn h1{
                position:relative;
                font-family: Deltarune;
                font-weight:bold;
                color:white;
                top: -10px;
                left:435px;
                font-size:20px;
            }

            .statusbtn img {
                width:100px;
                cursor: pointer;
            }
            
            #statuscafe {
                display: none;
                position:absolute;
                left:300px;
                font-family: Pixel;
                z-index:998;
                width:500px;
                height:100px;
                border: 1px solid white;
                color:white;
                font-size: 16px;
                text-align: left;
                background-color:black;
                background-image: url(/images/home/status_deltarune_anime.png);
                background-repeat: no-repeat;
                background-size: contain;
                letter-spacing: -2px;
            }

            #statuscafe-username {
                position:relative;
                font-family: Deltarune;
                font-weight:bold;
                left:100px;
                bottom:0px;
                font-size:15px;
                line-height: 0;
                letter-spacing: 1px;
            }

            #statuscafe-content {
                width:380px;
                height:18px;
                text-wrap: wrap;
                position:relative;
                text-align: left;
                top:10px;
                left:100px;
                animation: 1.5s typing;
                overflow: hidden;
                white-space: wrap;
                letter-spacing: 1px;
            }

                @keyframes typing {
                from { width: 0; height: 18px }
                to { width: 380px; height: 18px }
            }

            #statuscafe-credit {
                position:relative;
                font-weight:bold;
                font-size:10px;
                top:85px;
                left:250px;
            }

            .updates {
                position:relative;
                height:290px;
                padding:0px;
                width:270px;
                right:50px;
                z-index:9;
                background-image: url(/images/home/home_updates.png);
                background-repeat: no-repeat;
                margin-bottom:0px;
            }

            .updates iframe {
                position:relative;
                padding:0px;
                left:30px;
                top:20px;
                width:200px;
                height:250px;
                border:0px;
                margin-bottom:0px;
                transform: rotate(-4deg);
            }

            .show {
                display: block !important;
            }

            .homeNav {
                z-index:9;
                margin: 0px;
                padding: 0px;
                position:fixed;
                text-align: center;
                left:0px;
                width:50px;
                height:100%;
                background-color: var(--lightPurple);
                border-right:2px solid var(--green);
                cursor: pointer;
                border-bottom:0px;
                top:0px;
                transition: .2s;
            }

            .homeNav:hover {
                transform: scaleX(1.1);
            }

            .homeNav h1 {
                position: absolute;
                color: var(--green);
                transform: rotate(-90deg);       
                font-family: James;
                top:40%;
                left:-10px;
                text-shadow:
                0 0 7px #13db1d57,
                0 0 10px #c8ffd4a2,
                0 0 20px #c5eece71;
            }

            #homeNavBtn {
                display: none;
            }

            label {
                width:0px;
                height:0px;
            }
            
            #homeNavBtn:checked + label > div {
                top:0px;
                left:260px;
                transition: .2s;
            }

            #homeNavBtn:checked + label > .sidebarLeft {
                top:0px;
                transform:translate(-260px);
                transition: .2s;
            }

        @media (max-width: 480px) {

                body {
                    overflow-x: hidden;
                }

                #loading {
                    background-position: 75% 25%;
                }

                main {
                    min-width:400px;
                }

                .topBtns {
                    visibility:hidden;
                }

                #checkOut {
                    position:absolute;
                    top:1100px;
                    right:20px;
                }

                .homeNav {
                    position:fixed;
                    display:flex;
                    justify-content: center;
                    text-align: center;
                    top:0px;
                    width:100%;
                    height:50px;
                    background-color: var(--lightPurple);
                    transition: .2s;
                    border-right:0px;
                    border-bottom:2px solid var(--green);
                    cursor: pointer;
                    z-index:99
                }

                .homeNav:hover {
                    transform: scaleX(0);
                    transform: scaleY(1.1);
                }

                .homeNav h1 {
                    position: relative;
                    color: var(--green);
                    transform: rotate(-0deg);       
                    font-family: James;
                    top:-40%;
                    left:0px;
                }

                #homeNavBtn {
                    display: none;
                }

                label {
                    width:0px;
                    height:0px;
                }
            
                #homeNavBtn:checked + label > div {
                    top:500px;
                    left:0px;
                    transition: .2s;
                }

                #homeNavBtn:checked + label > .sidebarLeft {
                    top:0px;
                    transform:translateX(0px);
                    transform:translateY(0px);
                    transition: .2s;
                }
                
                .container {
                    display:flex;
                    flex-direction: column;
                    text-align: center;
                    min-height: 1400px;
                    min-width:450px;
                    width:450px;
                    margin-left:-25px;
                    margin-top:100px;
                    flex: 1 1 0;
                    order:2;
                    background-image: none;
                    background-repeat: no-repeat;
                    overflow-y: auto;
                    padding-left:0px;
                    image-rendering: crisp-edges;
                    image-rendering: -moz-crisp-edges;
                    image-rendering: -o-crisp-edges;
                    image-rendering: -webkit-optimize-contrast;
                    -ms-interpolation-mode: nearest-neighbor;
                }

                .newStuff {
                    background-image: url(/images/home/home_whatsnew_mobile.png);
                    background-size: cover;
                    width:450px;
                    position:relative;
                    height:550px;
                }

                .newStuffList {
                    color:#ffffff;
                    position:relative;
                    top:95px;
                    left:55px;
                    text-align:left;
                    font-size:22px;
                    font-family: Grunge;
                }

                .newStuffList .newest {
                    text-transform:uppercase;
                    margin-left:20px;
                    font-size:26px;
                }

                .newStuffView img{
                    position:relative;
                    width:150px;
                    top:60px;
                    z-index:9;
                    margin:13px 10px 0px 30px;
                }

                .newStuffView img:hover {
                    filter:brightness(1.7)
                }

                .newStuff .preview {
                    position:relative;
                    object-fit: cover;
                    z-index:-1;
                    top:80px;
                    width:350px;
                    height:200px;
                    transform:rotateZ(-3deg)
                }

                #streamSchedule {
                    display:flex;
                    background-image: url(/images/home/home_streamschedule_mobile.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    order:3;
                    flex-wrap: wrap;
                    width:450px;
                    height:530px;
                    text-align:left;
                    margin-left:20px;
                }

                #countdown {
                    position:relative;
                    width:300px;
                    top:30px;
                    left:0px;
                    font-family: Grunge;
                    color:#370045;
                    text-align: center;
                    font-size: 44px;
                    margin-top: 0px;
                }
                
                #streamSchedule li{
                    list-style: none;
                    position:relative;
                    top:45px;
                    left:80px;
                    font-family: Grunge;
                    font-size:28px;
                    text-decoration: none;
                    color:#370045
                }

                #streamSchedule iframe {
                    position:relative;
                    top:0px;
                    left:70px;
                }

                .sidebarLeft {
                    position:fixed;
                    flex-direction: column;
                    width:100%;
                    min-height:0px;
                    height:500px;
                    padding:0px;
                    order:1;
                    z-index:99;
                    transform: translate(0px);
                    transition: .2s;
                    left:0px;
                    top:-500px;
                    background-color: rgba(81, 0, 97, 0.836);
                }

                .sidebarLeft img{
                    margin-top:10px;
                    width:250px;
                    pointer-events: none;
                }

                .sidebarLeft button {
                    background-color: rgba(255, 0, 0, 0);
                    border:none;
                    align-self: center;
                    margin-bottom: 20px;
                }
                
                .sidebarRight {
                    visibility:hidden;
                }

                .musicbtn {
                    visibility: hidden;
                }
                #teshFloat {
                    height:100px;
                }

                #teshFloatCredit {
                    position:relative;
                    top:400px;
                    color:white;
                    font-size:12px;
                }

                #teshFloat img {
                    position:relative;
                    left:20%;
                    width:250px;
                    height:120px;
                    object-fit: cover;
                    object-position: top center;
                }

                #logo img {
                    width:100%;
                    height:200px;
                    object-fit:cover;
                    image-rendering: crisp-edges;
                    margin:0px;
                    pointer-events: none;
                }

                #img-load {
                    visibility: hidden;
                }

                #mobile-img-load {
                    visibility: visible;
                    height:50px;
                }

                #mobile-img-load img{
                    width:100%;
                    mix-blend-mode: multiply;
                    object-fit: cover;
                    margin:0px;
                    padding:0px;
                    object-position: 80% 50%;
                }
                
                #mobile-phone {
                    visibility: visible;
                    display:flex;
                    justify-content: center;
                    align-content: space-b;
                    position:absolute;
                    top:1200px;
                    left:20px;
                    flex-wrap: wrap;
                    flex-direction: row;
                    align-items: center;
                    background-image: url(/images/home/home_phone.png);
                    background-repeat: no-repeat;
                    background-size:cover;
                    width:250px;
                    height:300px;
                    padding:20px;
                    transform: rotate(0deg);
                    overflow:hidden;
                }

                #mobile-phone img {
                    width:40px;
                }
            }