* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  background-color: black;
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.header {
  background-image: url("../images/vuctf/vuctf2026-poster.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: calc(100vh * 1348 / 889);
  height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 33.33%;
}

@media (max-aspect-ratio: 1348/889) {
  .header {
    width: 100vw;
    height: calc(100vw * 889 / 1348);
  }
}

p,
i,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: white;
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  background: none;
}

article {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  padding-left: 20px;
  width: min(calc(100vh * 1348 / 889), 100%);
  /* spacing in between elements in content */
  gap: 20px;
  margin-bottom: 240px;
}

.content>section>div {
  padding-left: 3%;
  padding-right: 3%;
}

#secret {
  color: #2d2d2d;
  font-size: 10px;
}

h1 {
  font-size: 48px;
}

.glitch {
  color: white;
  letter-spacing: 0.05em;
  text-shadow:
    -2px -2px 0 rgb(0, 255, 238),
    -4px -4px 0 rgb(255, 0, 0),
    -7px -7px 0 rgb(0, 0, 255);
  background: none;
}

.glitch p,
.glitch i {
  text-shadow:
    -1px -1px 0 rgb(0, 255, 238),
    -2px -2px 0 rgb(255, 0, 0),
    -3px -3px 0 rgb(0, 0, 255);
}

* {
  font-family: "Press Start 2P", system-ui;
}

.glitch-spontaneous {
  position: relative;
  display: inline-block;
  font-family: "Press Start 2P", system-ui;
  color: white;
}

.glitch-spontaneous::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  animation: garble-burst 3.7s infinite;
  animation-delay: calc(var(--random-delay, 0) * 1s);
  pointer-events: none;
}

@keyframes garble-burst {

  0%,
  75% {
    content: "";
    opacity: 0;
  }

  76% {
    content: "█▓▒░";
    opacity: 1;
    color: #0ff;
    left: 3px;
    top: -1px;
  }

  78% {
    content: "≋≋≋≋";
    left: -1px;
    top: 2px;
    color: #f0f;
  }

  80% {
    content: "▀▄▀▄";
    left: 2px;
    top: -2px;
    color: #ff0;
  }

  82% {
    content: "※※※※";
    left: -3px;
    top: 1px;
    color: #0f0;
  }

  84% {
    content: "◢◣◤◥";
    left: 1px;
    top: -1px;
    color: #f00;
  }

  86% {
    content: "░▒▓█";
    left: -2px;
    top: 2px;
    color: #0ff;
  }

  88% {
    content: "▓▒░▒";
    left: 2px;
    top: -1px;
    color: #ff0;
  }

  90% {
    content: "◆◇◈◉";
    left: -1px;
    top: 1px;
    color: #f0f;
  }

  92% {
    content: "▲△▼▽";
    left: 3px;
    top: -2px;
    color: #0f0;
  }

  94% {
    content: "■□▪▫";
    left: -2px;
    top: 1px;
    color: #f00;
  }

  96% {
    content: "●○◐◑";
    left: 1px;
    top: -1px;
    color: #0ff;
  }

  98% {
    content: "¤¤¤¤";
    left: -1px;
    top: 2px;
    color: #ff0;
  }

  100% {
    content: "";
    opacity: 0;
  }
}

.register-btn {
  display: inline-block;
  padding: 12px 24px;
  margin-top: 10px;
  font-family: "Press Start 2P", system-ui;
  font-size: 24px;
  color: white;
  background-color: #000000;
  border: 3px solid white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow:
    -2px -2px 0 rgb(0, 255, 238),
    -4px -4px 0 rgb(255, 0, 0),
    -7px -7px 0 rgb(0, 0, 255);
  transition: all 0.3s ease;
  cursor: pointer;
}

.register-btn:hover {
  background-color: white;
  color: #000000;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  box-shadow:
    -2px -2px 0 rgb(0, 255, 238),
    -4px -4px 0 rgb(255, 0, 0),
    -7px -7px 0 rgb(0, 0, 255);
}

#signup {
  text-align: center;
}

.title-line {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.title-line span {
  background: none;
}

.title-line::before,
.title-line::after {
  content: "******************************************************************************************";
  flex: 1;
  height: 1em;
  overflow: hidden;
  background: none;
  white-space: nowrap;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

@media (max-width: 768px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 14px;
  }

  p,
  i,
  a {
    font-size: 12px;
  }

  .register-btn {
    font-size: 16px;
    padding: 10px 20px;
  }

  .content {
    padding-left: 10px;
    padding-right: 10px;
  }
}