html,
body {
    margin: 0;
    padding: 0;
    background: black;
    color: white;
    font-family: sans-serif;
    font-weight: 50;
}

#shader-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
}



.page {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: fixed;
    overflow: hidden;

}

.wrapper {
    font-size: 4rem;
    overflow: hidden;
    background-color: black;
    position: absolute;
    font-style: italic;
}

.marquee-text,
p {
    margin: 0;
}

.marquee-text {
    overflow: hidden;
    color: white;
}

.marquee-text-track,
.marquee-text-track-bottom {
    display: flex;
    gap: 4.5rem;
    padding-left: 4rem;
    width: max-content;
    animation: marquee-move-text 15s linear infinite;
}

.marquee-text-track-bottom {
    animation-direction: reverse;
}

@keyframes marquee-move-text {
    to {
        transform: translateX(-50%)
    }
}

.body-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding-top: 4.52rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.titles-left,
.titles-right {
    display: flex;
    flex-direction: column;
    font-size: 7rem;
    font-weight: bold;
    line-height: 0.8;
    overflow: hidden;
    opacity: 0.09;
    height: 100vh;
    width: 100%;
    max-width: 60vh;
    -webkit-user-select: none;
    user-select: none;
    color: white;



}

.titles-right {
    margin-left: auto;
    transform: scaleX(-1);
}

.wrapper-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-width: 20vw;
    animation: fadeIn 0.8s;
    transform: translateY(-20px);
}

.center .divider {
    width: 250px;
    height: 2px;
    background: white;
}

.center p {
    font-size: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    font-weight: bold;
    white-space: nowrap;
}

.symbol-links {
    display: flex;
    gap: 1rem;
}

.symbol-links img {
    width: 50px;
    filter: brightness(0) invert(1);
}

.center .number {
    font-size: 1.8rem;
    white-space: nowrap;
}

.info-wrapper {
    margin-top: 3rem;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    text-transform: uppercase;

}

.earth-wrapper {
    margin-bottom: 1rem;
}

.earth,
img {
    width: 5.5rem;
}


@keyframes flicker {
    0% {
        opacity: 1;
    }

    3% {
        opacity: 0.2;
    }

    6% {
        opacity: 1;
    }

    8% {
        opacity: 0.6;
    }

    12% {
        opacity: 1;
    }

    35% {
        opacity: 1;
    }

    37% {
        opacity: 0.4;
    }

    39% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    67% {
        opacity: 0.3;
    }

    70% {
        opacity: 0.8;
    }

    72% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    92% {
        opacity: 0.5;
    }

    94% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/*
stnyax diff from text ahde, cant comma sep multiple inside one function. You chain them as sep functions
*/

.earth img:hover {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 5px white) drop-shadow(0 0 10px white);
    animation: flicker 1s infinite;
}

.symbol-links img:hover {
    filter: brightness(0) invert(1) sepia(1) saturate(20) hue-rotate(170deg);
    /*
    trick well known for recoloring icons.
    it just exists
    online tools like css filter generator where u plug in a target color and spits out exact filter chain
    in real practrice, devs avoid this issue entirely by usign SVG icons instead of img tags
    with inline svgs you can just set fill: lightblue

    sepia: turns image to warm brownish yellow tone. Gives some color to work w/ since u canr hue rotate white
    Saturate: cranks up intensity of color vividness
    hue rotete: spins color around color wheel by degree value. rotating 170 degrees from a yelowish color gets u in blue land
    */
}



a:hover {
    color: lightblue;
}

@keyframes fadeIn {
    from {
        opacity: 0;

    }

    to {
        opacity: 1;
    }
}


@media (max-width: 1200px) {
    .body-wrapper {
        padding-top: 2.85rem;
    }

    .titles-left,
    .titles-right {

        font-size: 4rem;
    }

    .center p {
        font-size: 40px;
    }

    .center .number {
        font-size: 1.2rem;
    }

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

@media (max-width: 1050px) {
    .body-wrapper {
        padding-top: 2.85rem;
    }

    .titles-left,
    .titles-right {

        font-size: 4rem;
    }

    .center p {
        font-size: 43px;
    }

    .center .number {
        font-size: 1.2rem;
    }

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



@media (max-width: 650px) {
    .body-wrapper {
        padding-top: 2.8rem;
    }

    .titles-left,
    .titles-right {

        font-size: 2rem;
    }


    .center p {
        font-size: 40px;
    }

    .center .number {
        font-size: 1.2rem;
    }

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

@media (max-width: 430px) {
    .body-wrapper {
        padding-top: 1.8rem;
    }

    .center p {
        font-size: 25px;
    }

    .center .number {
        font-size: 1rem;
    }

    .center .info-link {
        font-size: 1rem;
    }

    .wrapper {
        font-size: 1.5rem;
    }

    .symbol-links img {
        width: 30px;
    }

    .center .divider {
        width: 150px;
    }

    .
}