:root {
    --clr-primary-a0: #ffffff;
    --clr-primary-a10: #d4dae5;
    --clr-primary-a20: #aab6cc;
    --clr-primary-a30: #8093b3;
    --clr-primary-a40: #57729a;
    --clr-primary-a50: #295382;
    --clr-primary-a60: #244367;
    --clr-primary-a70: #1f334d;
    --clr-primary-a80: #182434;
    --clr-primary-a90: #11161d;
    --clr-primary-a100: #000000;

    --transition-length: 0.2s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

html {
    color-scheme: dark light;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 10%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    --cell-max-width: 750px;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    color: hsl(219, 10%, 95%);
    overflow-x: hidden;

    & > div {
        text-align: center;
        max-width: var(--cell-max-width);
        padding: 1rem 1rem;

        &.info {
            max-width: calc(var(--cell-max-width) * 0.75);
        }
    }
}

.video-caption {
    font-style: italic;
    color: var(--clr-primary-a20);
    opacity: 0.8;
    margin-block-end: 0.5rem;
}

#atvLogo {
    display: flex;
    justify-content: center;
    user-select: none;

    & > img {
        filter: drop-shadow(0 0.2rem 0.25rem rgba(255, 255, 255, 0.2));
        transition: filter var(--transition-length);

        &:hover {
            filter: drop-shadow(0 0.2rem 0.25rem rgba(255, 255, 255, 0.5));
        }
    }
}

h1 {
    margin-block-start: 0.5rem;
    margin-block-end: 0.75rem;
    font-weight: 700;
    font-size: 2.5rem;

    & a {
        color: var(--clr-primary-a10);
        transition: color var(--transition-length);

        &:hover {
            color: var(--clr-primary-a20);
        }
    }
}

.info {
    align-content: center;

    p {
        text-wrap-style: pretty;
    }
}

.hero {
    filter: drop-shadow(0.25rem 0.25rem 1rem #00000080);

    & iframe {
        user-select: none;
    }
}

#latestVideoEmbed {
    width: 640px;
    height: 360px;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}

.stacked-links {
    display: flex;
    flex-direction: column;
    justify-content: center;

    & > div {
        padding-block: 0.3rem;
    }

    & a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-primary-a20);
        transition: color var(--transition-length);

        & span {
            padding-inline-start: 0.5rem;
        }

        & svg {
            height: 2.5rem;
        }

        &:hover {
            color: var(--clr-primary-a30);
        }
    }

    .call-to-action {
        font-style: italic;
        color: var(--clr-primary-a20);
        opacity: 0.8;
        padding-bottom: 0;
        margin: 0;
        text-wrap-style: pretty;
    }
}

#worldMap {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    opacity: 0.333;
    filter: blur(2.5px);
    transform: scale(1.01);
}

@media screen and (width <= 680px) {
    h1 {
        font-size: 2rem;
    }

    #latestVideoEmbed {
        width: 320px;
        height: 180px;
    }
}