/*
The MIT License (MIT)

Copyright (c) 2025 Nick Bair (https://codepen.io/njbair/pen/ZVPomJ)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

@import url("https://fonts.googleapis.com/css?family=VT323");

#switch + .switch-label {
  background: #444;
  background-image: radial-gradient(circle at left top, #5e5e5e, #2b2b2b);
  box-shadow:
    -0.1rem -0.1rem 0 #5e5e5e,
    0.1rem 0.1rem 0 #2b2b2b,
    0 0 0 0.2rem #111111,
    0.1rem 0.1rem 0 0.2rem #444;
}
#switch + .switch-label:after {
  background: #003300;
}
#switch:checked + .switch-label,
#switch:active + .switch-label {
  box-shadow:
    -0.1rem -0.1rem 0 #2b2b2b,
    0.1rem 0.1rem 0 #5e5e5e,
    0 0 0 0.2rem #111111,
    0.1rem 0.1rem 0 0.2rem #444;
}
#switch:checked + .switch-label:after,
#switch:active + .switch-label:after {
  background: #ffffff;
  box-shadow:
    0 0 0.08em white,
    -0.08em 0 0.08em aqua,
    0.08em 0 0.08em fuchsia;
}

.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines:before,
.scanlines:after {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
}
.scanlines:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  z-index: 2147483649;
  opacity: 0.75;
}
.scanlines:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483648;
}

#switch ~ .screen {
  background: #111;
}
#switch ~ .screen.scanlines:before,
#switch ~ .screen.scanlines:after {
  -webkit-animation: none;
  animation: none;
}
#switch ~ .screen > .contents {
  -webkit-animation: crt-power-off 0.55s forwards ease-in-out;
  animation: crt-power-off 0.55s forwards ease-in-out;
}
#switch:checked ~ .screen.scanlines:before {
  background: rgba(0, 0, 0, 0.25);
  -webkit-animation: scan-moving 6s linear infinite;
  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;
  -webkit-animation: scan-crt 1s steps(60) infinite;
  animation: scan-crt 1s steps(60) infinite;
}
#switch:checked ~ .screen > .contents {
  -webkit-animation: crt-power-on 4s forwards linear;
  animation: crt-power-on 4s forwards linear;
}

@-webkit-keyframes scan-moving {
  0% {
    transform: translate3d(0, 100vh, 0);
  }
}
@keyframes scan-moving {
  0% {
    transform: translate3d(0, 100vh, 0);
  }
}
@-webkit-keyframes scan-crt {
  0% {
    background-position: 0 50%;
  }
}
@keyframes scan-crt {
  0% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-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-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;
  }
}
@-webkit-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);
  }
}
@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);
  }
}
html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 2rem;
  background: #000;
  color: #fff;
  font-size: 2.4rem;
  font-family: "VT323", "Courier New", monospace;
  font-weight: normal;
  text-shadow:
    0 0 0.05em white,
    -0.05em 0 0.05em aqua,
    0.05em 0 0.05em fuchsia;
}

.container {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.screen {
  position: relative;
  padding-top: 75%;
  background-color: #333;
  width: 100%;
  height: 0;
  box-sizing: content-box;
  -webkit-clip-path: url(#crtPath);
  clip-path: url(#crtPath);
  text-transform: uppercase;
}
.screen .contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4rem;
  background-color: #333;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.screen .contents::-webkit-scrollbar {
  display: none;
}

.screen h1 {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
}
.screen h1 span {
  -webkit-animation: blink 1s steps(5, start) infinite;
  animation: blink 1s steps(5, start) infinite;
}
.screen a {
  color: #fff;
  text-decoration: none;
}
.screen nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
.screen nav ul li:before {
  content: "- ";
}
.screen nav ul li:hover:after {
  content: ">";
}
*/
.screen footer {
  padding-top: 1em;
}
@media (min-width: 30rem) {
  .screen .contents {
    padding: 5rem;
    font-size: 3rem;
  }
  .screen footer {
    padding-top: 2em;
  }
}
@media (min-width: 45rem) {
  .screen .contents {
    padding: 6rem;
    font-size: 3.6rem;
  }
  .screen footer {
    padding-top: 4em;
  }
}

#switch {
  display: none;
}

.switch-label {
  align-self: flex-end;
  position: relative;
  display: inline-block;
  margin: 2rem 2rem 0 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
  text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.4);
  color: #444;
  cursor: pointer;
}
.switch-label:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5rem, -50%);
  content: "";
  display: block;
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}
.switch-label span {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  text-align: center;
}

/* Styling for Text Inputs, Textareas, and Select */
.crt-input {
  background: black;
  color: #ffffff;
  border: 2px solid #888888;
  font-family: "VT323", monospace;
  font-size: 2.4rem;
  text-shadow: 0 0 5px #888888;
  padding: 10px;
  width: 100%;
  display: block;
  margin-bottom: 15px;
  box-shadow:
    0 0 0.08em white,
    -0.08em 0 0.08em aqua,
    0.08em 0 0.08em fuchsia;
  outline: none;
  max-width: 100%;
}
.crt-input:focus {
  box-shadow: 0 0 20px rgba(136, 136, 136, 1);
}

/* Styling for Select Dropdown */
.crt-input select {
  appearance: none;
  background: black;
  border: 2px solid #888888;
  color: #ffffff;
  padding: 10px;
  font-family: "VT323", monospace;
  text-shadow: 0 0 5px #888888;
  width: 100%;
}
.crt-input select:focus {
  box-shadow: 0 0 20px rgba(136, 136, 136, 1);
}

/* Styling for Textareas */
.crt-input,
.crt-input select,
textarea.crt-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 50px;
  font-size: 2rem;
  padding: 10px;
  box-sizing: border-box;
}

/* Button Styling */
.crt-button {
  background: black;
  color: #ffffff;
  border: 2px solid #888888;
  font-family: "VT323", monospace;
  font-size: 2.4rem;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-shadow:
    0 0 0.05em white,
    -0.05em 0 0.05em aqua,
    0.05em 0 0.05em fuchsia;
  box-shadow: 0 0 10px rgba(136, 136, 136, 0.8);
  transition: all 0.3s ease-in-out;
}
/*
.crt-button:hover {
  background: #888888;
  color: black;
  text-shadow:
    0 0 0.05em white,
    -0.05em 0 0.05em aqua,
    0.05em 0 0.05em fuchsia;
}
*/

/* Styling for Labels */
label {
  font-size: 2.4rem;
  text-shadow:
    0 0 0.05em white,
    -0.05em 0 0.05em aqua,
    0.05em 0 0.05em fuchsia;
  margin-bottom: 5px;
  display: block;
}

/* Custom CRT Alert Box */
.crt-alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  color: #ffffff;
  border: 2px solid #888888;
  text-shadow: 0 0 10px #888888;
  font-family: "VT323", monospace;
  font-size: 2.4rem;
  padding: 20px;
  width: 400px;
  text-align: center;
  box-shadow: 0 0 20px #888888;
  z-index: 9999;
}
.crt-alert button {
  background: black;
  color: #ffffff;
  border: 2px solid #888888;
  font-size: 2rem;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-shadow: 0 0 5px #888888;
}
/*
.crt-alert button:hover {
  background: #888888;
  color: black;
}
*/

/* Remove default list bullets */
.crt-list-rated,
.crt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Slight spacing between list items */
.crt-list li {
  margin: 0.5em 0;
}
/* Link styling */
.crt-list li a {
  text-decoration: none;
  color: #fff;
}
/* Remove hover arrow on list links */
.crt-list li a:hover::before {
  content: "";
}

/* Well-balanced text sizes */
.remix-title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}
.remix-category {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.remix-keywords {
  font-size: 3rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.remix-theory {
  font-size: 2.8rem;
}
.remix-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border: 2px solid #888;
  box-shadow: 0 0 10px rgba(136, 136, 136, 0.8);
}

/* ------------------------- */
/* Unified Active Styling    */
/* ------------------------- */

.active {
  background: #005500;       /* Dark Green background */
  color: #00FF00;            /* Bright Green text */
  text-decoration: underline;
  box-shadow: 0 0 10px #00FF00; /* Neon glow effect */
  position: relative;
  padding-left: 1.5rem;      /* Default space for left-side arrow */
}

:focus {
  outline: none;
}

/* For elements that should show the arrow (i.e. non-boxes),
   only add the arrow if they do not have the .no-arrow class. */
.active:not(.no-arrow)::before {
  content: "> ";
  color: #00FF00;
  position: absolute;
  left: 0;
}

/* For box elements (such as .crt-button) that should not show the arrow,
   override the padding and remove the arrow. */
.crt-button.active {
  padding-left: 0;
}
.crt-button.active::before {
  content: "";
}

/* Removed green outlined box styling */
/* ------------------------------ */
/* Styles Scoped to cam.html Only */
/* ------------------------------ */
.cam-page h1 {
    text-align: center;
    color: red;
    font-size: calc(2rem + 1vw); /* Scales with viewport width */
    margin-bottom: calc(1rem + 1vh);
}

.cam-page #verification-overlay {
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    padding: calc(1rem + 1vh);
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid red;
    box-shadow: 0 0 calc(0.5rem + 1vw) red;
}

.cam-page .verification-box {
    width: 100%;
    text-align: center;
    color: red;
    font-size: min(4vw, 40px); /* Scales dynamically but never exceeds 40px */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* CRT screen setup */
.cam-page #crt-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-clip-path: url(#crtPath);
    clip-path: url(#crtPath);
    border: none;
    box-shadow: none;
}

/* Keep the webcam and snapshot inside the CRT */
.cam-page #webcam {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(200%) brightness(50%) drop-shadow(0px 0px 8px red);
}

.cam-page #snapshot {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

/* Verification input field styling */
.cam-page .crt-input {
    text-align: center;
    color: red;
    font-size: calc(2rem + 1vw);
    background: black;
    border: 2px solid #888888;
    font-family: "VT323", monospace;
    padding: calc(0.5rem + 0.5vw);
    width: 80%;
    margin-bottom: calc(1rem + 1vh);
    box-shadow: 0 0 calc(0.2rem + 0.5vw) red;
}

/* Verification button styling */
.cam-page .crt-button {
    font-size: calc(2rem + 1vw);
    background: black;
    color: red;
    border: 2px solid #888888;
    padding: calc(0.5rem + 0.5vw);
    width: 100%;
    cursor: pointer;
    box-shadow: 0 0 calc(0.2rem + 0.5vw) red;
    transition: all 0.3s ease-in-out;
}

.cam-page .crt-button:hover {
    background: red;
    color: black;
    box-shadow: 0 0 calc(0.5rem + 1vw) red;
}