@font-face {
	src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf)
		format('truetype');
	font-family: 'Sys';
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

html, body {
    font-family: 'Poppins', sans-serif !important;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 600 !important;
}

/**********************
** ON LOADING SCREEN **
**********************/

/* TODO: MAKE SCANLINES RESPONSIVE */

.screen::before {
    background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    height: 100%;
    z-index: -1;
}
.scanlines .overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanlines .overlay::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    content: "";
}
.scanlines .overlay::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: " ";
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
}
.picture {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    z-index: -1;
    transform: scale(0, 0);
    background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
    pointer-events: none;
}
.menu {
    opacity: 0;
    background-color: blue;
    box-sizing: border-box;
    height: auto;
    margin:1em;
    filter: blur(1px);
    animation: jerkup 100ms infinite;
    display: none;
    border-top:4px solid aqua;
    border-left:4px solid aqua;
    z-index: 99999999;
    width:500px;
}

.menu, 
.menu button, 
.menu a {
    padding:0;
    font-family: "Sys";
    font-size: 1.5em;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    color: #fff;
}
.menu header {
    color: white;
    padding: 5px 15px;
    animation: 5s ease 2000ms normal none infinite running glitch;
    font-size: 1.5em;
    background:aqua;
    top:-32px;
}

.menu ul {
    animation: 5s ease 2000ms normal none infinite running glitch;
    margin-top:32px;
    margin-bottom:0;
}
.menu ul li {
    box-sizing: border-box;
    list-style: outside none none;
    padding: 4px 16px;
}
.menu button {
    background:transparent;
    border:0px
}
.menu ul li:hover {
    background-color: yellow;
}

.menu footer {
    background-color: black;
    animation: 5s ease 2000ms normal none infinite running glitch;
}

.menu footer .key {
    background-color: blue;
    border: 4px solid yellow;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    width:40px;
}

.menu footer .key span {
    text-align: center;
}
 
.on .picture {
    animation: 3000ms linear 0ms normal forwards 1 running on;
}
.off .picture {
    animation: 750ms cubic-bezier(0.23, 1, 0.32, 1) 0ms normal forwards 1 running off;
}
.volumeControl {
    z-index: 9999999999999999;
    filter: blur(0.5px);
}

.volumeControl h1 {
    color: lime;
    filter: blur(0.5px);
    font-family: Sys;
    font-size: 6vmin;
    text-shadow: 0 0 3px lime;
}

.text {
    content:'VIDEO 1';
    left: 1.5em;
    top: 1em;
    color: lime;
    opacity: 0;
    filter: blur(0.5px);
    font-family: Sys;
    font-size: 6vmin;
    text-shadow: 0 0 3px lime;
    width: 400px;
}

@media only screen and (max-width: 600px) {
    .menu ul {
        margin-top:1.5em
    }

    .menu {
        filter: blur(0.5px);
        width: 300px
    }

    .text {
        filter: blur(0px);
    }
}

.on .text, .on .menu {
    opacity: 1;
    transition: opacity 10ms ease 2000ms;
}
@keyframes on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(4);
        opacity: 1;
   }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
   }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
   }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(4);
        opacity: 0;
   }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(0) brightness(0);
        opacity: 0;
   }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
   }
}
@keyframes off {
    0% {
        transform: scale(1, 1);
        filter: brightness(1);
   }
    40% {
        transform: scale(1, 0.005);
        filter: brightness(100);
   }
    70% {
        transform: scale(1, 0.005);
   }
    90% {
        transform: scale(0.005, 0.005);
   }
    100% {
        transform: scale(0, 0);
   }
}
.text span {
    filter: blur(1px);
    position: absolute;
}
.text span:nth-child(1) {
    color: red;
    margin-left: -2px;
    filter: blur(2px);
}
.text span:nth-child(2) {
    color: lime;
    margin-left: 2px;
    filter: blur(2px);
}
.text span:nth-child(3) {
    color: blue;
    position: 20px 0;
    filter: blur(1px);
}
.text span:nth-child(4) {
    color: #fff;
    filter: blur(1px);
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}
.text span:nth-child(5) {
    color: rgba(255, 255, 255, 0.1);
    filter: blur(15px);
}
.text span {
    animation: blur 30ms infinite, jerk 50ms infinite;
}
@keyframes blur {
    0% {
        filter: blur(1px);
        opacity: 0.8;
   }
    50% {
        filter: blur(1px);
        opacity: 1;
   }
    100% {
        filter: blur(1px);
        opacity: 0.8;
   }
}
@keyframes jerk {
    50% {
        transform: translateX(1px);
   }
    51% {
        transform: translateX(0);
   }
}
@keyframes jerkup {
    0% {
        transform: translateY(1px);
   }
    100% {
        transform: translateY(0);
   }
}
.text span:nth-child(2) {
    animation: jerkup 1s infinite;
}
.text span:nth-child(3) {
    animation: glitch1 1s infinite;
}
@keyframes glitch1 {
    0% {
        transform: translateX(0);
   }
    30% {
        transform: translateX(0);
   }
    31% {
        transform: translateX(10px);
   }
    32% {
        transform: translateX(0);
   }
    98% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(10px);
   }
}
.text span:nth-child(2) {
    animation: glitch2 1s infinite;
}
@keyframes glitch2 {
    0% {
        transform: translateX(0);
   }
    30% {
        transform: translateX(0);
   }
    31% {
        transform: translateX(-10px);
   }
    32% {
        transform: translateX(0);
   }
    98% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(-10px);
   }
}
.overlay .text {
    animation: 5s ease 2000ms normal none infinite running glitch;
}
@keyframes glitch {
    40% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
   }
    41% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(80deg, 0);
   }
    42% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(-50deg, 0);
   }
    43% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
   }
}

/*********************/


#css, #webgl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

#css {
    background:#212121
}

#webgl {
    pointer-events: none;
}

#gameConsole {
    width:100%;
    height:100%;
    border:0;
}

.scanlines {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 999999;
    top:0;
    left:0;
    background:black !important;
}

.hideInfo {
    animation: fade-out-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    pointer-events: none;
}

.showInfo {
    animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    display: block;
}

/**
 * ----------------------------------------
 * animation fade-out-right
 * ----------------------------------------
 */
 @keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  



/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
 @keyframes fade-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
  }
  

#info {
    top:48px;
    left: 48px;
    z-index: 9999;
}

#zoomInToScreen {
    position: absolute;
    top:0;
    left:0;
    z-index:9999;
    width:100vw;
    height:100vh;
}

#info h1, 
#info h2 {
    color:white;
}

#loadingImage {
    background-image: url('https://images.unsplash.com/photo-1580757468214-c73f7062a5cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8MTYlM0E5fGVufDB8fDB8fA%3D%3D&w=1000&q=80');
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

#bottomText {
    position: absolute;
    bottom:0;
}

#textInfo {
    border:1px solid green;
    width:25%;
    padding:1em;
    font-size:1em;
}


#innerbox {
    display: flex;
    flex-direction: column;
    margin:auto;
    height:auto;
}

progress {
    height:80px;
}


/* TV Screen */
.tvScreen {
    overflow-x: hidden;
}

#mainScreen h1 {
    animation: fade-in 2s ease-in-out infinite alternate both;
}


/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    50% {
        opacity:1;
    }
    100% {
      opacity: 1;
    }
  }