body {
    height: 100vh;
    display: grid;
    grid-template-rows: auto clamp(5vh, 5vh, 10vh) clamp(5vh, 5vh, 10vh);
    padding: 0 5vmin;
    margin: 0;
    font-family: Arial, Helvetica, 'Open Sans';
    --memt-foreground: black;
    --memt-background: white;
    --memt-besides: gray;
    --memt-developer: magenta;
    --memt-accent-back: black;
    --memt-accent-front: white;
    background-color: var(--memt-background);
    box-shadow: 0 0 5vmin rgba(0,0,0,0.9) inset;

}

/* @media (prefers-color-scheme: dark) {
    body {
        --memt-foreground: lightgray;
        --memt-background: rgba(25, 25, 25);
        --memt-besides: gray;
        --memt-developer: magenta;
        --memt-accent-back: rgba(75, 75, 75);
        --memt-accent-front: white;
    }

    .memt-main-branding {
        filter: invert(1);
    }
} */

body > * {
    width: 100%;
}
body ::-webkit-scrollbar {
    display: none;
}

#memt-navbar {
    font-size: 1.5vmax;
    /* font-weight: bold; */
    display: inline-flex;
    justify-content: center;
    color: var(--memt-foreground);

}

#memt-navbar .widescreen {
    display: block;
}
#memt-navbar .portraitscreen {
    display: none;
}

.memt-navbar-home {
    /* font-weight: bold; */
}

@media (max-aspect-ratio: 1/1) {
    #memt-navbar .widescreen {
        display: none;
    }
    #memt-navbar .portraitscreen {
        display: block;
    }
    
}

#memt-navbar > * {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1vh;
}

#memt-navbar .memt-call {
    font-weight: bold;
}


#memt-home {
    /* background-color: grey; */
    font-size: 1vh /*100%*/;
    display: grid;
    gap: 5vh;
    grid-template-rows: min-content min-content auto min-content min-content;
    align-items: center;
    padding: 5em 0;
}

@keyframes memt-gap-decrease {
    0% {
        gap: 5em
    }
    100% {
        gap: 4em
    }
}

#memt-home:has(.memt-showreel:not(.memt-static):hover) {
    animation: memt-gap-decrease 0.5s forwards;
}

#memt-home > * {
    overflow-x: hidden;
}

#memt-home .memt-bar {
    height: 5em;
    background-color: var(--memt-accent-back);
}

#memt-home > div:has(.memt-showreel) {
    position: relative;
}

#memt-home .memt-showreel {
    height: 5em;
    display: grid;
    grid-auto-flow: column;
    grid-gap: calc(5em * calc(16 / 9));
    justify-items: start;
    align-items: center;
    grid-template-columns: repeat(12, auto);
    margin: 0 5em;
    overflow: hidden;
}

@keyframes memt-showreel-zoom {
    0% {
        height: 5em;
    }
    100% {
        height: calc(5em + 4em);
    }
}

#memt-home .memt-showreel:hover:not(.memt-static) {
    animation: memt-showreel-zoom 0.5s forwards;
}

#memt-home .memt-showreel > div {
    background-color: var(--memt-accent-back);
    height: 5em;
    aspect-ratio: 16 / 9;
    background-size: contain;

}

#memt-home .memt-showreel:not(.memt-static) > div {
    cursor: pointer;
}

/* @keyframes memt-showreel-unselected {
    0% {
        filter: none;
        transform: scale(1.0);
    }
    100% {
        filter: grayscale();
        transform: scale(0.75);
    }
} */

@keyframes memt-showreel-selected {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.75);
    }
}

/* #memt-home .memt-showreel:hover:has(div:hover) > div:not(:hover) {
    position: absolute;
    animation: memt-showreel-unselected 2s ease forwards;
} */

#memt-home .memt-showreel:not(.memt-static) > div:hover {
    animation: memt-showreel-selected 0.5s ease forwards;
}

#memt-home .home-highlight {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
}

.memt-main-content {
    height: 40vh;
    display: grid;
    grid-template-rows: 37.5vh 2.5vh;
}

.memt-main-branding {
    /* position: absolute; */
    font-size: clamp(5em, 25em, 20vw);
    font-weight: bold;
    transform: translate(0%, 0%);
    animation: memt-slide 0.5s forwards;
    height: 40vh;
    max-width: 75vw;
}

.memt-main-message {
    font-size: 2vh;
    justify-self: center;
    font-weight: bold;
    color: var(--memt-foreground);
}

@keyframes memt-slide {
    0% {
        transform: translate(200%, 0%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}

#memt-footer {
    display: grid;
    grid-auto-flow: column;
    white-space: nowrap;
    gap: 5ch;
    font-size: clamp(2.5vh, 2.5vh, 5vh);
    align-items: center;
    line-height: 1lh;
    overflow-x: auto;
    width: clamp(calc(100vmin - 10vw), calc(100vw - 25vw), 100vw);
    justify-self: center;
}

#memt-footer > * {
    color: var(--memt-besides);
    justify-self: center;
}

#memt-footer > *:hover {
    color: var(--memt-foreground);
}

.memt-link {
    cursor: grab;
}

.memt-showreel-highlight {
    background-color: var(--memt-accent-back);
    padding: 1vmin;
    height: 37.5em;
    aspect-ratio: 32 / 9;
    display: grid;
    grid-template-columns: 50% 50%;

} 

@media (max-aspect-ratio: 1/1) {
    .memt-showreel-highlight {
        aspect-ratio: 1 / 2;
        grid-auto-flow: row;
        grid-template-rows: 40% 60%;
        grid-template-columns: unset;
        aspect-ratio: unset;
        justify-items: center;
    } 
}

.memt-showreel-highlight iframe {
    height: 100%;
    aspect-ratio: 16 / 9;
}

.memt-showreel-details {
    color: var(--memt-accent-front);
    position: relative;
    padding: 1em 2.5em;
    overflow-y: scroll;
}

.memt-showreel-title, .memt-general-title {
    font-size: 5vmin;
    word-wrap: break-word;
}
.memt-showreel-desc, .memt-general-desc {
    font-size: 2.5vmin;
}

.memt-showreel-close {
    position: absolute;
    width: 2ch;
    aspect-ratio: 1 / 1;
    text-align: center;
    top: 0;
    right: 0;
    cursor: grab;
    font-size: 2.5vmin;
    border: 0.5vmin solid var(--memt-accent-front);
    border-radius: 2vmin;
}

.memt-about-content {
    max-width: calc(100vw - 10vmin - 10vw);
    height: 37.5em;
    aspect-ratio: 32 / 9;
    display: grid;
    gap: 5vw;
    grid-template-columns: clamp(30%, 35%, 40%) auto;
    width: 100%;
    padding: 0 5vw;
    color: var(--memt-foreground);
}

.memt-about-content > * {
    padding: 0 1vmin;
}

.memt-about-content iframe {
    width: 80%;
    aspect-ratio: 16 / 9;
    padding: 1vmin 0;
}

@media (max-aspect-ratio: 1/1) {
    .memt-about-content {
        display: block;
        aspect-ratio: unset;
    } 
    .memt-about-content > * {
        padding: 1vmin 0;
    }
    .memt-about-content * {
        padding: 1vmin 0;
    }
}

.memt-general-sidenote {
    color: var(--memt-besides);
}

@keyframes memt-credits-website-color {
    0% {
        color: unset,
    }
    100% {
        color: var(--memt-developer);
    }
}
.memt-credits-website:hover {
    animation: memt-credits-website-color 5s forwards;
}

.hidden {
    display: none;
}