@import url("./common.css");
@import url('https://fonts.cdnfonts.com/css/okuda');

:root {
    --main-color-bg: black;
    --main-color-text: #ccc;
    --main-font-body: "Okuda", sans-serif;
    --main-font-headers: "Okuda", sans-serif;
    --main-font-size: 7mm;
    --trek-color-red: #cb5449;
    --trek-color-blue: #7a87f8;
    --trek-color-orange: #ed822c;
    --trek-color-peach: #f2af94;
    --trek-color-magenta: #bc5196;
    --trek-color-periwinkle: #c18cf9;
}

html, body {
    overflow-x: unset; /* reset the common style of preventing x scrolling */
    min-height: unset;
}

body {
    width: unset;
}

body, h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.45mm;
}

a {
    text-transform: uppercase;
    letter-spacing: 0.35mm;
}

model-viewer {
    display: block;
}

#mute-btn {
    z-index: 20;
    position: absolute;
    top: 58mm;
    left: 0;
    font-size: 9mm;
    background-color: transparent;
    border-color: transparent;

    &:hover {
        text-shadow: 0 1mm 4mm #fff6;
    }

    &.on > .off {
        display: none;
    }

    &:not(.on) > .on {
        display: none;
    }
}

decoration {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; /* be as big as the container */
    width: 100%;
    overflow: hidden;

    & > ul {
        margin: 0;
        padding: 1mm;
        display: flex;
        flex-direction: column;
        list-style: none;

        /* last element should go to the bottom (minus margin) */
        & > li:last-of-type {
            position: absolute;
            top: 242mm; /* height of everything else plus margin */
            bottom: 2mm;
            height: auto;
        }

        & li {
            min-height: 20mm;
            height: 35mm;
            margin: 2mm 0;
            display: flex;
            flex-flow: row;
            flex-wrap: nowrap;

            & > ul {
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: row;
                list-style: none;
                width: 0; /* this (plus overflow:visible) is necessary to not grow the page's width */
                position: relative;

                & li {
                    height: inherit;
                    margin: 0 2mm;

                    & a {
                        width: 50mm;
                    }
                }
            }

            &:has(> a:hover) {
                & > a:hover,
                &::before,
                & > ul > li:first-child a,
                & > ul > li:first-child::before
                {
                    filter: brightness(1.25);
                }
            }

            &:has(> ul > li:first-child a:hover) > a {
                filter: brightness(1.25);
            }

            & a, a:link, a:visited {
                display: flex;
                flex-direction: column-reverse;
                font-size: 5mm;
                width: 30mm;
                text-decoration: none;
                text-align: right;
                color: black;
                background-color: var(--trek-color-red);

                &:hover {
                    text-decoration: none;
                    color: black;
                }
            }

            &.upper-left a {
                flex-direction: column;
            }

            &.curve-bottom-right, &.curve-top-right {
                height: 20mm;

                & > ul,
                & ul > li:first-child {
                    margin-left: 0 !important;
                }

                & li:nth-of-type(1) {
                    width: 30mm;
                }

                & li:nth-of-type(1)::before {
                    content: '';
                    z-index: -2;
                    height: 50%;
                    width: 15mm;
                    position: absolute;
                    left: 0;
                }

                & li:nth-of-type(1)::after {
                    content: '';
                    z-index: -1;
                    background-color: black;
                    height: 100%;
                    width: 30mm;
                    position: absolute;
                    left: 0;
                    border-radius: 50%;
                }

                & li:last-of-type > a {
                    width: 100vw;
                    height: 50%;
                }
            }

            &.curve-bottom-right {
                & > a {
                    border-bottom-left-radius: 100%;
                }

                & ul > li {
                    align-items: flex-end;

                    & a  {
                        min-height: 0;
                        height: 50%;
                    }
                }

                & li:nth-of-type(2) a {
                    background-color: var(--trek-color-orange);
                }

                & li:nth-of-type(1) a {
                    background-color: var(--trek-color-blue);
                    min-height: 0;
                    height: 50%;
                }

                & li:nth-of-type(1)::before {
                    background-color: var(--trek-color-blue);
                    bottom: 50%;
                }

                & li:nth-of-type(1)::after {
                    bottom: 50%;
                }

                & li:last-of-type > a {
                    background-color: var(--trek-color-red);
                }
            }

            &.curve-top-right {
                & > a {
                    border-top-left-radius: 100%;
                }

                & li:nth-of-type(1) a {
                    background-color: var(--trek-color-red);
                    min-height: 0;
                    height: 50%;
                }

                & li:nth-of-type(1)::before {
                    background-color: var(--trek-color-red);
                    top: 50%;
                }

                & li:nth-of-type(1)::after {
                    top: 50%;
                }

                & li:nth-of-type(odd) a {
                    min-height: 0;
                    height: 50%;
                }

                & li:last-of-type > a {
                    background-color: var(--trek-color-periwinkle);
                }
            }

            &:nth-of-type(1) a {
                background-color: var(--trek-color-periwinkle);
            }

            &:nth-of-type(2) a {
                background-color: var(--trek-color-blue);
            }

            &:nth-of-type(4) a {
                background-color: var(--trek-color-orange);
            }

            &:nth-of-type(5) a {
                background-color: var(--trek-color-peach);
            }

            &:nth-of-type(6) a {
                background-color: var(--trek-color-blue);
            }
        }
    }
}

container#main {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: 4mm;
    margin-left: 2mm;
    margin-right: 6mm;
    overflow: hidden visible;
    height: fit-content;
    min-height: calc(100dvh - 2mm);
    min-width: 160mm;
    padding-left: 36mm;
    grid-template-rows: 47mm 38mm auto 1fr;
    grid-template-columns: 80mm auto;
    gap: 2mm;

    & header {
        grid-row: 1;
        grid-column: 1;

        & h1 {
            font-size: 12mm;
            margin-top: 15mm;
        }
    }

    & main {
        grid-row: 3;
        grid-column: 1 / 3;
        max-width: 350mm;

        & ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            min-width: 80mm;
            width: 100%;
            margin: 1em 0;
            padding: 0;

            & li {
                flex:0 1 40mm;
                border: 1mm solid black;
                border-radius: 4mm;
                font-size: 6mm;
                height: fit-content;


                & a {
                    display: block;
                    text-decoration: none !important;
                    color: black !important;
                    padding: 4mm 0 4mm 4mm;
                }

                &:hover {
                    filter: brightness(1.25);
                }

                &:nth-of-type(odd) {
                    background-color: var(--trek-color-periwinkle);
                }

                &:nth-of-type(even) {
                    background-color: var(--trek-color-red);
                }

                &:nth-of-type(2) {
                    background-color: var(--trek-color-blue);
                }

                &:nth-of-type(3) {
                    background-color: var(--trek-color-orange);
                }

                &:nth-of-type(4) {
                    background-color: var(--trek-color-peach);
                }
            }
        }

    }

    & nav {
        grid-row: 1;
        grid-column: 2;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;

        & ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            width: fit-content;
            min-width: 80mm;

            & li {
                flex: 1 0 40%;
                border: 1mm solid black;
                border-radius: 4mm;
                font-size: 6mm;
                height: fit-content;


                & a {
                    display: block;
                    text-decoration: none !important;
                    color: black !important;
                    padding: 4mm 0 4mm 4mm;
                }

                &:hover {
                    filter: brightness(1.25);
                }

                &:nth-of-type(odd) {
                    background-color: var(--trek-color-periwinkle);
                }

                &:nth-of-type(even) {
                    background-color: var(--trek-color-red);
                }

                &:nth-of-type(2) {
                    background-color: var(--trek-color-blue);
                }

                &:nth-of-type(3) {
                    background-color: var(--trek-color-orange);
                }

                &:nth-of-type(4) {
                    background-color: var(--trek-color-peach);
                }
            }
        }
    }

    & footer {
        grid-row: 4;
        grid-column: 1 / 3;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 4mm;
    }
}