/* Fonts  */
@font-face {
  font-family:karmaticArcade;
  src:url(karmaticArcade.woff2)
}
@font-face {
  font-family:editUndo;
  src:url(editUndoBrk.woff2)
}


/* Basic Layout */
* { box-sizing:border-box;}
body {
  margin: 0;
  padding: 1vw;
  background: #000;
  color: #1f1f1f;
  font-size: 1vw;
  font-family: editUndo;
  font-weight: normal;
  text-shadow: 0 0 0.12vw white, -0.12vw 0 0.12vw aqua, 0.12vw 0 0.12vw fuchsia;
  background-image:url(backgroundv2.png);
  background-size:cover;
}
.container {
  font-family: inherit;
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1.8fr 0.2fr; 
  gap: 0 0; 
  grid-template-areas: 
    "screen"
    "buttons"; 
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}  
.screen {
  grid-area: screen;
  position: relative;
  background-color: #222;
  width: 65%;
  aspect-ratio: 4/3;
  clip-path: url(#crtPath);
  text-transform: uppercase;
  box-sizing: content-box;
}
.buttons { 
  grid-area: buttons;
  display: flex;
  align-items: flex-start;
  flex-wrap:nowrap;
}
.contents {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 1vw;
  background-color: #333;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}
.screen h1 {
  margin: 1vw;
  font-size: 3vw;
  font-weight: normal;
}
.screen span {
  font-size: 2vw;
}
.screen h1 span {
  animation: blink 1s steps(5, start) infinite;
}
.screen a {
  color: #fff;
  text-decoration: none;
}
.screen button {
  color: #1f1f1f;
  text-shadow: 0 0 0.06em white, -0.06em 0 0.06em aqua, 0.06em 0 0.06em fuchsia;
}
.screen nav {
  margin: 0;
  padding: 0;
}
.screen nav span {
  animation: blink 1s steps(5, start) infinite;
}
.logo {
  width: 99%;
  margin: 0 auto;
}


/* CRT Animations */
@keyframes scan-moving {
  0% {
    transform: translate3d(0, 100vh, 0);
  }
}
@keyframes scan-crt {
  0% {
    background-position: 0 50%;
  }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@keyframes crt-power-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 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 crt-power-off {
  0% {
    transform: scale(1, 1.3) translate3d(0, 0, 0);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    filter: brightness(10);
  }
  100% {
    transform: scale(0, 0.0001) translate3d(0, 0, 0);
    filter: brightness(50);
  }
}


/* Scanline/Power Set-Up */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines:before, .scanlines:after {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
}
.scanlines:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  z-index: 2147483649;
  opacity: 0.75;
}
.scanlines:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483648;
}
#switch, .screen {
  background: #111;
}
.screen.scanlines:not(.pwrOn):before {
  animation: none;
}
.screen.scanlines:not(.pwrOn):after {
  animation: none;
}
#switch:checked, .screen.scanlines:before {
  background: rgba(0, 0, 0, 0.25);
  animation: scan-moving 6s linear infinite;
}
#switch:checked, .screen.scanlines:after {
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25) 51%);
  background-size: 100% 0.4rem;
  animation: scan-crt 1s steps(60) infinite;
}
.screen.scanlines.pwrOn > .contents {
  animation: crt-power-on 4s forwards linear;
}
.screen.scanlines:not(.pwrOn) > .contents {
  animation: crt-power-off 0.55s forwards ease-in-out;
}

/* Button Styles */
.buttons input {
  display: none;
}
.label {
  display: block;
  position: relative;
  width: 2vw;
  margin-left: 5vw;
  margin-right: 5vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  font-size: 1.5vw;
  font-weight: normal;
  text-shadow: 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.4);
  color: #444;
  cursor: pointer;
}
.label:after {
  position: absolute;
  display: block;
  transform: translate(3vw, 50%);
  content: "";
  border-radius: 50%;
  height: 0.6vw;
  width: 0.6vw;
}
.label span {
  position: absolute;
  top: 3vw;
  left: 0;
  width: 100%;
  text-align: center;
}
.buttons input + .label {
  background: #444;
  background-image: radial-gradient(circle at left top, #5e5e5e, #2b2b2b);
  box-shadow: -0.1vw -0.1vw 0 #5e5e5e, 0.1vw 0.1vw 0 #2b2b2b, 0 0 0 0.2vw #111111, 0.1vw 0.1vw 0 0.2vw #444;
}
#switch:checked + .switch.label,
#switch:active + .switch.label {
  box-shadow: -0.1vw -0.1vw 0 #2b2b2b, 0.1vw 0.1vw 0 #5e5e5e, 0 0 0 0.2vw #111111, 0.1vw 0.1vw 0 0.2vw #444;
}
#switch:checked + .switch.label:after,
#switch:active + .switch.label:after {
  background: #66ff66;
  box-shadow: 0 0 1.2vw 0 lime;
}
#switch + .switch.label:after {
  background: #003300;
}
#mute:checked + .mute.label,
#mute:active + .mute.label {
  box-shadow: -0.1vw -0.1vw 0 #2b2b2b, 0.1vw 0.1vw 0 #5e5e5e, 0 0 0 0.2vw #111111, 0.1vw 0.1vw 0 0.2vw #444;
}
#mute:checked + .mute.label:after,
#mute:active + .mute.label:after {
  background: #ff0000;
  box-shadow: 0 0 1.2vw 0 red;
}
#mute + .mute.label:after {
  background: #3f0000;
}
#vol-up:active + .volUp.label {
  box-shadow: -0.1vw -0.1vw 0 #2b2b2b, 0.1vw 0.1vw 0 #5e5e5e, 0 0 0 0.2vw #111111, 0.1vw 0.1vw 0 0.2vw #444;
}
#vol-down:active + .volDown.label {
  box-shadow: -0.1vw -0.1vw 0 #2b2b2b, 0.1vw 0.1vw 0 #5e5e5e, 0 0 0 0.2vw #111111, 0.1vw 0.1vw 0 0.2vw #444;
}


/* Form */
.form-popup {
  display:none;
  position: fixed;
  bottom: 5%;
  clip-path: url(#crtPath);
  z-index:9;
  box-sizing: content-box;
}

/* Form Buttons */ 
.button {
  font-family: editUndo;
  font-size: 2.5vw;
  shape-rendering: crispEdges;
  cursor: pointer;
  border: 0.2vw outset rgba(0, 0, 0, 0.50);
}
.button:active {
  transform: translateY(.5vw);
}
.form-btns {
  margin-top: 2vw;
}
.contents .contact {
  background-color: rgba(59, 255, 15, 1);
}
.contents .contact:hover {
  background: rgba(59, 255, 15, .5);
}
.contents .contact:active {
  background: rgba(59, 255, 15, 1);
}
.form-container .submit {
  background-color: rgba(59, 255, 15, 1);
  margin-left: 1vw;
}
.form-container .submit:hover {
  background: rgba(59, 255, 15, .5);
}
.form-container .submit:active {
  background: rgba(59, 255, 15, 1);
}
.form-container .cancel {
  background-color: rgba(244, 31, 215, 1);
  margin-right: 1vw;
}
.form-container .cancel:hover {
  background: rgba(244, 31, 215, .5);
}
.form-container .cancel:active {
  background: rgba(244, 31, 215, 1);
}

/* Form Style */
.form-container {
  display: flex;
  flex-direction:column;
  position:relative;
  background-color: #333;
  width: 51vw;
  aspect-ratio: 4/3;
  text-transform: uppercase;
  padding: 5%;
  box-sizing: border-box;
  align-items: center;
}
.form-container h2 {
  text-align: center;
  font-size: 4vw;
}
input#name, input#email, textarea#reason {
  display: block;
  color: whitesmoke;
  font-size:1vw;
}
label#name, label#email, label#reason {
  display: block;
  align-self: start;
  font-size: 2vw;
  margin-left: 9vw;
}
.form-container input[type=text],input[type=email] {
  width:61%;
  height:6%;
  border: 0.2vw inset rgba(0, 0, 0, 0.50);
  background: rgba(0, 0, 0, 0.25);
}
.form-container textarea {
  width:61%;
  height: 21%;
  resize: both;
  overflow: auto;
  border: 0.2vw inset rgba(0, 0, 0, 0.50);
  background:rgba(0, 0, 0, 0.25);
}
.form-container input[type=text]:focus, 
.form-container input[type=email]:focus,
.form-container textarea:focus{
  background-color:rgba(0, 0, 0, 0.40);
  outline:none;
}
.form-container input[type=text]::placeholder,
.form-container input[type=email]::placeholder,
.form-container textarea::placeholder {
  font-size: 1vw;
  font-family: editUndo;
  vertical-align:text-top;
}

/* Media Queries */
@media (width <= 450px) {
  body {
    padding-top: 15vw;
    zoom:125%
  }
  .container {
    width: 100%;
    margin: 0;
    justify-self:center;
  }
  .screen {
    width: 100%;
  }
  .contents h1, .contents button {
    zoom:125%
  }
  .form-container {
    width: 90vw;
    padding-top: 25vw;
    zoom:125%;
  }
  .form-container b {
    font-size: 2.5vw;
    margin-left: 6vw;
  }
  .form-container input[type=text],input[type=email] {
    height: 1.5vh;
  }
  .form-container textarea {
    height: 4vh;
  }
  .buttons {
    zoom:150%
  }
}