@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

        body {
            background-color: #020102;
            overflow:hidden;
        }
		
		#youtubeLink {
			font-family: "Press Start 2P", cursive;
			text-transform: uppercase;
			width: 50%;
			padding: 20px 0;
			font-size: 12px;
			color: #ce2010;
			margin-bottom: 30px;
			border: none;
			outline: none;
			background: transparent;
			display: inline;
			text-align: center;
			text-decoration: none;
		}
		
        .video-container {
            /* width is set as 100% here. any width can be specified as per requirement */
            width: 100%;
            padding-top: 100%;
            height: 0px;
            position: relative;
        }

        #logoContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .center {
            width: 30%;
            max-width: 600px;
            min-width: 300px;
            position: absolute;
            /*it can be fixed too*/
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /*this to solve "the content will not be cut when the window is smaller than the content": */
        }

        #introVid {
            z-index: 1;
        }

        #logoContainer video {
            width: 100%;
            position: absolute;
            top: 0;
        }

        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            z-index: 400;
            opacity: 0.8;
            pointer-events: none;
        }

        .noise:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("./background-noise.png");
            pointer-events: none;
        }

        .noise-moving {
            opacity: 1;
            z-index: 450;
        }

        .noise-moving:before {
            will-change: background-position;
            -webkit-animation: noise 1s infinite alternate;
            animation: noise 1s infinite alternate;
        }

        .scanlines {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 300;
            opacity: 0.6;
            will-change: opacity;
            -webkit-animation: opacity 3s linear infinite;
            animation: opacity 3s linear infinite;
        }

        .scanlines:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(51%, rgba(0, 0, 0, 0.5)));
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
            background-size: 100% 4px;
            will-change: background, background-size;
            -webkit-animation: scanlines 0.2s linear infinite;
            animation: scanlines 0.2s linear infinite;
        }

        /* Animations */

        @-webkit-keyframes scanlines {
            from {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(51%, rgba(0, 0, 0, 0.5)));
                background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
                background-size: 100% 4px;
            }

            to {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0.5)), color-stop(51%, transparent));
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
                background-size: 100% 4px;
            }
        }

        @keyframes scanlines {
            from {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(51%, rgba(0, 0, 0, 0.5)));
                background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
                background-size: 100% 4px;
            }

            to {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0.5)), color-stop(51%, transparent));
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
                background-size: 100% 4px;
            }
        }

        @-webkit-keyframes noise {

            0%,
            100% {
                background-position: 0 0;
            }

            10% {
                background-position: -52% -102%;
            }

            20% {
                background-position: -152% 52%;
            }

            30% {
                background-position: 72% -252%;
            }

            40% {
                background-position: 202% 252%;
            }

            50% {
                background-position: -252% 102%;
            }

            60% {
                background-position: 152% 52%;
            }

            70% {
                background-position: 0 152%;
            }

            80% {
                background-position: 252% 352%;
            }

            90% {
                background-position: -102% 102%;
            }
        }

        @keyframes noise {

            0%,
            100% {
                background-position: 0 0;
            }

            10% {
                background-position: -52% -102%;
            }

            20% {
                background-position: -152% 52%;
            }

            30% {
                background-position: 72% -252%;
            }

            40% {
                background-position: 202% 252%;
            }

            50% {
                background-position: -252% 102%;
            }

            60% {
                background-position: 152% 52%;
            }

            70% {
                background-position: 0 152%;
            }

            80% {
                background-position: 252% 352%;
            }

            90% {
                background-position: -102% 102%;
            }
        }

        @-webkit-keyframes opacity {
            0% {
                opacity: 0.6;
            }

            20% {
                opacity: 0.3;
            }

            35% {
                opacity: 0.5;
            }

            50% {
                opacity: 0.8;
            }

            60% {
                opacity: 0.4;
            }

            80% {
                opacity: 0.7;
            }

            100% {
                opacity: 0.6;
            }
        }

        @keyframes opacity {
            0% {
                opacity: 0.6;
            }

            20% {
                opacity: 0.3;
            }

            35% {
                opacity: 0.5;
            }

            50% {
                opacity: 0.8;
            }

            60% {
                opacity: 0.4;
            }

            80% {
                opacity: 0.7;
            }

            100% {
                opacity: 0.6;
            }
        }

        .vhs-message {
            -webkit-animation: blur 200ms  infinite;
            animation: blur 200ms  infinite;
            margin: 10px;
        }

        @-webkit-keyframes blur {
            0% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: 0.9;
            }

            50% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: .92;
            }

            100% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: 0.9;
            }
        }

        @keyframes blur {
            0% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: 1;
            }

            50% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: 1;
            }

            100% {
                -webkit-filter: blur(1px);
                filter: blur(1px);
                opacity: 1;
            }
        }
        *::-moz-selection {
            background: #fd5d8d;
            color: #f1034a;
            color: #270245;
        }
        
        *::selection {
            background: #fd5d8d;
            color: #f1034a;
            color: #270245;
        }
        input {
            font-family: "Press Start 2P", cursive;
            text-transform: uppercase;
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #ce2010;
            margin-bottom: 30px;
            border: none;
            border-bottom: 2px solid #ce2010;
            outline: none;
            background: transparent;
          }
          
          ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            font-family: "Press Start 2P", cursive;
            text-transform: uppercase;
            color: #ce2010;
            opacity: 1; /* Firefox */
          }

          div.slide-up {
            height:200px;
            overflow:hidden;
          }
          div.slide-up p {
            animation: 10s slide-up;
            margin-top:0%;
          }
          
          @keyframes slide-up {
            from {
              margin-top: 200%;
              height: 300%; 
              opacity: 0;
            }
          
            to {
              margin-top: 0%;
              height: 100%;
              opacity: .8;
            }
          }
          @keyframes glitch{
            2%,64%{
              transform: translate(1px,0) skew(0deg);
            }
            4%,60%{
              transform: translate(-1px,0) skew(0deg);
            }
            62%{
              transform: translate(0,0) skew(1deg); 
            }
          }
          #login{
            animation: 1s slide-up, glitch 1s linear infinite;
          }