.background { color: #00050a; }
#login-box { position: relative; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; background: #00050a;
    flex-direction: column; }
@font-face { font-family: Fixedsys; src: url("../text/fsex300.ttf") format("opentype"); }
#login-wrapper { position: absolute; font-family: 'Fixedsys'; display: flex; z-index: 1; width: 300px; border: 2px solid #33ff00; flex-direction: column;
    box-shadow: 0px 0px 5px #33ff00, inset 0px 0px 5px #33ff00; color: #33ff00; background: rgba(0,5,10,0.8); padding: 5px; box-sizing: border-box; 
    filter: blur(0.7px); top: 12%  !important; right: 10%; border-radius: 1px; animation: 1s blur-in ease-in 1; animation-delay: 1s; opacity: 0; transition: 1s ease; }
@keyframes blur-in { 0% {filter: blur(10px); opacity: 0;} 100% { filter: blur(0.6px); opacity: 1;}}
.login-heading { background: #33ff00; padding: 0 5px; color: #00050a; margin-bottom: 10px; }
#login-wrapper input { background: none; border: none; border-bottom: 2px solid #33ff00; border-radius: 0; padding: 0; color: #33ff00; width: 180px; margin-bottom: 10px; 
    font-family: 'Fixedsys'; font-size: 1em; }
#login-wrapper span { padding-left: 5px; }
#login-wrapper input:focus { box-shadow: none; font-weight: normal; outline: none; }
#login-wrapper input:-webkit-autofill, #login-wrapper input:-webkit-autofill:hover, #login-wrapper input:-webkit-autofill:focus, input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #00050a inset !important;  background-color: #00050a !important; color: #33ff00 !important; 
    -webkit-text-fill-color: #33ff00 !important; }
#login-wrapper input:-webkit-autofill::first-line { font-family: 'Fixedsys'; font-size: 22px; }
#login-wrapper input[type="submit"] { background: #33ff00; color: #00050a; width: auto; padding: 0 3px; cursor: pointer; margin: 0; font-size: 22px; }
#login-wrapper input[type="submit"]:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
#login-box.loaded #login-wrapper { opacity: 1; }

@font-face { font-family: Outrun; src: url("../text/Outrun future Bold Italic.otf") format("opentype"); }
#login-title { position: absolute; user-select: none; font-family: Outrun; width: 100vw; z-index: 1; opacity: 0; }
.title-wrapper { position: relative; line-height: 170px; margin-top: -20px; }
.title-text { position: relative; background: -webkit-linear-gradient(rgba(255,227,5,1) 30%, rgba(250,114,237,1) 65%); z-index: 2; display: block; 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.title-shadow { position: absolute; text-shadow: 1px 3px #CA21BE, 3px 7px 10px #CA21BE; left: 0; top: 0; color: transparent; }
.title-wrapper > span { width: 100%; }
#login-title, .title-wrapper { transition: all 0.3s ease-in; }
#login-title { left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 100px; }
#login-title.top-left { left: 16%; top: 22%; transform: translate(-50%,-50%) rotate(-8deg); font-size: 50px; }
#login-title.top-left .title-wrapper { margin-top: -40px; line-height: 105px; }
#login-title.top-left > div:last-child { margin-left: 310px; }
#login-box.loaded #login-title { opacity: 1; }
#login-box.loaded #login-title > div:first-child { animation: 0.4s scalInSmall linear; transform-origin: bottom; }
#login-box.loaded #login-title > div:last-child { animation: 0.8s scalInBig linear; transform-origin: top; }
@keyframes scalInSmall {
    0%   { transform: scale(0); opacity: 0; } 
    100% { transform: scale(1); opacity: 1; }
}
@keyframes scalInBig {
    0%   { opacity: 0; }
    50%  { transform: scale(5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.login-border { width: 100%; height: 100%; position: absolute; background: radial-gradient(circle, rgba(255,255,255,0) 80%, rgba(0,5,10,1) 100%); }
.sunset-glow { position: absolute; width: 50%; box-shadow: 0px 0px 300vh 30vh rgba(202,33,190,0.2); bottom: 50%; }
.mountains { position: absolute; bottom: 50%; height: 20%; }

#login-grid { width: 100%; height: 100%; perspective: 300px; position: relative; overflow: hidden; }
#login-grid-wrapper { position: absolute; transform-style: preserve-3d; transform: rotateX(60deg); width: 100%; top: 50%; transform-origin: top; }
.login-grid-row { height: 20px; width: 100%; display: flex; border-top: 1px solid #30FCFF; }
.login-grid-cell { flex: 1; border-right: 1px solid #30FCFF; box-shadow: inset 0px 0px 4px rgba(93,181,217,0.8); }
#login-grid-cut { top: 0; position: absolute; min-height: 50%; width: 100%; background: #00050a; border-bottom: 1px solid #30FCFF; }
#login-grid-wrapper { animation: 0.5s moveGrid linear infinite; }
@keyframes moveGrid {100% {transform: rotateX(60deg) translateY(0px)} 0% {transform: rotateX(60deg) translateY(-20px)}  }

.sun-container { position: absolute; overflow: hidden; border-radius: 50%; padding: 1px; background-color: #00050a; bottom: 50%; }
.sun { width: 20vw; height: 20vw; border-radius: 50%;
    background: radial-gradient(transparent 65%, #ff0488 100%), linear-gradient(#FDFE1C 0%, #ffcb55 20%, #ff0488 100%);  }
.band { position: absolute; bottom: -20%; width: 100%; height: 10%; background: #00050a; animation: wave 10s linear infinite; }
@keyframes wave { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); bottom: 60%; }}
.mirror { transform: scale(1,-1) rotateX(60deg) translateY(50%); top: 50%; bottom: unset; perspective: 300px; filter: blur(5px); opacity: 0.5; }
#space { height: 50%; opacity: 0.3; box-shadow: 0px 5px 10px 5px #30FCFF; }
#space, .stars { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }  
.stars { background-repeat: repeat; background-size: 200px 200px; background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), rgba(0,0,0,0)); }

@media ( max-width: 1100px ) {
    #login-wrapper { top: 70%; right: 50%; transform: translate(50%, -50%); }
    .mountains { height: 10%; }
    .sun { width: 50vw; height: 50vw; }

    #login-title { font-size: 40px; top: 15%; }
    .title-wrapper { line-height: 80px; }

    #login-title.top-left { left: 50%; top: 15%; transform: translate(-50%,-50%); font-size: 40px; }
    #login-title.top-left .title-wrapper { margin-top: -20px; line-height: 80px; }
    #login-title.top-left > div:last-child { margin-left: 0; }
}

.MATT-Purple {color: #330867; color: rgb(51,8,103); }
.MATT-Teal { color: #30CFD0; color: rgb(48,207,208); }

.TRON-Blue { color: #C3F1EE; color: rgb(195,241,238); }
.TRON-Orange { color: #F0BE09; color: rgb(240,190,9); }

.OUTDRIVE-Blue { color: #30FCFF; color: rgb(48,252,255); }
.OUTDRIVE-Pink { color: #FA72ED; color: rgb(250,114,237); }
.OUTRUN-Purple { color: #CA21BE; color: rgb(202,33,190); }
.OUTDRIVE-Yellow { color: #FFE305; color: rgb(255,227,5); }

.top-box { box-shadow: inset 0 7px 7px -7px rgba(0,0,0,0.4); }
.left-box { box-shadow: inset 7px 0 7px -7px rgba(0,0,0,0.4); }
.right-box { box-shadow: inset -7px 0 7px -7px rgba(0,0,0,0.4); }
.bottom-box { box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.4); }