:root {
  --bg-prim: #021719;
  --bg-sec: #09272a;
  --text-prim: #24484b;
  --box-color: #14393c;
  --glow-color: rgba(20, 57, 60, 0.8);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-prim);
  color: var(--text-prim);
  font-family: monospace, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-title h1 {
  margin: 0;
  font-size: 6vw;
  animation: text-change 0.5s infinite linear;
}

.main-stuff {
  flex: 1;
  margin: 2vh;
  background-color: var(--bg-sec);
  border: 1px solid var(--box-color);
  border-radius: 5vh;
  box-shadow: 0 0 15vh var(--box-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-frame {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 5vh;
  border: 1px solid var(--box-color);
  box-shadow: 0 0 15vh var(--box-color);
  animation: shadow-orbit 8s linear infinite;
}

.iframe-container {
  position: absolute;
  inset: 0;
}

.iframe-container iframe,
.iframe-container video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 5vh;
  object-fit: fill;
}

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,255,102,0.18) 0%,
      rgba(0,255,102,0.18) 0.35%,
      transparent 0.7%,
      transparent 1.4%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.0),
      rgba(0,0,0,0.25)
    );
  animation: scan-drift 12s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.22;
  border-radius: 5vh;
}

@keyframes text-change {
  0% { color: var(--text-prim); }
  50% { color: var(--box-color); }
  100% { color: var(--bg-prim); }
}

@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 100vh; }
}

@keyframes shadow-orbit {
  0% { box-shadow: 0 -1vh 3vh var(--glow-color); }
  25% { box-shadow: 1vh 0 4vh var(--glow-color); }
  50% { box-shadow: 0 1vh 3vh var(--glow-color); }
  75% { box-shadow: -1vh 0 4vh var(--glow-color); }
  100% { box-shadow: 0 -1vh 3vh var(--glow-color); }
}