/* =========================
   INDEX PAGE STYLES
   ========================= */

/* Base - Page-specific background */
body {
    background-color: #000108;
}

/* Directory Modal Theme - Index page (yellow background, red hover) */
:root {
    --directory-bg: #f8f89f;
    --directory-border: none;
    --directory-hover-filter: invert(27%) sepia(98%) saturate(7471%) hue-rotate(3deg) brightness(99%) contrast(118%);
}

/* Layout - Index specific */
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images - Index specific */
.background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.work {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    max-height: 90vh;
    z-index: 1;
}

.work img,
.work video {
    width: 100%;
    height: 100%;
    max-width: 80vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Box Components - Index theme (red) */
.title-box {
    background: #ff0000;
    color: #f3f3f3;
    border: none;
}

.controls-box {
    background: #000108;
    border: none;
    
}

/* Text Colors - Index theme */
.home-link,
.nav-link {
    color: #f3f3f3;
}

.home-link:hover {
    color: #000000;
}

.nav-link:hover {
    color: #000000;
}

.readout {
    color: #f3f3f3;
    margin: 0;
}

/* SVG Logo - Index theme (white) */
.svg-logo {
    fill: #f3f3f3;
}

/* Mobile - Index specific */
@media (max-width: 600px), (max-aspect-ratio: 1/1) {
    .work {
        position: absolute;
        top: auto;
        left: 1.5rem;
        right: 1.5rem;
        transform: none;
        width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        height: auto;
        max-height: none;
    }

    .work img,
    .work video {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: top center;
    }
}