* {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: #0a0a0a;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 60px 20px 20px;
        }
        #easteregg img {
            width: 100%;
            max-width: 700px;
            height: auto;
            filter: brightness(0) invert(1);
            margin: 0 auto;
        }

        #old-logo {
    display: none;
}

#archive-text {
    display: none;
    margin-top: 30px;
    color: #888;
    font-size: .75rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    line-height: 2;
}

.archive-active #main-logo {
    display: none;
}

.archive-active #old-logo {
    display: block;
    animation: glitch .5s steps(2, end);
}

.archive-active #archive-text {
    display: block;
    animation: fadeIn .5s ease;
}


@keyframes glitch {

    0% {
        transform: translate(0);
        filter: brightness(0) invert(1);
    }

    20% {
        transform: translate(-8px, 2px);
    }

    40% {
        transform: translate(8px, -2px);
    }

    60% {
        transform: translate(-4px, 0);
    }

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

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


@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

        .wrapper {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        .logo {
            width: 100%;
            padding: 0 20px;
        }

        .logo img {
            width: 100%;
            max-width: 700px;
            height: auto;
            display: block;
            margin: 0 auto;
            filter: brightness(0) invert(1);
        }

        .tagline {
            color: #888;
            letter-spacing: .3em;
            text-transform: uppercase;
            font-size: .75rem;
        }

        .ig-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            border: 1px solid #333;
            padding: 12px 28px;
            border-radius: 50px;
            transition: .3s;
            font-size: .85rem;
            letter-spacing: .1em;
        }

        .ig-btn:hover {
            background: white;
            color: black;
        }

        .line {
            width: 40px;
            height: 1px;
            background: #444;
            margin: 35px auto;
        }


        @media (max-width: 768px) {

            body {
                padding: 60px 10px 20px;
            }

            .logo {
                padding: 0;
            }

            .logo img {
                width: 100%;
                max-width: 100%;
            }

            .line {
                margin: 25px auto;
            }

            .tagline {
                font-size: .65rem;
                letter-spacing: .25em;
            }

            .ig-btn {
                padding: 10px 22px;
                font-size: .75rem;
            }
        }


        @media (max-width: 400px) {

            .tagline {
                font-size: .6rem;
            }

            .ig-btn {
                padding: 10px 18px;
            }

        }
        .marquee {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            border-bottom: 1px solid #222;
            background: #0a0a0a;
            z-index: 10;
            padding: 12px 0;
        }

        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee 25s linear infinite;
        }

        .marquee-track span {
            flex-shrink: 0;
            color: #666;
            font-size: 1.9rem;
            letter-spacing: .4em;
            text-transform: uppercase;
            padding-right: 0;
        }

        @keyframes marquee {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }

        .access-box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.access-box input {
    background: transparent;
    border: 1px solid #333;
    color: white;
    padding: 12px 16px;
    width: 220px;
    font-size: .75rem;
    letter-spacing: .2em;
    text-align: center;
    outline: none;
}

.access-box input::placeholder {
    color: #555;
}

.access-box button {
    background: transparent;
    border: 1px solid #333;
    color: white;
    padding: 12px 18px;
    cursor: pointer;
    font-size: .75rem;
    letter-spacing: .15em;
}

.access-box button:hover {
    background: white;
    color: black;
}

.buttons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}