:root {
    /* RESPONSIVE FONT SIZES START */
    --font-size--small: clamp(1rem, 1.5vw + 1rem, 1.25rem);
    --font-size--medium: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
    --font-size--large: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
    --font-size--extra-large: clamp(2rem, 2.5vw + 1rem, 5rem);

    /* SHADOWS */
    --box-shadow--bottom: 0 5px 5px -5px var(--clr-black);
    --box-shadow--bottom-right: 5px 5px 5px -5px var(--clr-black);
    --box-shadow--right: inset inset 15px 0px 25px -10px rgba(255, 255, 255, 0.4);
    --box-shadow--top-left: -5px -5px 5px -5px var(--clr-black);

    /* PADDINGS START */
    --padding--extra-small: 0.25em;
    --padding--small: 0.5em;
    --padding--medium: 1em;
    --padding--large: 1.5em;

    --padding-button: 0.5em 1.5em;

    --padding-title: 0.5rem;
    --padding-text: 0.75rem;

    --gap-row: 2em;
    --gap-column: 2em;

    --portrait: 3/4;
    --landscape: 5/3;


    /* CONTAINER MAX-WIDTH */
    --max-width: 1200px;

    --nav-height: 3.5rem;
}