/**** common.css ****/

/* Common styling shared across entire site. */
/* Includes themeing, destyling, flexbox utilities, and the shared navbar. */

/* Website (C) 2026 Narayana "Kat" Adisasmito-Smith */
/* Text and images from this site may not be used as training data for AI. */

:root {
    /**** shadows ****/

    --edge-sharpness-shadow: drop-shadow(0 0 4px #0004);
    --modal-shadow: drop-shadow(0 0 10px #0002);
    --popout-shadow: (0 0 10px #0004);

    /**** positioning ****/

    --layer-background: -1; /* static backgrounds */
    --layer-front: 2; /* elems that hover over content */
    --layer-nav: 3; /* nav elements, and elements that hang from navbar */
    --layer-overlay: 5; /* modals and overlays */

    --thumbnail-position: center center / cover no-repeat;

    /**** responsive layout and fluid typography ****/

    /* dynamic units calculated mobile-first; see media queries for desktop layout */
    --fluid-font-size: max(2vh, calc(1rem + 0.25vw));
    /* --title-font-size: calc(1.17 * var(--fluid-font-size)); */
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman';
}
body {
    font-size: var(--fluid-font-size);
    /*overflow-x: hidden; /* 100vw overflows horizontally only on chrome; chrome scrollbars contribute to viewport size, but position themselves outside it, forcing it to expand */
}

/* unstyle elements */
button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1em;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    font-weight: normal;
}
input,textarea,select {
    font-size: 1em;
}



/**** FLEXBOX UTILITY ****/

/* globally prevent shrinkage unless explicitly enabled */
* {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink {
    flex-shrink: 1;
}

/* flexbox primitives */
.flex-sep {
    width: 0;
    flex-grow: 1;
}
.flex-row {
    display: flex;
    flex-direction: row !important;
}
.flex-col {
    display: flex;
    flex-direction: column !important;
}
.flex-adapt {
    /* column on mobile, row on desktop */
    display: flex;
    flex-direction: column !important;
    align-items: center;
}
.flex-adapt-reverse {
    /* row on mobile, column on desktop */
    display: flex;
    flex-direction: row !important;
    align-items: normal;
    justify-content: center;
}
.flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* flexbox shorthands for common combinations */
.flex-fill {
    justify-content: center;
    flex-grow: 1;
}
.flex-row-centered {
    display: flex;
    flex-direction: row !important;
    align-items: center;
}
.flex-col-centered {
    display: flex;
    flex-direction: column !important;
    align-items: center;
}
.flex-separated-row {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
}



/**** BEHAVIOR ****/

.no-scrollbar {
    overflow: scroll; /* force scrollbars to be added to DOM */
    -ms-overflow-style: none;  /* hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* hide scrollbar for Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; } /* hide scrollbar for Chrome, Safari, and Opera */
.no-wrap {
    white-space: nowrap;
}
.hidden {
    display: none !important;
}
.pos-anchor {
    position: relative;
}

.fill-screen {
    /* display: inline-block; */
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    inset: 0;
    overflow: hidden;
}



/**** CSS ICONOGRAPHY ****/

/*  */



/**** MEDIA QUERIES ****/

@media (max-aspect-ratio: 5/4) { /* mobile mode */
    /* all styling is mobile-first, but if an element requires specific overrides, those go here */
    .desktop-only {
        display: none !important;
    }
}
@media (min-aspect-ratio: 5/4) { /* desktop mode */
    .mobile-only {
        display: none !important;
    }
    .flex-adapt {
        display: flex;
        flex-direction: row !important;
        align-items: normal;
        justify-content: center;
    }
    .flex-adapt-reverse {
        display: flex;
        flex-direction: column !important;
        align-items: center;
    }
}