:root {

    font-size: 62.5%;
    touch-action: pan-x pan-y;
    height: 100%;
    
        /** Theme primary colors */
    --clr-primary-a0: #ff8200;
    --clr-primary-a10: #de7000;
    --clr-primary-a20: #be5f00;
    --clr-primary-a30: #9e4e00;
    --clr-primary-a40: #803e00;
    --clr-primary-a50: #632f00;

        /** Theme surface colors */
    --clr-surface-a0: #fff;
    --clr-surface-a10: #f2f2f2;
    --clr-surface-a20: #e4e4e4;
    --clr-surface-a30: #d7d7d7;
    --clr-surface-a40: #cacaca;
    --clr-surface-a50: #bdbdbd;

        /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #fff3eb;
    --clr-surface-tonal-a10: #f2e7e0;
    --clr-surface-tonal-a20: #e4dbd5;
    --clr-surface-tonal-a30: #d7cfca;
    --clr-surface-tonal-a40: #cac3bf;
    --clr-surface-tonal-a50: #beb8b4;

        /** Success colors */
    --clr-success-a0: #22946e;
    --clr-success-a10: #4fa482;
    --clr-success-a20: #71b497;

        /** Warning colors */
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #b58e4f;
    --clr-warning-a20: #c2a16f;

        /** Danger colors */
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #ae4842;
    --clr-danger-a20: #c06961;

        /** Info colors */
    --clr-info-a0: #21498a;
    --clr-info-a10: #40639c;
    --clr-info-a20: #607eae;

    --f-h0: clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 1.6667)), 7rem);
    --f-h1: clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 1.6667)), 4.8rem);
    --f-h2: clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.0417)), 3.8rem);
    --f-h3: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.8333)), 3.2rem);
    --f-h4: clamp(2.2rem, calc(2.2rem + ((1vw - 0.32rem) * 0.625)), 2.8rem);
    --f-h5: clamp(2.0rem, calc(2rem + ((1vw - 0.32rem) * 0.2083)), 2.2rem);
    --f-h6: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem);
    --f-body: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.4167)), 2rem);
    --f-body-sm: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem);
    --f-sub: clamp(1.2rem, calc(1.2rem + ((1vw - 0.32rem) * 0.4167)), 1.4rem)

}

* {
    background-color: var(--clr-surface-a0);
    color: var(--clr-primary-a50);
    font-size: var(--f-body);
    font-family: Verdana, sans-serif;
    box-sizing: border-box;
}

h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); }
h4 { font-size: var(--f-h4); }
h5 { font-size: var(--f-h5); }
h6 { font-size: var(--f-h6); }

html, body {

    overscroll-behavior: contain;
}

body {
  
    overscroll-behavior-y: contain;
    padding: unset;
    margin: unset;
}

.warning {

    background-color: var(--clr-danger-a10);
    color: var(--clr-light-a0);
}

footer {

    color: var(--clr-surface-a0);
    background-color: var(--clr-primary-a50);
    width: 100%;
    filter: brightness( 0.5 );
}

#save-state {

    color: inherit;
    background-color: inherit;
    margin: auto;
    max-width: 144rem;
    padding: 10rem 2rem;
}

@scope ( main ) {

    :scope {

        margin: auto;
        max-width: 120rem;
        padding: 10rem 2rem;
        min-height: calc( 100vh - 20rem - var(--f-body) );
    }

    > * {

        position: relative;
        margin: unset;
        padding: 2rem;
    }

    > *:empty:before {

        content: attr(placeholder);
        position: absolute;
        color: var(--clr-surface-a50);
        z-index: 0;
    }
    > *:focus {

        outline: unset;
    }
}