@font-face {
  font-family: lcd;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/lcd.ttf);
}
@font-face {
  font-family: pixel;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/pixel.ttf);
}
@font-face {
  font-family: chat;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/chat.ttf);
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  margin: 0;
}
body::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-animation: flicker 0.15s infinite;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  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%;
  pointer-events: none;
}

#paused-overlay {
  display: block;
  position: absolute;
  z-index: 99;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: rgb(100%, 100%, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#play-button {
  height: 25%;
  width: 25%;
  filter: invert() brightness(0.5) opacity(0.4);
}

#play-button::after {
  height: 100%;
  width: 100%;
  display: block;
  overflow: visible;
  content: url("./play-button.svg");
}

#paused-overlay[data-is-playing="true"] {
  display: none;
}

progress[value] {
  width: 75%;
  margin-left: 12%;
  margin-right: 12%;
  border: 0px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #3d7f7d;
  box-shadow: none;
}

progress::-webkit-progress-bar {
  background: #3d7f7d;
  border: 0;
}

progress::-webkit-progress-value {
  background: #d3e9e6;
  border: 0;
}

progress::-moz-progress-bar {
  background: #d3e9e6;
  border: 0;
}

.codec {
  position: absolute;
  left: calc((100vw - 1200px) / 2);
  top: 15%;
  width: 1200px;
  height: 400px;
  border: 4px solid #274851;
  box-shadow:
    0 0 10px 0px #274851,
    0 0 10px 0px #274851 inset;
}
.codec > .left,
.codec > .center,
.codec > .right {
  float: left;
  width: 33.33%;
  height: 100%;
}

.screen {
  background-color: #274851;
  box-shadow:
    0 0 10px 1px #fff inset,
    0 0 10px 1px #fff,
    0 0 30px 10px #3bcb86;
  position: absolute;
  width: 250px;
  height: calc(100% + 8px);
  background-size: 100% auto;
  top: -4px;
  -webkit-animation: turn-on 250ms linear;
  animation: turn-on 250ms linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  transform: scale(1, 0);
  overflow: hidden;
}
.screen::before {
  background-color: #d3e9e6;
  box-shadow: 0 0 10px #3bcb86;
  content: "";
  height: 50px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
}
.screen::after {
  background-color: #d3e9e6;
  box-shadow: 0 0 10px #3bcb86;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
}

.left > .screen {
  left: 25px;
}

.left > .screen > .otacon {
  background-image: url("./otacon.png");
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  background-size: cover;
  background-position: 50%;
  filter: saturate(0.5);
}

body:has(#paused-overlay[data-is-playing="true"]) .left .screen .otacon {
  background-image: url("./otacon.gif");
}

.left > .screen::before {
  -webkit-animation: scan 7500ms linear 825ms forwards infinite;
  animation: scan 7500ms linear 825ms forwards infinite;
}
.left > .screen::after {
  -webkit-animation: scan 4000ms linear 845ms forwards infinite;
  animation: scan 4000ms linear 845ms forwards infinite;
}

.right > .screen {
  right: 25px;
  background-image: url(./snake.jpg);
}
.right > .screen::before {
  -webkit-animation: scan 7500ms linear 602ms forwards infinite;
  animation: scan 7500ms linear 602ms forwards infinite;
}
.right > .screen::after {
  -webkit-animation: scan 4000ms linear 564ms forwards infinite;
  animation: scan 4000ms linear 564ms forwards infinite;
}

.screen video {
  margin: auto -50%;
  transform: scale(1.5);
  object-fit: cover;
  filter: hue-rotate(98deg) saturate(0.18) brightness(0.8) contrast(1.6)
    url('data:image/svg+xml,\
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">\
		<filter id="px" x="0" y="0"> \
			<feFlood x="2" y="2" height="2" width="1" /> \
			<feComposite width="3" height="3" /> \
			<feTile result="t" /> \
			<feComposite in="SourceGraphic" in2="t" operator="in" /> \
			<feMorphology operator="dilate" radius="2" /> \
		</filter> \
		</svg>#px');
}

@-webkit-keyframes scan {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}

@keyframes scan {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}
/* center */
.ptt,
.memory,
.frequency {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background-color: #274851;
}

.ptt,
.memory {
  width: 200px;
  height: 40px;
  background-color: #274851;
  text-align: center;
  font-family: pixel;
  font-size: 40px;
  color: #3d7f7d;
  box-shadow:
    -6px 0 0 0 #000,
    6px 0 0 0 #000;
}

.ptt {
  letter-spacing: 12px;
  top: -10px;
}

.memory {
  bottom: -10px;
}

.ptt::before,
.ptt::after,
.memory::before,
.memory::after {
  background-color: #274851;
  content: "";
  height: 4px;
  position: absolute;
  width: 180px;
  box-shadow:
    0 0 10px 0px #274851,
    0 0 10px 0px #274851 inset;
}

.ptt::before,
.ptt::after {
  bottom: 4px;
}

.memory::before,
.memory::after {
  top: 4px;
}

.ptt::before,
.memory::before {
  left: -186px;
}

.ptt::after,
.memory::after {
  right: -186px;
}

.frequency {
  width: 400px;
  height: 250px;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  box-shadow:
    0 0 10px 0px #274851,
    0 0 10px 0px #274851 inset;
}

.frequency > .left,
.frequency > .right {
  position: absolute;
  background-color: #274851;
  width: 80px;
  height: 40px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  box-shadow:
    0 0 10px 0px #274851,
    0 0 10px 0px #274851 inset;
}

.frequency .left {
  left: -100px;
}

.frequency .right {
  right: -100px;
}

/* lcd */
.lcd {
  bottom: 0;
  color: #3d7f7d;
  font-family: "lcd";
  height: 87px;
  line-height: 88px;
  padding: 10px;
  position: absolute;
  right: 0;
  width: 318px;
  transform: scale(0.9, 1) translate3d(20px, 0, 0);
}
.lcd > span {
  position: absolute;
}
.lcd > span::before {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #d3e9e6;
  text-shadow:
    0 0 2px #fff,
    0 0 10px #3bcb86;
}
.lcd .small {
  font-size: 75px;
  left: 0px;
  bottom: 0;
}
.lcd .small::before {
  content: "14";
}
.lcd .large {
  font-size: 100px;
}
.lcd .large:nth-child(2) {
  right: 160px;
}
.lcd .large:nth-child(2)::before {
  content: "1";
}
.lcd .large:nth-child(2)::after {
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background-color: #d3e9e6;
  box-shadow:
    0 0 2px 0px #fff,
    0 0 10px 0px #3bcb86;
  content: "";
}
.lcd .large:nth-child(3) {
  right: 10px;
}
.lcd .large:nth-child(3)::before {
  content: "12";
}

/* bars */
.bars {
  width: 400px;
  height: 100%;
  padding: 10px;
}
.bars > div {
  position: relative;
  height: 22px;
  width: 100%;
  background-color: #3d7f7d;
  margin-bottom: 4px;
}
.bars > div:nth-child(1) {
  width: 380px;
}
.bars > div:nth-child(2) {
  width: 190px;
}
.bars > div:nth-child(3) {
  width: 126.6666666667px;
}
.bars > div:nth-child(4) {
  width: 95px;
}
.bars > div:nth-child(5) {
  width: 76px;
}
.bars > div:nth-child(6) {
  width: 63.3333333333px;
}
.bars > div:nth-child(7) {
  width: 54.2857142857px;
}
.bars > div:nth-child(8) {
  width: 47.5px;
}
.bars > div:nth-child(9) {
  width: 42.2222222222px;
}
.bars > div:nth-child(3) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.bars > div:nth-child(3)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(4) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
.bars > div:nth-child(4)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(5) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
.bars > div:nth-child(5)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(6) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.bars > div:nth-child(6)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(7) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.bars > div:nth-child(7)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(8) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
.bars > div:nth-child(8)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.bars > div:nth-child(9) {
  -webkit-animation-name: signal;
  animation-name: signal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.bars > div:nth-child(9)::after {
  border-color: #d3e9e6 transparent transparent transparent;
}
.chat {
  color: #fff;
  font-family: pixel;
  font-size: 50px;
  left: 50%;
  position: relative;
  top: 100px;
  transform: translate3d(-50%, 0px, 0px);
  width: 800px;
  font-family: Inconsolata;
  text-shadow: 0 0 4px #fff;
  letter-spacing: 3px;
}

@-webkit-keyframes signal {
  0% {
    background-color: #3d7f7d;
  }
  100% {
    background-color: #d3e9e6;
    box-shadow:
      0 0 2px 0px #fff,
      0 0 10px 0px #3bcb86;
  }
}

@keyframes signal {
  0% {
    background-color: #3d7f7d;
  }
  100% {
    background-color: #d3e9e6;
    box-shadow:
      0 0 2px 0px #fff,
      0 0 10px 0px #3bcb86;
  }
}
@-webkit-keyframes flicker {
  0% {
    opacity: 0.902737808;
  }
  2% {
    opacity: 0.5230587253;
  }
  4% {
    opacity: 0.6561292135;
  }
  6% {
    opacity: 0.4350883129;
  }
  8% {
    opacity: 0.3421085621;
  }
  10% {
    opacity: 0.7914510902;
  }
  12% {
    opacity: 0.5989153405;
  }
  14% {
    opacity: 0.5157067589;
  }
  16% {
    opacity: 0.481378603;
  }
  18% {
    opacity: 0.9182132577;
  }
  20% {
    opacity: 0.4546384682;
  }
  22% {
    opacity: 0.1639452831;
  }
  24% {
    opacity: 0.1462548342;
  }
  26% {
    opacity: 0.3108841493;
  }
  28% {
    opacity: 0.2784614776;
  }
  30% {
    opacity: 0.1989133629;
  }
  32% {
    opacity: 0.3744046886;
  }
  34% {
    opacity: 0.1004883594;
  }
  36% {
    opacity: 0.2193605296;
  }
  38% {
    opacity: 0.5894560476;
  }
  40% {
    opacity: 0.7575948756;
  }
  42% {
    opacity: 0.1696332081;
  }
  44% {
    opacity: 0.1768959499;
  }
  46% {
    opacity: 0.1514799748;
  }
  48% {
    opacity: 0.201640036;
  }
  50% {
    opacity: 0.6611069126;
  }
  52% {
    opacity: 0.8999589071;
  }
  54% {
    opacity: 0.3923437969;
  }
  56% {
    opacity: 0.9267978314;
  }
  58% {
    opacity: 0.6369633871;
  }
  60% {
    opacity: 0.4258676932;
  }
  62% {
    opacity: 0.1267794289;
  }
  64% {
    opacity: 0.0336348144;
  }
  66% {
    opacity: 0.5175553172;
  }
  68% {
    opacity: 0.8804533992;
  }
  70% {
    opacity: 0.8192156202;
  }
  72% {
    opacity: 0.5134236457;
  }
  74% {
    opacity: 0.5366512368;
  }
  76% {
    opacity: 0.9816080263;
  }
  78% {
    opacity: 0.9451023954;
  }
  80% {
    opacity: 0.9322250952;
  }
  82% {
    opacity: 0.7094602188;
  }
  84% {
    opacity: 0.5874584677;
  }
  86% {
    opacity: 0.6905340642;
  }
  88% {
    opacity: 0.7473014118;
  }
  90% {
    opacity: 0.0756820575;
  }
  92% {
    opacity: 0.043380219;
  }
  94% {
    opacity: 0.9947609785;
  }
  96% {
    opacity: 0.4870604915;
  }
  98% {
    opacity: 0.0500369737;
  }
  100% {
    opacity: 0.7183134293;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.902737808;
  }
  2% {
    opacity: 0.5230587253;
  }
  4% {
    opacity: 0.6561292135;
  }
  6% {
    opacity: 0.4350883129;
  }
  8% {
    opacity: 0.3421085621;
  }
  10% {
    opacity: 0.7914510902;
  }
  12% {
    opacity: 0.5989153405;
  }
  14% {
    opacity: 0.5157067589;
  }
  16% {
    opacity: 0.481378603;
  }
  18% {
    opacity: 0.9182132577;
  }
  20% {
    opacity: 0.4546384682;
  }
  22% {
    opacity: 0.1639452831;
  }
  24% {
    opacity: 0.1462548342;
  }
  26% {
    opacity: 0.3108841493;
  }
  28% {
    opacity: 0.2784614776;
  }
  30% {
    opacity: 0.1989133629;
  }
  32% {
    opacity: 0.3744046886;
  }
  34% {
    opacity: 0.1004883594;
  }
  36% {
    opacity: 0.2193605296;
  }
  38% {
    opacity: 0.5894560476;
  }
  40% {
    opacity: 0.7575948756;
  }
  42% {
    opacity: 0.1696332081;
  }
  44% {
    opacity: 0.1768959499;
  }
  46% {
    opacity: 0.1514799748;
  }
  48% {
    opacity: 0.201640036;
  }
  50% {
    opacity: 0.6611069126;
  }
  52% {
    opacity: 0.8999589071;
  }
  54% {
    opacity: 0.3923437969;
  }
  56% {
    opacity: 0.9267978314;
  }
  58% {
    opacity: 0.6369633871;
  }
  60% {
    opacity: 0.4258676932;
  }
  62% {
    opacity: 0.1267794289;
  }
  64% {
    opacity: 0.0336348144;
  }
  66% {
    opacity: 0.5175553172;
  }
  68% {
    opacity: 0.8804533992;
  }
  70% {
    opacity: 0.8192156202;
  }
  72% {
    opacity: 0.5134236457;
  }
  74% {
    opacity: 0.5366512368;
  }
  76% {
    opacity: 0.9816080263;
  }
  78% {
    opacity: 0.9451023954;
  }
  80% {
    opacity: 0.9322250952;
  }
  82% {
    opacity: 0.7094602188;
  }
  84% {
    opacity: 0.5874584677;
  }
  86% {
    opacity: 0.6905340642;
  }
  88% {
    opacity: 0.7473014118;
  }
  90% {
    opacity: 0.0756820575;
  }
  92% {
    opacity: 0.043380219;
  }
  94% {
    opacity: 0.9947609785;
  }
  96% {
    opacity: 0.4870604915;
  }
  98% {
    opacity: 0.0500369737;
  }
  100% {
    opacity: 0.7183134293;
  }
}
@-webkit-keyframes turn-on {
  0% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  20% {
    transform: scale(1, 0.2);
    filter: brightness(60);
    opacity: 1;
  }
  40% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  60% {
    transform: scale(1, 0.1);
    filter: brightness(60);
    opacity: 1;
  }
  80% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}
@keyframes turn-on {
  0% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  20% {
    transform: scale(1, 0.2);
    filter: brightness(60);
    opacity: 1;
  }
  40% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  60% {
    transform: scale(1, 0.1);
    filter: brightness(60);
    opacity: 1;
  }
  80% {
    transform: scale(1, 0);
    filter: brightness(30);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    filter: contrast(1) brightness(1.1) saturate(1.1);
    opacity: 1;
  }
}