* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            #062d17 0%,
            #011209 45%,
            #000704 75%,
            #000000 100%
        );

    color: #7cff9b;

    font-family:
        "Courier New",
        Consolas,
        monospace;
}


/* =========================
   MATRIX BACKGROUND
   ========================= */

body::before {
    content:
        "0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0";

    position: fixed;

    inset: -100% 0 0 0;

    width: 100%;
    height: 300%;

    color: rgba(0, 255, 85, 0.12);

    font-size: 20px;
    line-height: 28px;

    letter-spacing: 14px;
    word-spacing: 24px;

    overflow: hidden;

    animation:
        matrixRain 16s linear infinite;

    pointer-events: none;
}


/* SCANLINES */

body::after {
    content: "";

    position: fixed;

    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            rgba(0, 255, 80, 0.025) 4px
        );

    pointer-events: none;
}


/* =========================
   TERMINAL
   ========================= */

.terminal {
    position: relative;

    z-index: 2;

    width: min(760px, 100%);

    max-height:
        calc(100svh - 40px);

    padding:
        clamp(
            20px,
            4vw,
            42px
        );

    overflow: hidden;

    text-align: center;

    background:
        rgba(
            0,
            20,
            10,
            0.58
        );

    border:
        1px solid
        rgba(
            80,
            255,
            130,
            0.28
        );

    border-radius:
        24px;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 0 1px #00ff66,
        0 0 30px rgba(0, 255, 80, 0.12),
        inset 0 0 40px rgba(0, 255, 80, 0.025);
}


/* GLASS LIGHT */

.terminal::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(130, 255, 170, 0.045),
            transparent 65%
        );

    animation:
        glassMove 5s
        ease-in-out
        infinite alternate;

    pointer-events: none;
}


/* =========================
   TOP BAR
   ========================= */

.top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom:
        clamp(
            20px,
            4vh,
            32px
        );

    color:
        rgba(
            130,
            255,
            165,
            0.55
        );

    font-size:
        clamp(
            10px,
            2vw,
            13px
        );

    letter-spacing:
        0.12em;
}


.status {
    display: flex;

    align-items: center;

    gap: 7px;
}


.dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #00ff66;

    box-shadow:
        0 0 5px #00ff66,
        0 0 12px #00ff66;

    animation:
        pulse 1.2s
        ease-in-out
        infinite;
}


/* =========================
   67
   ========================= */

.sixty-seven {
    position: relative;

    display: inline-block;

    margin-bottom: 8px;

    font-size:
        clamp(
            82px,
            22vw,
            190px
        );

    font-weight: 900;

    line-height: 0.78;

    letter-spacing:
        -0.11em;

    color:
        #8dffa8;

    text-shadow:
        0 0 4px #00ff55,
        0 0 12px rgba(0, 255, 70, 0.8),
        0 0 35px rgba(0, 255, 70, 0.5);

    animation:
        glow 2s
        ease-in-out
        infinite alternate,
        glitch 7s
        steps(1)
        infinite;
}


.six {
    display: inline-block;

    animation:
        six 2.1s
        ease-in-out
        infinite;
}


.seven {
    display: inline-block;

    animation:
        seven 2.1s
        ease-in-out
        infinite;
}


/* =========================
   DEVELOPMENT
   ========================= */

.development {
    margin-top: 12px;

    font-size:
        clamp(
            12px,
            2.5vw,
            18px
        );

    color:
        rgba(
            145,
            255,
            175,
            0.75
        );

    letter-spacing:
        clamp(
            0.12em,
            1vw,
            0.32em
        );

    text-transform:
        uppercase;
}


/* =========================
   DIVIDER
   ========================= */

.divider {
    width:
        min(
            450px,
            80%
        );

    height: 1px;

    margin:
        clamp(
            17px,
            3vh,
            27px
        )
        auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00ff66,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(
            0,
            255,
            70,
            0.6
        );
}


/* =========================
   MAIN MESSAGE
   ========================= */

.message {
    font-size:
        clamp(
            27px,
            6vw,
            58px
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.04em;

    color:
        #b2ffc4;

    text-transform:
        uppercase;

    text-shadow:
        0 0 4px rgba(0, 255, 80, 0.8),
        0 0 16px rgba(0, 255, 80, 0.35);

    animation:
        messageFlicker
        6s
        infinite;
}


.rkn {
    display: block;

    margin-bottom:
        8px;

    font-size:
        0.55em;

    letter-spacing:
        0.18em;

    color:
        rgba(
            126,
            255,
            158,
            0.72
        );
}


.fuck {
    display: block;

    color:
        #46ff70;

    text-shadow:
        2px 0 0 rgba(0, 255, 80, 0.4),
        -2px 0 0 rgba(120, 255, 150, 0.2),
        0 0 10px #00ff55,
        0 0 30px rgba(0, 255, 70, 0.55);

    animation:
        fuckGlow
        1.6s
        ease-in-out
        infinite alternate;
}


/* =========================
   FOOTER
   ========================= */

.footer {
    margin-top:
        clamp(
            20px,
            4vh,
            32px
        );

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        8px 18px;

    color:
        rgba(
            126,
            255,
            158,
            0.42
        );

    font-size:
        clamp(
            9px,
            1.8vw,
            12px
        );

    letter-spacing:
        0.08em;
}


.footer span::before {
    content: "> ";

    color:
        #00ff66;
}


/* CURSOR */

.cursor {
    display: inline-block;

    width: 8px;
    height: 1em;

    margin-left: 4px;

    vertical-align: middle;

    background:
        #00ff66;

    box-shadow:
        0 0 6px #00ff66;

    animation:
        cursorBlink
        0.8s
        steps(1)
        infinite;
}


/* =========================
   ANIMATIONS
   ========================= */

@keyframes matrixRain {

    from {
        transform:
            translateY(-25%);
    }

    to {
        transform:
            translateY(25%);
    }
}


@keyframes glassMove {

    from {
        transform:
            translateX(-15%);
    }

    to {
        transform:
            translateX(15%);
    }
}


@keyframes pulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


@keyframes glow {

    from {
        filter:
            brightness(0.85);
    }

    to {
        filter:
            brightness(1.25);
    }
}


@keyframes six {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-3px)
            rotate(-1deg);
    }
}


@keyframes seven {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(3px)
            rotate(1deg);
    }
}


@keyframes glitch {

    0%,
    91%,
    100% {
        transform:
            translate(0);
    }

    92% {
        transform:
            translate(-4px, 2px);
    }

    93% {
        transform:
            translate(4px, -1px);
    }

    94% {
        transform:
            translate(-2px, 1px);
    }

    95% {
        transform:
            translate(0);
    }
}


@keyframes messageFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.75;
    }
}


@keyframes fuckGlow {

    from {
        filter:
            brightness(0.9);
    }

    to {
        filter:
            brightness(1.35);
    }
}


@keyframes cursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    body {
        padding: 12px;
    }

    .terminal {
        max-height:
            calc(100svh - 24px);

        padding:
            22px 16px;

        border-radius:
            18px;
    }

    .top {
        margin-bottom:
            22px;
    }

    .sixty-seven {
        font-size:
            clamp(
                95px,
                36vw,
                150px
            );
    }

    .development {
        font-size:
            11px;

        letter-spacing:
            0.12em;
    }

    .message {
        font-size:
            clamp(
                30px,
                10vw,
                46px
            );
    }

    .footer {
        margin-top:
            24px;

        flex-direction:
            column;

        gap:
            6px;
    }

}


/* VERY SMALL PHONES */

@media (max-height: 650px) {

    .terminal {
        padding-top:
            15px;

        padding-bottom:
            15px;
    }

    .top {
        margin-bottom:
            12px;
    }

    .sixty-seven {
        font-size:
            clamp(
                70px,
                20vh,
                125px
            );
    }

    .divider {
        margin:
            12px auto;
    }

    .footer {
        margin-top:
            15px;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;
    }

}