@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
 @keyframes blink {
     50% {
         opacity: 0;
    }
}
 @keyframes move-background {
     from {
         -webkit-transform: translate3d(0px, 0px, 0px);
    }
     to {
         -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-webkit-keyframes move-background {
     from {
         -webkit-transform: translate3d(0px, 0px, 0px);
    }
     to {
         -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-moz-keyframes move-background {
     from {
         -webkit-transform: translate3d(0px, 0px, 0px);
    }
     to {
         -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-webkit-keyframes move-background {
     from {
         -webkit-transform: translate3d(0px, 0px, 0px);
    }
     to {
         -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 .background-container{
     position: fixed;
     top: 0;
     left:0;
     bottom: 0;
     right: 0;
     visibility: hidden;
}
 .stars {
     background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     display: block;
     z-index: 0;
}
 .twinkling{
     width:10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 2;
     -moz-animation:move-background 70s linear infinite;
     -ms-animation:move-background 70s linear infinite;
     -o-animation:move-background 70s linear infinite;
     -webkit-animation:move-background 70s linear infinite;
     animation:move-background 70s linear infinite;
}
 .clouds{
     width:10000px;
     height: 100%;
     background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
     background-size: 1000px 1000px;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 3;
     -moz-animation:move-background 130s linear infinite;
     -ms-animation:move-background 130s linear infinite;
     -o-animation:move-background 130s linear infinite;
     -webkit-animation:move-background 130s linear infinite;
     animation:move-background 130s linear infinite;
}
 img{
     height: 70vh;
     width:70vh;
     position: absolute;
     z-index: 3;
     right: 20px;
     max-width:50%;
     height:auto;
}
 .banner {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 128px;
     text-align: center;
     z-index: 5;
     font: 400 128px/1.5 "Bebas Neue", ubuntu, "segoe ui", helvetica, arial, sans-serif;
     text-shadow: 0 0 6px #000000, 0 0 6px #000000;
}
 .subbanner {
     position: absolute;
     top: 58%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 38px;
     text-align: center;
     z-index: 5;
     opacity: .8;
     font: 400 38px/1.5 "Bebas Neue", ubuntu, "segoe ui", helvetica, arial, sans-serif;
     text-shadow: 0 0 6px #000000, 0 0 6px #000000;
}
 .caret {
     animation: blink 1s linear infinite;
}
a.login-link:hover {
     color:black;
     background-color: rgba(255, 255, 255, 0.8);
}
a.login-link {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    font-family: verdana, arial, "segoe ui";
    font-size: 16px;
    -o-transition: color .2s ease-out, background-color .2s ease-in;
    -ms-transition: color .2s ease-out, background-color .2s ease-in;
    -moz-transition: color .2s ease-out, background-color .2s ease-in;
    -webkit-transition: color .2s ease-out, background-color .2s ease-in;
    transition: color .2s ease-out, background-color .2s ease-in;
    z-index: 9999; /* Set a high z-index value */
}

a.discord-link {
     color: rgba(255, 255, 255, 0.5);
     position: absolute;
     top: 85%;
     left:50%;
     margin-left:-16px;
     z-index: 1000;
     width: 32px;
     height: 32px;
}

 body {
     background-color: black;
}
 #loader {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
     background-color: #fff;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .loader {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border: 16px solid #f3f3f3;
     border-top: 16px solid #888888;
     border-radius: 50%;
     width: 100px;
     height: 100px;
     animation: spin 2s linear infinite;
     margin-left: -64px;
     margin-top: -64px;
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}