body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000012;
  background-image: linear-gradient(#001, #006);
  overflow: hidden;
  position: fixed;
}

.overlay-noise {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: url(noise.png) 0 0 repeat;
  background-repeat: repeat;
  animation: noise-distort 0.5s linear infinite;
  filter: brightness(170%);
  pointer-events:none;  
  z-index: 100;
}

.content {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  filter: saturate(80%);
  animation: vcr-skew 6s linear 1s infinite alternate;
}

.header {
  position: absolute;
  top:0;
  left:0;
  margin: auto;
  height:100%;
  width: 100%;
  z-index: 50;
}

.header a {
  text-decoration: none;
}

.header-content:hover {
  transform: scale(1.2);
}

.header-content:not(:hover) {
  transform: scale(1);
}

.header-content {
  display: table;
  margin: 10% auto;
  transition: transform 1s ease-out 0s;
}

.header-content p {
  padding: 0;
  margin: 0;
  font-size: 1000%;
  filter: drop-shadow(2px 0px 2px #ff0000) drop-shadow(-2px 0px 2px #00ffff);
}

.header-content p.title {
  font-size: 300%;
  color: #fff;
  text-transform: uppercase;  
  font-family: Monoton;
  text-align: left;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 50px #FF1177;
}

.header-content p.name {
  color: #fff;
  text-transform: uppercase;  
  font-family: 'Titillium Web', sans-serif;
  line-height: 1;
  text-align: center;
  background-image: -webkit-linear-gradient(#378DBC 0%, #B6E8F1 46%, #ffffff 50%, #32120E 54%, #FFC488 58%, #582C11 90%, #EC9B4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px #f5f5f5;
}

.header-content p.domain {
  text-transform: lowercase;  
  font-family: Dancing Script;
  transform: rotate(-25deg);
  text-align: right;
  margin-top: 40px;
  color: #ff00ff;
  text-shadow: 1px 1px 1px #fff, 0px 0px 5px #f0f;
}

.sky {
  position: absolute; 
  width: 100%;
  height: 100%;
  background:url(stars.png) repeat bottom center;
  z-index: 15;
  animation: sky-move 240s linear infinite;
  
  bottom: 42%;
}

.sky.reflection {
  bottom: unset;
  
  top: 58%;
  transform: scaleY(-1);
  background-color: #000010;
  filter: brightness(0.3) blur(2px);
  overflow: hidden;
}

.sun {
  position: absolute;
  bottom: -150px;
  width: 300px;
  height: 300px;
  left: 50%;
  margin-left: -150px;
  background-color: #ff0;
  background-image: linear-gradient(#ff0, #f10);
  border-radius: 150px;
  filter: blur(1px);
  box-shadow: 0 0px 5px #f00, 0 0 10px #f00, 0 0 15px #f00;
  animation: sunrise 30s cubic-bezier(0.78, 0.26, 1, 0.98) infinite;
}

.grid-container {
  position: relative;
  top: 58%;
  width: 200%;
  left: -50%;
  height: 100%;
  z-index: 15;
  overflow: hidden;
}

.grid {
  height: 100%;
  position: relative;
  top: -45%;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(24, auto);
  grid-template-rows: repeat(23, auto);
  animation: grid-slide 0.9s linear infinite;
  transform: perspective(80px) translateY(150px) translateZ(-50px) rotateX(35deg) scaleX(2.5);
}

.grid div {
  border: 1px solid #ff44ff;
  padding: 0;
  filter: blur(1px) drop-shadow(1px 0px 1px #f00) drop-shadow(-1px 0px 1px #0ff);
}

.grid-fade {
  position: absolute;
  width: 100%;
  height: 5%;
  top: 58%;
  left: 0;
  background-image: linear-gradient(#ca52ca, #6f346f, #ff000000);
  filter: blur(2px) opacity(0.9) drop-shadow(0px -20px 40px #fff0cf);
  z-index: 25;
}

@keyframes grid-slide {
  100% { transform: perspective(80px) translateY(150px) translateZ(-50px) rotateX(35deg) scaleX(2.5) translateY(13%); }
}

@keyframes noise-distort {
  0% { transform: translate(30px, 30px) }
  19% { transform: translate(30px, 30px) }
  20% { transform: translate(10px, -10px) }
  39% { transform: translate(10px, -10px) }
  40% { transform: translate(-10px, 10px) }
  59% { transform: translate(-10px, 10px) }
  60% { transform: translate(20px, -20px) }
  79% { transform: translate(20px, -20px) }
  80% { transform: translate(-20px, 20px) }
  99% { transform: translate(-20px, 20px) }
}

@keyframes sunrise {
  0% { 
    bottom: -310px;
    filter: sepia(0) blur(1px);
  }
  100% { 
    bottom: 100% ;
    transform: scale(1.5);
    filter: sepia(1) blur(1px);
  }
}

@keyframes sky-move {
	0% {
		  background-position: 0px 1375px;
	}
	100% {
		  background-position: 0px 0px;
	}
}

@keyframes vcr-skew {
	0% {transform: skew(0) translateX(80px); filter: hue-rotate(30deg);}
	1% {transform: skew(-12deg) translate(0px);}
	3% {transform: skew(0); filter: hue-rotate(0deg);}
	7% {transform: skew(0);}
	8% {transform: skewX(-1deg);}
	9% {transform: skew(0);}
	21% {transform: skew(0) translate(0px) scale(1); filter: grayscale(0);}
	22% {transform: skew(4deg) translateX(-50px) scaleX(1.2); filter: grayscale(1);}
	23% {transform: skewX(-6deg) scale(1);}
	25% {transform: skew(0) translate(0px); filter: grayscale(0);}
	65% {transform: skew(0);}
	66% {transform: skewX(-3deg);}
	67% {transform: skew(13deg);}
	68% {transform: skew(0);}
	99% {transform: skew(0) translate(0px); filter: hue-rotate(0deg);}
}

.fill0 { grid-area: fill0; }
.fill1 { grid-area: fill1; }
.fill2 { grid-area: fill2; }
.fill3 { grid-area: fill3; }
.fill4 { grid-area: fill4; }
.fill5 { grid-area: fill5; }
.fill6 { grid-area: fill6; }
.fill7 { grid-area: fill7; }
.fill8 { grid-area: fill8; }
.fill9 { grid-area: fill9; }


.fill1x { grid-area: fill1x; }
.fill2x { grid-area: fill2x; }
.fill3x { grid-area: fill3x; }
.fill4x { grid-area: fill4x; }
.fill5x { grid-area: fill5x; }
.fill6x { grid-area: fill6x; }
.fill7x { grid-area: fill7x; }
.fill8x { grid-area: fill8x; }

.fill3xx { grid-area: fill3xx; }
.fill4xx { grid-area: fill4xx; }
.fill5xx { grid-area: fill5xx; }
.fill6xx { grid-area: fill6xx; }

.volume-fill {
	background-color: #0f0;
}

#audio-icon {
  display: none;
}

#audio-icon + label > div.optional {
	display: none;
}

#audio-icon:checked + label > div.optional {
	display: block;
}

label.audio-icon {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 60;
  
  display: grid;
  width: 55px;
  height: 50px;
  grid-template-columns: 10px repeat(2, 5px) 10px repeat(5, 5px);
  grid-template-rows: repeat(10, 5px);
  gap: 0px 0px;
  grid-template-areas:
    ". . . fill0 . . . . ."
    ". . fill1 fill1 . fill1x fill1x . ."
    ". fill2 fill2 fill2 . . . fill2x ."
    "fill3 fill3 fill3 fill3 . fill3x . . fill3xx"
    "fill4 fill4 fill4 fill4 . . fill4x . fill4xx"
    "fill5 fill5 fill5 fill5 . . fill5x . fill5xx"
    "fill6 fill6 fill6 fill6 . fill6x . . fill6xx"
    ". fill7 fill7 fill7 . . . fill7x ."
    ". . fill8 fill8 . fill8x fill8x . ."
    ". . . fill9 . . . . .";
}

audio {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  color: red;
  background-color: blue;
  width: 100px;
  z-index: 60;
}