@font-face {
    font-family: "PixL";
    src: url("../fonts/PixL.otf");
}

:root {
    --title-glow: rgba(1, 197, 255, 1) 0 0 20px;
    --timer-glow: rgba(180, 176, 255, 1) 0 0 15px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Pixelify Sans", sans-serif;
    color: white;
    overflow-x: hidden;
    position: relative;
}

body {
    background-color: black;
}

#container {
    width: 100%;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

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

header h1 {
    font-size: 7.5rem;
    font-weight: 500;
    color: rgba(1, 197, 255, 1);
    margin: 0;
    animation: 5s infinite linear title-flicker;
}

header p {
    color: rgba(180, 176, 255, 1);
    margin: 0;
    font-size: 3rem;
}

header img {
    height: 14rem;
}

.header__timer {
    position: relative;
    display: flex;
    justify-content: center;
}

.header__timer__blur {
    position: absolute;
    align-self: center;
    width: 175%;
    box-shadow: rgba(108, 101, 246, 0.73) 0 0 80px 12px;
}

.header__timer__text {
    font-size: 5.5rem;
    font-weight: 500;
    animation: 10s infinite linear timer-flicker;
    font-family: "PixL", sans-serif;
}

.header__queue {
    font-size: 3.5rem;
}

.header__title {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: -1rem;
    width: 100%;
}

.header__title__blur {
    position: absolute;
    align-self: center;
    width: 100%;
    box-shadow: rgba(1, 197, 255, 0.73) 0 0 80px 12px;
}
.header__logoContainer {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2;
    grid-template-rows: 1;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
    animation: title-flicker-soft 15s infinite;
}
.header__logoContainer > img {
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.header__logoContainer > img:nth-child(1) {
    animation: floating-left infinite 7s alternate-reverse cubic-bezier(.29,.02,.73,.98);
    filter: drop-shadow(0 0 20px rgba(1, 197, 255, 0.4));
}
.header__logoContainer > img:nth-child(2) {
    height: 3rem;
    aspect-ratio: 1;
    animation-delay: -2s;
    animation: floating-right infinite 8s alternate-reverse cubic-bezier(.29,.02,.73,.98);
    filter: drop-shadow(0 0 40px rgba(255, 1, 1, 0.8));
}
.header__logoContainer > img:nth-child(3) {
    animation-delay: -1s;
    animation: floating-right infinite 8s alternate-reverse cubic-bezier(.29,.02,.73,.98);
    filter: drop-shadow(0 0 20px rgba(0, 15, 97, 0.4));
}
@keyframes floating-left {
    0% {transform: scale(1)}
    50% {transform: scale(.98)}
    100% {transform: scale(1)}
}
@keyframes floating-right {
    0% {transform: scale(1)}
    50% {transform: scale(1.02)}
    100% {transform: scale(1)}
}

@keyframes title-flicker-soft {
    0%, 19%, 21%, 29%, 31%, 82%, 84%, 100% {
      filter: drop-shadow(0 0 80px rgba(1, 197, 255, 0.6));
      opacity: 1;
    }
  
    20%, 30%, 83% {
      filter: 
        drop-shadow(0 0 80px rgba(1, 197, 255, 0.6))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
      opacity: 0.9;
    }
  }


@keyframes title-flicker {
    0% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    19% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    20% {
        text-shadow:
            var(--title-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.8;
    }
    21% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    29% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    30% {
        text-shadow:
            var(--title-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.6;
    }
    31% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    82% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    83% {
        text-shadow:
            var(--title-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.7;
    }
    84% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
    100% {
        text-shadow: var(--title-glow);
        opacity: 1;
    }
}

@keyframes timer-flicker {
    0% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    19% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    20% {
        text-shadow:
            var(--timer-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.8;
    }
    21% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    29% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    30% {
        text-shadow:
            var(--timer-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.6;
    }
    31% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    82% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    83% {
        text-shadow:
            var(--timer-glow),
            rgba(255, 255, 255, 0.3) 0 0 15px;
        opacity: 0.7;
    }
    84% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
    100% {
        text-shadow: var(--timer-glow);
        opacity: 1;
    }
}

#countdown_timer {
    white-space: nowrap;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: radial-gradient(
        ellipse 50% 35% at 50% 50%,
        #4a186b,
        transparent
    );
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #a565ff,
        -0.2rem 0.1rem 1rem #a565ff, 0.2rem 0.1rem 1rem #a565ff,
        0 -0.5rem 2rem #8228ff, 0 0.5rem 3rem #8228ff;
    animation: shine 2s forwards, flicker 3s infinite;
}
#countdown_timer span {
    font-size: 4vw;
    font-family: 'pixl', sans-serif;
    letter-spacing: 1vw;
    z-index: 1;
    padding: 0;
    margin: 0;
    display: inline-block
}
@keyframes blink {
    0%,
    22%,
    36%,
    75% {
        color: #ffe6ff;
        text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #a565ff,
        -0.2rem 0.1rem 1rem #a565ff, 0.2rem 0.1rem 1rem #a565ff,
        0 -0.5rem 2rem #8228ff, 0 0.5rem 3rem #8228ff;
    }
    28%,
    33% {
        color: #a565ff;
        text-shadow: none;
    }
    82%,
    97% {
        color: #8228ff;
        text-shadow: none;
    }
}
.flicker {
    animation: shine 2s forwards, blink 3s 2s infinite;
}
.fast-flicker {
    animation: shine 2s forwards, blink 10s 1s infinite;
}
@keyframes shine {
    0% {
        color: #4a186b;
        text-shadow: none;
    }
    100% {
        color: #ffe6ff;
        text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #a565ff,
        -0.2rem 0.1rem 1rem #a565ff, 0.2rem 0.1rem 1rem #a565ff,
        0 -0.5rem 2rem #8228ff, 0 0.5rem 3rem #8228ff;
    }
}
@keyframes flicker {
    from {opacity: 1;}
    4% {opacity: 0.9;}
    6% {opacity: 0.85;}
    8% {opacity: 0.95;}
    10% {opacity: 0.9;}
    11% {opacity: 0.922;}
    12% {opacity: 0.9;}
    14% {opacity: 0.95;}
    16% {opacity: 0.98;}
    17% {opacity: 0.9;}
    19% {opacity: 0.93;}
    20% {opacity: 0.99;}
    24% {opacity: 1;}
    26% {opacity: 0.94;}
    28% {opacity: 0.98;}
    37% {opacity: 0.93;}
    38% {opacity: 0.5;}
    39% {opacity: 0.96;}
    42% {opacity: 1;}
    44% {opacity: 0.97;}
    46% {opacity: 0.94;}
    56% {opacity: 0.9;}
    58% {opacity: 0.9;}
    60% {opacity: 0.99;}
    68% {opacity: 1;}
    70% {opacity: 0.9;}
    72% {opacity: 0.95;}
    93% {opacity: 0.93;}
    95% {opacity: 0.95;}
    97% {opacity: 0.93;}
    to {opacity: 1;}
}

@media only screen and (max-width: 900px) {
    #countdown_timer span {
        font-size: 10vw;
    }
    header img {
        height: 12rem;
    }

    .header__logoContainer {
        gap: 1rem;
    }

    .header__logoContainer > img:nth-child(2) {
        height: 3rem;
    }

    .header__centerText {
        gap: 2rem;
    }

    .header__title {
        margin: 0;
    }

    header h1 {
        font-size: 6rem;
    }

    .header__timer__text {
        font-size: 5rem;
    }

    .header__queue {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 660px) {
    .header__centerText {
        gap: 2rem;
    }

    .header__title {
        margin: 0;
    }

    header h1 {
        font-size: 5rem;
        line-height: 4rem;
    }

    .header__timer__text {
        font-size: 4rem;
    }

    .header__queue {
        font-size: 2.5rem;
    }
}

.info {
    width: 100%;
    height: fit-content;
    padding: 2rem 12rem;
    font-size: 1.8rem;
}

.info h2 {
    color: #97E7FF;
    font-weight: 500;
    font-size: 2.2rem;
    text-transform: uppercase;
}

.info > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
}

.info ul {
    padding-left: 2rem;
    width: 100%;
}

.info__heading-line {
    width: 100%;
    height: 1px;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}


@media only screen and (max-width: 900px) {
    .info {
        padding: 2rem 5rem;
    }
}


@media only screen and (max-width: 500px) {
    .info {
        padding: 2rem 3rem;
        font-size: 1.5rem;
    }

    .info h2 {
        font-size: 2rem;
    }
}

.background {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
}