@font-face {
  font-family: "Kingdom";
  src: url("static/fonts/kingdom.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VCR OSD Mono";
  src: url("static/fonts/vcr-osd-mono.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.font-kingdom {
  font-family: "Kingdom", sans-serif;
}

.font-vcr {
  font-family: "VCR OSD Mono", monospace;
}

* {
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
}

body {
  color: white;
  background-color: black;
  transition: background-color 0.4s ease;
}

body.theme-day {
  background-color: #02050f;
}

body.theme-evening {
  background-color: #010206;
}

body.theme-night {
  background-color: #010105;
}

.page-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-background {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 1240px) {
  .hero-background {
    min-height: 75vh;
  }

  .hero-image {
    width: auto;
    height: 100%;
    min-height: 75vh;
    object-fit: cover;
  }

  .theme-background {
    min-height: 100%;
  }
}

.hero-image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.logo-container {
  display: none;
}

@media (min-width: 1240px) {
  .logo-container {
    display: block;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 50;
  }
}

.mobile-logo-container {
  display: block;
  position: absolute;
  top: 2.25rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 50;
}

@media (min-width: 1240px) {
  .mobile-logo-container {
    display: none;
  }
}

.logo {
  width: 12rem;
}

.mobile-logo-container .logo {
  width: 16rem;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
  padding: 0 1.25rem;
}

.mobile-logo-dark,
.mobile-logo-light {
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
}

body.theme-day .mobile-logo-dark {
  opacity: 1;
}

body.theme-evening .mobile-logo-light,
body.theme-night .mobile-logo-light {
  opacity: 1;
}

@media (min-width: 1240px) {
  .logo {
    width: 16rem;
  }
}

.main-content {
  flex-grow: 1;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  margin-top: -2px;
  background-image: url("static/images/day-background.png");
  transition: background-image 0.4s ease;
}

.theme-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.bg-day {
  background-image: url("static/images/day-background.png");
}

.bg-evening {
  background-image: url("static/images/evening-background.png");
}

.bg-night {
  background-image: url("static/images/night-background.png");
}

body.theme-day .bg-day,
html[data-theme="day"] .bg-day {
  opacity: 1;
}

body.theme-evening .bg-evening,
html[data-theme="evening"] .bg-evening {
  opacity: 1;
}

body.theme-night .bg-night,
html[data-theme="night"] .bg-night {
  opacity: 1;
}

.content-container {
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .content-container {
    padding: 2rem;
  }
}

@media (min-width: 1240px) {
  .content-container {
    padding: 3rem;
  }
}

.section {
  margin-bottom: 2rem;
}

.intro-section {
  margin-bottom: 3rem;
}

.section-title {
  font-family: "Kingdom", sans-serif;
  font-size: 2.25rem;
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 1240px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  margin: -60px;
  width: calc(100% + 120px);
}

@media (min-width: 1240px) {
  .section-content {
    padding: 1rem;
    margin: -90px;
    width: calc(100% + 180px);
  }
}

.section-description {
  font-family: "VCR OSD Mono", monospace;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 42rem;
  margin: 1rem auto 0;
  text-align: center;
}

@media (min-width: 768px) {
  .section-description {
    font-size: 1.125rem;
    margin-top: 1.25rem;
  }
}

@media (min-width: 1240px) {
  .section-description {
    font-size: 1.25rem;
    max-width: 48rem;
    margin-top: 1.5rem;
  }
}

.intro-section .section-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1240px) {
  .intro-section .section-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.intro-section .section-description {
  margin-top: 0;
}

.timeline-container {
  position: relative;
  min-height: 300px;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  gap: 1.5rem;
}

@media (min-width: 1240px) {
  .timeline-content {
    padding: 1rem;
    gap: 2rem;
  }
}

.timeline-events-container {
  width: 100%;
  max-width: 58rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.timeline-events {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  counter-reset: timeline-counter;
}

@media (max-width: 767px) {
  .timeline-events {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

@media (min-width: 1240px) {
  .timeline-events {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2.8rem;
    counter-reset: none;
  }
}

.timeline-event {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 300px;
  position: relative;
}

@media (max-width: 1239px) {
  .timeline-event {
    counter-increment: timeline-counter;
  }
  
  .timeline-event::before {
    content: counter(timeline-counter);
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    background-image: url("static/images/bg-theme-button.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "VCR OSD Mono", monospace;
    font-size: 0.9rem;
    z-index: 10;
    opacity: 0.8;
  }
}

@media (max-width: 767px) {
  .timeline-event {
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .timeline-event {
    width: calc(50% - 0.75rem);
    min-width: 280px;
  }
}

@media (min-width: 1240px) {
  .timeline-event {
    flex-direction: column;
    width: 8.4rem;
    max-width: none;
  }
}

.event-image-container {
  width: 4rem;
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
}

.event-image-container a {
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.event-image-container a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

@media (min-width: 1240px) {
  .event-image-container {
    width: 8rem;
  }
}

.event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: "VCR OSD Mono", monospace;
  font-size: 0.875rem;
  position: relative;
  min-width: 0;
  flex: 1;
}

.event-info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .event-info span {
    white-space: normal;
    line-height: 1.3;
  }
}

@media (min-width: 1240px) {
  .event-info {
    text-align: center;
    font-size: 1rem;
  }
  
  .event-info span {
    white-space: nowrap;
  }
}

.event-info-secondary {
  color: rgb(156, 163, 175);
}

.event-date {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.event-date:hover {
  color: white;
}

.timeline-time-icon {
  cursor: pointer;
  margin-left: 0.25rem;
  display: inline-flex;
  vertical-align: middle;
  color: rgb(156, 163, 175);
  position: relative;
}

.timeline-time-icon:hover {
  color: white;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 280px;
  background-color: #1e1e26;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  position: absolute;
  z-index: 100;
  bottom: 160%;
  left: 50%;
  margin-left: -140px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: "VCR OSD Mono", monospace;
  font-size: 1rem;
  white-space: normal;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1240px) {
  .tooltip .tooltip-text {
    width: 220px;
    margin-left: -110px;
    font-size: 0.875rem;
    bottom: 150%;
    padding: 0.7rem 0.9rem;
  }
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1e1e26 transparent transparent transparent;
}

.sections-row {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

@media (min-width: 1240px) {
  .sections-row {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.sponsors-section {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1240px) {
  .sponsors-section {
    flex-basis: 35%;
  }
}

.sponsors-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
}

@media (min-width: 1240px) {
  .sponsors-content {
    padding: 1rem;
  }
}

.sponsors-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .sponsors-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media (min-width: 1240px) {
  .sponsors-list {
    display: flex;
    flex-direction: column;
  }
}

.sponsor-item {
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sponsor-tier-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  z-index: 10;
  transition: transform 0.3s ease;
  transform: translate(30%, -30%);
}

.sponsor-item a:hover .sponsor-tier-indicator {
  transform: translate(30%, -30%) scale(1.05);
}

.sponsor-item:nth-child(1) .sponsor-tier-indicator,
.sponsor-item:nth-child(2) .sponsor-tier-indicator {
  background-image: url("static/images/platinum-medal.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sponsor-item:nth-child(3) .sponsor-tier-indicator {
  background-image: url("static/images/gold-medal.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sponsor-item:nth-child(4) .sponsor-tier-indicator {
  background-image: url("static/images/bronze-medal.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sponsor-item a {
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
  position: relative;
}

.sponsor-item a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.sponsor-logo {
  max-width: 100%;
  height: auto;
  transition: transform 0.2s ease;
}

.contact-info {
  text-align: center;
  font-size: 0.875rem;
  font-family: "VCR OSD Mono", monospace;
  color: rgb(156, 163, 175);
  margin-top: 1rem;
}

@media (min-width: 1240px) {
  .contact-info {
    font-size: 1rem;
  }
}

.team-section {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1240px) {
  .team-section {
    flex-basis: 65%;
  }
}

.team-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-grow: 1;
  padding: 0.5rem;
}

@media (min-width: 1240px) {
  .team-content {
    padding: 1rem;
  }
}

.team-title {
  font-family: "Kingdom", sans-serif;
  font-size: 2.25rem;
  text-align: center;
  margin-bottom: 1rem;
}

@media (min-width: 1240px) {
  .team-title {
    font-size: 3rem;
  }
}

.team-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 48rem;
}

@media (max-width: 375px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

@media (min-width: 1240px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-member a {
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.team-member a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.team-member:nth-child(1) a:hover img {
  transform: rotate(5deg);
}

.team-member:nth-child(2) a:hover img {
  transform: rotate(-7deg);
}

.team-member:nth-child(3) a:hover img {
  transform: rotate(8deg);
}

.team-member:nth-child(4) a:hover img {
  transform: rotate(-5deg);
}

.team-member:nth-child(5) a:hover img {
  transform: rotate(6deg);
}

.team-member:nth-child(6) a:hover img {
  transform: rotate(-8deg);
}

.team-member-image {
  width: 100%;
  height: auto;
  max-width: 10rem;
  object-fit: contain;
  transition: transform 0.3s ease;
}

@media (min-width: 640px) {
  .team-member-image {
    max-width: 12rem;
  }
}

@media (min-width: 1240px) {
  .team-member-image {
    max-width: 16rem;
  }
}

.team-member-name {
  font-size: 0.875rem;
  font-family: "VCR OSD Mono", monospace;
  margin-top: 0.25rem;
}

@media (min-width: 1240px) {
  .team-member-name {
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 0 3rem;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgb(156, 163, 175);
  font-family: "VCR OSD Mono", monospace;
}

@media (min-width: 1240px) {
  .footer {
    font-size: 1rem;
    padding-bottom: 4rem;
  }
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

@media (min-width: 1240px) {
  .social-links {
    gap: 1rem;
  }
}

.social-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.social-links a:hover .social-icon {
  transform: scale(1.15);
}

.social-links a:nth-child(1):hover .social-icon {
  transform: scale(1.15) rotate(8deg);
}

.social-links a:nth-child(2):hover .social-icon {
  transform: scale(1.15) rotate(-10deg);
}

.social-links a:nth-child(3):hover .social-icon {
  transform: scale(1.15) rotate(12deg);
}

.social-links a:nth-child(4):hover .social-icon {
  transform: scale(1.15) rotate(-7deg);
}

.social-links a:nth-child(5):hover .social-icon {
  transform: scale(1.15) rotate(15deg);
}

@media (min-width: 1240px) {
  .social-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.desktop-timer {
  display: none;
}

@media (min-width: 1240px) {
  .desktop-timer {
    display: block;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
  }
}

.mobile-timer {
  display: flex;
  margin: 1rem auto;
  width: 100%;
  max-width: 320px;
}

@media (min-width: 1240px) {
  .mobile-timer {
    display: none;
  }
}

.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.timer-subject {
  padding-bottom: 0.5rem;
  z-index: 1;
}

.timer-subject-text {
  font-family: "VCR OSD Mono", monospace;
  font-size: 1.25rem;
  z-index: 1;
}

.timer-digits {
  font-family: "Kingdom", monospace;
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  width: 100%;
  max-width: 350px;
  text-align: center;
  font-size: 2.5rem;
  line-height: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 1;
}

@media (min-width: 1240px) {
  .timer-digits {
    font-size: 4rem;
    padding: 0;
    padding-bottom: 0.5rem;
  }
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-value {
  font-variant-numeric: tabular-nums;
  width: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1240px) {
  .timer-value {
    width: 45px;
  }
}

.timer-label {
  font-family: "VCR OSD Mono", monospace;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

@media (min-width: 1240px) {
  .timer-label {
    font-size: 1rem;
  }
}

.timer-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -100px 80px -10px rgba(0, 0, 0, 0.7),
    inset 0 50px 40px -30px rgba(0, 0, 0, 0.3),
    inset 40px 0 40px -30px rgba(0, 0, 0, 0.3),
    inset -40px 0 40px -30px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 40;
}

@media (max-width: 1240px) {
  .vignette {
    box-shadow: inset 0 -60px 50px -10px rgba(0, 0, 0, 0.4),
      inset 0 30px 25px -20px rgba(0, 0, 0, 0.2),
      inset 25px 0 25px -20px rgba(0, 0, 0, 0.2),
      inset -25px 0 25px -20px rgba(0, 0, 0, 0.2);
  }
}

.border-frame {
  border-width: 80px;
  border-style: solid;
  border-image: url("static/images/day-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
  position: relative;
  transition: border-image 0.4s ease;
}

@media (min-width: 1240px) {
  .border-frame {
    border-width: 120px;
  }
}

.border-frame > * {
  position: relative;
  z-index: 1;
}

.border-frame > div,
.border-frame > section {
  margin: -60px;
  width: calc(100% + 120px);
}

@media (min-width: 1240px) {
  .border-frame > div,
  .border-frame > section {
    margin: -90px;
    width: calc(100% + 180px);
  }
}

.border-frame > p,
.border-frame > h2,
.border-frame > h3 {
  position: relative;
  z-index: 1;
}

.long-button {
  display: inline-block;
  width: 200px;
  height: 40px;
  font-family: "VCR OSD Mono", monospace;
  font-size: 0.8rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-image: url("static/images/day-bg-register-button.png");

  mask-image: url("static/images/mask-register-button.svg");
  -webkit-mask-image: url("static/images/mask-register-button.svg");

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-size: contain;
  -webkit-mask-size: contain;

  mask-position: center;
  -webkit-mask-position: center;
  
  transition: transform 0.3s ease, filter 0.3s ease, background-image 0.4s ease;
}

.long-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
  background-image: url("static/images/bg-register-button-hover.png") !important;
}

@media (min-width: 1240px) {
  .long-button {
    width: 250px;
    height: 48px;
    font-size: 1rem;
  }
}

body.theme-evening .long-button,
html[data-theme="evening"] .long-button {
  background-image: url("static/images/evening-bg-register-button.png");
}

body.theme-night .long-button,
html[data-theme="night"] .long-button {
  background-image: url("static/images/night-bg-register-button.png");
}

.short-button {
  display: inline-block;
  width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-image: url("static/images/bg-discord-button.png");

  mask-image: url("static/images/mask-discord-button.svg");
  -webkit-mask-image: url("static/images/mask-discord-button.svg");

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-size: contain;
  -webkit-mask-size: contain;

  mask-position: center;
  -webkit-mask-position: center;
  
  transition: transform 0.3s ease, filter 0.3s ease;
}

.short-button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

@media (min-width: 1240px) {
  .short-button {
    width: 70px;
    height: 48px;
  }
}

.discord-icon {
  width: 1.5rem;
}

@media (min-width: 1240px) {
  .discord-icon {
    width: 2rem;
  }
}

.team-section > h2,
.team-section > .team-grid {
  width: 100%;
}

.site-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-aspect-ratio: 21/9) {
  .site-wrapper {
    width: calc(100vh * (21 / 9));
    max-width: 100%;
  }
}

.mobile-nav {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

@media (min-width: 1240px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 1240px) {
  .mobile-nav-buttons {
    flex-direction: row;
  }
}

@media (max-width: 1240px) {
  .long-button,
  .short-button {
    width: 200px;
    height: 40px;
  }

  .short-button {
    mask-image: url("static/images/mask-register-button.svg");
    -webkit-mask-image: url("static/images/mask-register-button.svg");
  }
}

.discord-text {
  display: none;
  font-family: "VCR OSD Mono", monospace;
}

@media (max-width: 1240px) {
  .short-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .discord-text {
    display: inline-block;
  }
}

.theme-selector {
  display: none;
  position: fixed;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.35rem;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  /* border-radius: 9999px; */
}

@media (min-width: 1240px) {
  .theme-selector {
    display: flex;
  }
}

.mobile-theme-selector {
  display: flex;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  /* border-radius: 9999px; */
  flex-direction: row;
  gap: 0.3rem;
  padding: 0.35rem;
  width: fit-content;
}

@media (min-width: 1240px) {
  .mobile-theme-selector {
    display: none;
  }
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 9999px; */
  color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
  transition: all 0.2s ease;
}



.theme-btn:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
}

.icon-wrapper {
  display: inline-flex;
  transition: transform 0.3s ease;
}

.theme-btn:hover .icon-wrapper {
  transform: scale(1.15);
}

.theme-selector .theme-btn:nth-child(1):hover .icon-wrapper,
.mobile-theme-selector .theme-btn:nth-child(1):hover .icon-wrapper {
  transform: scale(1.15) rotate(8deg);
}

.theme-selector .theme-btn:nth-child(2):hover .icon-wrapper,
.mobile-theme-selector .theme-btn:nth-child(2):hover .icon-wrapper {
  transform: scale(1.15) rotate(-12deg);
}

.theme-selector .theme-btn:nth-child(3):hover .icon-wrapper,
.mobile-theme-selector .theme-btn:nth-child(3):hover .icon-wrapper {
  transform: scale(1.15) rotate(15deg);
}

.theme-btn {
  position: relative;
  z-index: 1;
}

.theme-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("static/images/bg-theme-button.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.theme-btn.active {
  color: white;
}

.theme-btn.active::before {
  opacity: 1;
}

@media (max-width: 1240px) {
  .theme-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (min-width: 1240px) {
  .theme-btn {
    width: 2rem;
    height: 2rem;
  }
}

body {
  transition: background-color 0.4s ease;
}

.main-content {
  transition: background-image 0.4s ease;
}

.border-frame {
  transition: border-image 0.4s ease;
}

.hero-evening,
.hero-night,
.hero-day {
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

body.theme-day .hero-day {
  opacity: 1;
  position: relative;
}

body.theme-evening .hero-evening {
  opacity: 1;
  position: relative;
}

body.theme-night .hero-night {
  opacity: 1;
  position: relative;
}

body.theme-day .main-content {
  background-image: url("static/images/day-background.png");
}

body.theme-evening .main-content {
  background-image: url("static/images/evening-background.png");
}

body.theme-night .main-content {
  background-image: url("static/images/night-background.png");
}

body.theme-day .border-frame {
  border-image: url("static/images/day-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

body.theme-evening .border-frame {
  border-image: url("static/images/evening-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

body.theme-night .border-frame {
  border-image: url("static/images/night-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

html[data-theme="day"] body.theme-day .hero-day,
html[data-theme="evening"] body.theme-evening .hero-evening,
html[data-theme="night"] body.theme-night .hero-night {
  opacity: 1;
  position: relative;
}

html[data-theme="day"] .main-content {
  background-image: url("static/images/day-background.png");
}

html[data-theme="evening"] .main-content {
  background-image: url("static/images/evening-background.png");
}

html[data-theme="night"] .main-content {
  background-image: url("static/images/night-background.png");
}

html[data-theme="day"] .border-frame {
  border-image: url("static/images/day-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

html[data-theme="evening"] .border-frame {
  border-image: url("static/images/evening-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

html[data-theme="night"] .border-frame {
  border-image: url("static/images/night-border.png");
  border-image-slice: 140 fill;
  border-image-repeat: round;
}

.site-wrapper {
  transition: opacity 0.3s ease;
}

.theme-selector-mobile-container {
  position: relative;
  z-index: 1;
  order: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

@media (max-width: 1240px) {
  .main-content {
    display: flex;
    flex-direction: column;
  }

  .mobile-timer {
    order: 2;
  }

  .content-container {
    order: 3;
  }
}

.logo-ottersec-day, .logo-ottersec-evening, .logo-ottersec-night,
.logo-zellic-day, .logo-zellic-evening, .logo-zellic-night,
.logo-hrt-day, .logo-hrt-evening, .logo-hrt-night,
.logo-seasus-day, .logo-seasus-evening, .logo-seasus-night {
  transition: opacity 0.4s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.logo-ottersec-day, .logo-zellic-day, .logo-hrt-day, .logo-seasus-day {
  position: relative;
  opacity: 1;
  z-index: 1;
}

body.theme-day .logo-ottersec-day, html[data-theme="day"] .logo-ottersec-day,
body.theme-day .logo-zellic-day, html[data-theme="day"] .logo-zellic-day,
body.theme-day .logo-hrt-day, html[data-theme="day"] .logo-hrt-day,
body.theme-day .logo-seasus-day, html[data-theme="day"] .logo-seasus-day {
  opacity: 1; z-index: 1;
}
body.theme-day .logo-ottersec-evening, body.theme-day .logo-ottersec-night,
html[data-theme="day"] .logo-ottersec-evening, html[data-theme="day"] .logo-ottersec-night,
body.theme-day .logo-zellic-evening, body.theme-day .logo-zellic-night,
html[data-theme="day"] .logo-zellic-evening, html[data-theme="day"] .logo-zellic-night,
body.theme-day .logo-hrt-evening, body.theme-day .logo-hrt-night,
html[data-theme="day"] .logo-hrt-evening, html[data-theme="day"] .logo-hrt-night,
body.theme-day .logo-seasus-evening, body.theme-day .logo-seasus-night,
html[data-theme="day"] .logo-seasus-evening, html[data-theme="day"] .logo-seasus-night {
  opacity: 0; z-index: 0;
}

body.theme-evening .logo-ottersec-evening, html[data-theme="evening"] .logo-ottersec-evening,
body.theme-evening .logo-zellic-evening, html[data-theme="evening"] .logo-zellic-evening,
body.theme-evening .logo-hrt-evening, html[data-theme="evening"] .logo-hrt-evening,
body.theme-evening .logo-seasus-evening, html[data-theme="evening"] .logo-seasus-evening {
  opacity: 1; z-index: 1;
}
body.theme-evening .logo-ottersec-day, body.theme-evening .logo-ottersec-night,
html[data-theme="evening"] .logo-ottersec-day, html[data-theme="evening"] .logo-ottersec-night,
body.theme-evening .logo-zellic-day, body.theme-evening .logo-zellic-night,
html[data-theme="evening"] .logo-zellic-day, html[data-theme="evening"] .logo-zellic-night,
body.theme-evening .logo-hrt-day, body.theme-evening .logo-hrt-night,
html[data-theme="evening"] .logo-hrt-day, html[data-theme="evening"] .logo-hrt-night,
body.theme-evening .logo-seasus-day, body.theme-evening .logo-seasus-night,
html[data-theme="evening"] .logo-seasus-day, html[data-theme="evening"] .logo-seasus-night {
  opacity: 0; z-index: 0;
}

body.theme-night .logo-ottersec-night, html[data-theme="night"] .logo-ottersec-night,
body.theme-night .logo-zellic-night, html[data-theme="night"] .logo-zellic-night,
body.theme-night .logo-hrt-night, html[data-theme="night"] .logo-hrt-night,
body.theme-night .logo-seasus-night, html[data-theme="night"] .logo-seasus-night {
  opacity: 1; z-index: 1;
}
body.theme-night .logo-ottersec-day, body.theme-night .logo-ottersec-evening,
html[data-theme="night"] .logo-ottersec-day, html[data-theme="night"] .logo-ottersec-evening,
body.theme-night .logo-zellic-day, body.theme-night .logo-zellic-evening,
html[data-theme="night"] .logo-zellic-day, html[data-theme="night"] .logo-zellic-evening,
body.theme-night .logo-hrt-day, body.theme-night .logo-hrt-evening,
html[data-theme="night"] .logo-hrt-day, html[data-theme="night"] .logo-hrt-evening,
body.theme-night .logo-seasus-day, body.theme-night .logo-seasus-evening,
html[data-theme="night"] .logo-seasus-day, html[data-theme="night"] .logo-seasus-evening {
  opacity: 0; z-index: 0;
}

.event-image-smileyctf-day, .event-image-smileyctf-evening, .event-image-smileyctf-night,
.event-image-deadsecctf-day, .event-image-deadsecctf-evening, .event-image-deadsecctf-night,
.event-image-idekctf-day, .event-image-idekctf-evening, .event-image-idekctf-night,
.event-image-sekaictf-day, .event-image-sekaictf-evening, .event-image-sekaictf-night {
  transition: opacity 0.4s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.event-image-smileyctf-day, .event-image-idekctf-day, .event-image-sekaictf-day, .event-image-deadsecctf-day {
  position: relative;
  opacity: 1;
  z-index: 1;
}

body.theme-day .event-image-smileyctf-day, html[data-theme="day"] .event-image-smileyctf-day,
body.theme-day .event-image-idekctf-day, html[data-theme="day"] .event-image-idekctf-day,
body.theme-day .event-image-sekaictf-day, html[data-theme="day"] .event-image-sekaictf-day,
body.theme-day .event-image-deadsecctf-day, html[data-theme="day"] .event-image-deadsecctf-day {
  opacity: 1; z-index: 1;
}
body.theme-day .event-image-smileyctf-evening, body.theme-day .event-image-smileyctf-night,
html[data-theme="day"] .event-image-smileyctf-evening, html[data-theme="day"] .event-image-smileyctf-night,
body.theme-day .event-image-idekctf-evening, body.theme-day .event-image-idekctf-night,
html[data-theme="day"] .event-image-idekctf-evening, html[data-theme="day"] .event-image-idekctf-night,
body.theme-day .event-image-sekaictf-evening, body.theme-day .event-image-sekaictf-night,
html[data-theme="day"] .event-image-sekaictf-evening, html[data-theme="day"] .event-image-sekaictf-night,
body.theme-day .event-image-deadsecctf-evening, body.theme-day .event-image-deadsecctf-night,
html[data-theme="day"] .event-image-deadsecctf-evening, html[data-theme="day"] .event-image-deadsecctf-night {
  opacity: 0; z-index: 0;
}

body.theme-evening .event-image-smileyctf-evening, html[data-theme="evening"] .event-image-smileyctf-evening,
body.theme-evening .event-image-idekctf-evening, html[data-theme="evening"] .event-image-idekctf-evening,
body.theme-evening .event-image-sekaictf-evening, html[data-theme="evening"] .event-image-sekaictf-evening,
body.theme-evening .event-image-deadsecctf-evening, html[data-theme="evening"] .event-image-deadsecctf-evening {
  opacity: 1; z-index: 1;
}
body.theme-evening .event-image-smileyctf-day, body.theme-evening .event-image-smileyctf-night,
html[data-theme="evening"] .event-image-smileyctf-day, html[data-theme="evening"] .event-image-smileyctf-night,
body.theme-evening .event-image-idekctf-day, body.theme-evening .event-image-idekctf-night,
html[data-theme="evening"] .event-image-idekctf-day, html[data-theme="evening"] .event-image-idekctf-night,
body.theme-evening .event-image-sekaictf-day, body.theme-evening .event-image-sekaictf-night,
html[data-theme="evening"] .event-image-sekaictf-day, html[data-theme="evening"] .event-image-sekaictf-night,
body.theme-evening .event-image-deadsecctf-day, body.theme-evening .event-image-deadsecctf-night,
html[data-theme="evening"] .event-image-deadsecctf-day, html[data-theme="evening"] .event-image-deadsecctf-night {
  opacity: 0; z-index: 0;
}

body.theme-night .event-image-smileyctf-night, html[data-theme="night"] .event-image-smileyctf-night,
body.theme-night .event-image-idekctf-night, html[data-theme="night"] .event-image-idekctf-night,
body.theme-night .event-image-sekaictf-night, html[data-theme="night"] .event-image-sekaictf-night,
body.theme-night .event-image-deadsecctf-night, html[data-theme="night"] .event-image-deadsecctf-night {
  opacity: 1; z-index: 1;
}
body.theme-night .event-image-smileyctf-day, body.theme-night .event-image-smileyctf-evening,
html[data-theme="night"] .event-image-smileyctf-day, html[data-theme="night"] .event-image-smileyctf-evening,
body.theme-night .event-image-idekctf-day, body.theme-night .event-image-idekctf-evening,
html[data-theme="night"] .event-image-idekctf-day, html[data-theme="night"] .event-image-idekctf-evening,
body.theme-night .event-image-sekaictf-day, body.theme-night .event-image-sekaictf-evening,
html[data-theme="night"] .event-image-sekaictf-day, html[data-theme="night"] .event-image-sekaictf-evening,
body.theme-night .event-image-deadsecctf-day, body.theme-night .event-image-deadsecctf-evening,
html[data-theme="night"] .event-image-deadsecctf-day, html[data-theme="night"] .event-image-deadsecctf-evening {
  opacity: 0; z-index: 0;
}

.desktop-timeline-backgrounds {
  display: none;
  position: relative;
  width: calc(1070px);
  height: calc(85px);
  overflow: hidden;
}

.timeline-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (min-width: 1240px) {
  .desktop-timeline-backgrounds {
    display: block;
  }
}

body.theme-day .timeline-bg-day,
html[data-theme="day"] .timeline-bg-day {
  opacity: 1;
}

body.theme-evening .timeline-bg-evening,
html[data-theme="evening"] .timeline-bg-evening {
  opacity: 1;
}

body.theme-night .timeline-bg-night,
html[data-theme="night"] .timeline-bg-night {
  opacity: 1;
}

body.theme-day .timeline-bg-evening, body.theme-day .timeline-bg-night,
html[data-theme="day"] .timeline-bg-evening, html[data-theme="day"] .timeline-bg-night {
  opacity: 0;
}

body.theme-evening .timeline-bg-day, body.theme-evening .timeline-bg-night,
html[data-theme="evening"] .timeline-bg-day, html[data-theme="evening"] .timeline-bg-night {
  opacity: 0;
}

body.theme-night .timeline-bg-day, body.theme-night .timeline-bg-evening,
html[data-theme="night"] .timeline-bg-day, html[data-theme="night"] .timeline-bg-evening {
  opacity: 0;
}

a.disabled-link {
  cursor: not-allowed !important;
}
.hero-background {
  overflow: hidden;
}

.hero-img-bg {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.hero-img-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}

.hero-image-layer {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.hero-img-fg .hero-image-layer {
  position: relative;
  top: -20px;
  height: calc(100% + 20px);
}

@media (max-width: 1240px) {
  .hero-image-layer {
    width: 100%;
    height: 100%;
    min-height: 75vh;
    object-fit: cover;
  }
}

.logo-container {
  display: none;
}

@media (min-width: 1240px) {
  .logo-container {
    display: block;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 50;
  }
}

.mobile-logo-container {
  display: block;
  position: absolute;
  top: 2.25rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 50;
}

@media (min-width: 1240px) {
  .mobile-logo-container {
    display: none;
  }
}

.logo {
  width: 12rem;
}

.mobile-logo-container .logo {
  width: 16rem;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
  padding: 0 1.25rem;
}

.mobile-logo-dark,
.mobile-logo-light {
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
}

body.theme-day .mobile-logo-dark {
  opacity: 1;
}

body.theme-evening .mobile-logo-light,
body.theme-night .mobile-logo-light {
  opacity: 1;
}

@media (min-width: 1240px) {
  .logo {
    width: 16rem;
  }
}


.intro-cross {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  margin-top: -15px;
}

@media (min-width: 768px) {
  .intro-cross {
    width: 70px;
    height: 70px;
    margin-bottom: 1.25rem;
    margin-top: -20px;
  }
}

@media (min-width: 1240px) {
  .intro-cross {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    margin-top: -25px;
  }
}

.timeline-description {
  font-family: "VCR OSD Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: 40rem;
  margin: 0.5rem auto 1.5rem;
  text-align: center;
  color: rgb(156, 163, 175);
}

@media (min-width: 768px) {
  .timeline-description {
    font-size: 0.95rem;
    margin: 0.6rem auto 1.75rem;
  }
}

@media (min-width: 1240px) {
  .timeline-description {
    font-size: 1rem;
    max-width: 45rem;
    margin: 0.7rem auto 2rem;
  }
}