:root {

    /* root font size (1rem) */
    /* reacts to screen size */
    font-size: min(max(min(4vh, 4vw), 18px), 34px);

    /* --page-bg-color: #111e1d; */
    /* --page-bg-color: #0e1717; */
    --page-bg-color: #020d0df0;
    /* --page-bg-color: #071413; */
    

    --max-wrapper-width: min(2200px, calc(1.7 * 100vh));

    /* over-wide enlarger */
    /* can use for headings or names */
    --unitA: max(1rem, 3vw);

    /* minimum floor at 36px */
    /* use for project titles */
    --unitB: max(36px, 2rem);

    /* inverse relationship */
    /* incorporate into line-height calc */
    --unitC: calc(max(6px, 1vh) + calc(24px - 1vw));

    --chunko: 17em;
}


@media screen and (min-width: 2400px) {

    :root {

        font-size: 60px;

        --max-wrapper-width: 2400px;

        --unitC: min(2vw, 36px);

    }
}

@media screen and (max-width: 1200px) {

    :root {

    }

}
@media screen and (max-width: 800px) {


}
@media screen and (max-width: 600px) {

    :root {
        
        --chunko: 100%;
        /* --page-bg-color: #071413fd; */
    }

}
@media screen and (max-width: 400px) {


}