@property --columns {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

@property --count {
    syntax: "<number>";
    inherits: true;
    initial-value: 60;
}

@property --width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@font-face {
    font-family: 'icons';
    src: url('icons.woff2') format('woff2'),
        url('icons.woff') format('woff'),
        url('icons.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VarelaRound';
    src: url('VarelaRound.woff2') format('woff2'),
        url('VarelaRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --columns: calc(clamp(1, round(up, tan(atan2(var(--width) - 512px, 256px)), 1), 6));
    --width: 100vw;
    --color-bg: rgb(255, 255, 255);
    --color-primary: rgb(34, 197, 94);
    --color-secondary: rgb(134, 239, 172);
    --color-text: hsl(0, 0%, 20%);
    --color-nav-bg: rgb(187, 247, 208);
    --color-nav-primary: rgb(20, 83, 45);
    --color-nav-secondary: rgb(34, 197, 94);
}

iframe {
    width: 100%;
    border: none;
    height: calc(round(up, round(up, var(--count) / var(--columns), 1) * (3rem + (100vw - (var(--columns) * 1rem + 2rem)) / var(--columns) * (9/16)), 1px));
    overflow: clip;

    &:last-of-type {
        padding-bottom: 1rem;
    }
}

body {
    scrollbar-width: none;
    font-family: VarelaRound;
    background-color: var(--color-bg);
    color: var(--color-text);

    & *:not(nav *)::selection {
        background-color: var(--color-text);
        color: var(--color-bg);
    }

    main img::selection {
        background-color: transparent;
    }
}

main {
    margin: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: 0 1rem;

    &:has(section) {
        color: var(--color-primary);
        margin-bottom: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        & *::selection {
            background-color: var(--color-primary);
            color: var(--color-bg);
        }

        figcaption {
            font-family: unset;
            color: unset;
            transition: opacity 0.1s ease;
            row-gap: 0.5rem;
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 0.75rem;
            justify-content: center;
            align-items: center;
            transform: translateX(-50%);
            left: 50%;
            position: absolute;
            bottom: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(2rem, max-content));
            gap: 1rem;
            opacity: 0;
        }

        a {
            font-size: 2rem;
            line-height: 2rem;
            text-align: center;
            font-family: icons;

            &:hover {
                color: var(--color-secondary);

                &::selection {
                    background-color: var(--color-secondary);
                    color: var(--color-bg);
                }
            }
        }

        figure:hover figcaption {
            opacity: 1;
        }
    }
}

nav {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
    padding: 0.25rem;
    background-color: var(--color-nav-bg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    &:has(~iframe[src*="clips"]) ul:last-of-type a:nth-child(3) li,
    &:has(~iframe[src*="highlights"]) ul:last-of-type a:nth-child(2) li,
    &:has(~iframe[src*="vods"]) ul:last-of-type a:nth-child(1) li,
    &:has(~video[poster*="clips"]) ul:last-of-type a:nth-child(3) li,
    &:has(~video[poster*="highlights"]) ul:last-of-type a:nth-child(2) li,
    &:has(~video[poster*="vods"]) ul:last-of-type a:nth-child(1) li {
        color: var(--color-nav-secondary);
        border-bottom-color: var(--color-nav-secondary);

        &::selection {
            background-color: var(--color-nav-secondary);
        }
    }

    label {
        &:hover {
            color: var(--color-nav-secondary);

            &::selection {
                color: var(--color-nav-bg);
            }

            &::after,
            &::before,
            &::selection,
            input {
                background-color: var(--color-nav-secondary);
            }
        }

        input,
        &::after,
        &::before {
            background-color: var(--color-nav-primary);
        }

        * {
            display: none;
        }
    }
}

a {
    color: inherit;
    text-decoration: none;

    &:has(li) {
        color: var(--color-nav-primary);

        &::selection {
            background-color: var(--color-nav-primary);
            color: var(--color-nav-bg);
        }
    }

    &:hover {

        li,
        &:has(li) {
            color: var(--color-nav-secondary);
            border-bottom-color: var(--color-nav-secondary);

            &::selection {
                background-color: var(--color-nav-secondary);
                color: var(--color-nav-bg);
            }
        }
    }
}

svg {
    height: 2.5rem;
    width: 2.5rem;

    path {
        stroke: var(--color-nav-primary);
        stroke-width: calc(10px/3);
        stroke-linecap: round;
        fill: none;
        stroke-linejoin: round;
    }

    &:hover path {
        stroke: var(--color-nav-secondary);
    }
}

h1 {
    &:has(+h1) {
        display: block;
    }

    +h1 {
        display: none;
    }
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    figure {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 1.5rem;
    }

    +figure {
        position: relative;

        img {
            aspect-ratio: 1;
        }
    }
}

body:has(iframe) ul:first-child a:nth-child(1) path,
body:has(video) ul:first-child a:nth-child(2) path,
iframe,
img {
    display: block;
}

video {
    margin: 0 0.75rem;
    width: calc(100% - 1.5rem);
    aspect-ratio: calc(16/9);
}

ul {
    list-style-type: none;
    display: flex;

    &:first-child {
        a:nth-of-type(1) path {
            d: path("M5 20l3.3333-3.3333m0 0L20 5l11.6667 11.6667m-23.3334 0v16.6667A1.6667 1.6667 0 0010 35.0001h5m16.6667-18.3333L35 20.0001m-3.3333-3.3333v16.6667A1.6667 1.6667 0 0130 35.0002h-5m-10 0a1.6667 1.6667 0 001.6667-1.6667v-6.6667a1.6667 1.6667 0 011.6667-1.6667h3.3333a1.6667 1.6667 0 011.6667 1.6667v6.6667a1.6667 1.6667 0 001.6667 1.6667m-10 0h10");
        }

        a:nth-of-type(2) path {
            d: path("M16.6667 31.6667l-11.6667-11.6667m0 0l11.6667-11.6667m-11.6667 11.6667h30")
        }
    }

    &:first-of-type {
        a {
            line-height: 1rem;
            display: block;
            padding: 0;
        }
    }

    &:last-of-type {
        z-index: 1;
        transition: none;

        a {
            padding: 0.5rem 1rem;
        }
    }
}

li {
    font-size: 1.875rem;
    border-bottom: solid var(--color-nav-primary) 0;
    line-height: 2.25rem;
    display: flex;

    &::selection {
        background-color: var(--color-nav-primary);
        color: var(--color-nav-bg);
    }
}

::-webkit-scrollbar,
body:not(:has(iframe)) ul:first-child a:nth-child(1),
body:not(:has(video)) ul:first-child a:nth-child(2) {
    display: none;
}

body,
figure,
iframe,
ul {
    margin: 0;
}

iframe,
ul {
    padding: 0;
}

figcaption {
    font-family: monospace;
    position: absolute;
    margin: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    opacity: 0.75;
    color: rgb(243, 244, 246);
    background-color: rgb(17, 24, 39);
    padding: 0 0.25rem;

    &:last-of-type {
        right: 0;
    }
}

h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    text-align: center;
    align-content: space-evenly;
    margin: 1.5rem;
    font-weight: 400;
}

h2,
h4 {
    margin: 1rem 2rem;
}

h2 {
    font-size: 4rem;
}

h2,
h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

h3 {
    margin: 0.75rem 0 0.25rem 0;
    line-height: 2rem;
    font-size: 1.5rem;
}

article {
    position: relative;
}

img {
    width: 100%;
    aspect-ratio: calc(16/9);
}

ul:first-child,
label {
    width: 2.5rem;
    padding: 0 0.25rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: rgb(31, 56, 57);
        --color-primary: rgb(109, 194, 85);
        --color-secondary: rgb(117, 221, 239);
        --color-text: hsl(0, 0%, 80%);
        --color-nav-bg: rgb(37, 83, 134);
        --color-nav-primary: rgb(182, 233, 83);
        --color-nav-secondary: rgb(117, 221, 239);
    }
}

@media (max-width: 768px) {
    main:has(section) {
        display: flex;
        flex-wrap: wrap;
    }

    section:has(h1) {
        width: 100%;
    }

    h1 {
        &:has(+h1) {
            display: none;
        }

        +h1 {
            display: block;
        }
    }

    svg {
        display: block;
    }

    ul {
        order: 3;

        &:first-of-type {
            order: 1;
        }

        &:not(:first-of-type) li {
            border-bottom-width: 2px;
            padding: 1rem;
            margin-bottom: 0;
            text-align: right;
        }

        &:has(+label input:not(:checked)) {
            clip-path: inset(calc(100% + 5rem) 0 0 0);
            transform: translateY(calc(-100% - 6px));
        }

        &:last-of-type {
            background-color: var(--color-nav-bg);
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
            clip-path: inset(1rem 0 0 0);
            display: block;
            flex-basis: 100%;
            left: 0;
            padding: 1.25rem;
            position: absolute;
            top: 0;
            transform: translateY(3.75rem);
            transition: 0.2s ease;
            width: calc(100% - 2.5rem);

            li {
                line-height: 2.25rem;
                padding: 1rem;
            }

            a {
                display: block;
                padding: 0;

                &:first-child li {
                    border-top: var(--color-nav-primary) solid 2px;
                }
            }
        }
    }

    nav {
        flex-direction: row;
        height: 2.5rem;
        margin-left: 0;
        margin-right: 0;
        padding: 1.25rem;
    }

    ul,
    li {
        display: block;
        text-align: right;
    }

    a li,
    ul:first-of-type {
        line-height: 1.25rem;
        margin: 0;
        padding: 0;
    }

    label {
        order: 2;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: max-content;
        position: absolute;
        padding: 0.375rem 0.25rem;
        right: 1.25rem;
        top: 1.25rem;

        &:has(input:checked) {
            &::before {
                rotate: 45deg;
            }

            &::after {
                rotate: -45deg;
            }

            &::before,
            &::after {
                transform-origin: left center;
                translate: 6px 0;
                width: calc(1.5rem * sqrt(2));
            }
        }

        input {
            animation: rotate-end 0.2s forwards;

            &:checked {
                opacity: 0;
                animation: rotate-start 0.2s forwards;
            }
        }
    }

    @keyframes rotate-start {
        from {
            transform: rotate(0deg);
        }

        from {
            transform: rotate(180deg);
        }
    }

    @keyframes rotate-end {
        from {
            transform: rotate(180deg);
        }

        from {
            transform: rotate(360deg);
        }
    }

    label {

        input,
        &::before,
        &::after {
            transform-origin: left center;
            transition: opacity 0.2s ease, rotate 0.2s ease, translate 0.2s ease, width 0.2s ease;
            border-radius: 999999px;
            content: "";
            display: block;
            height: 4px;
            width: 2rem;
            padding: 0;
            margin: 0;
            appearance: none;
            outline: none;
        }

        input {
            transform-origin: center;
        }
    }
}