/* font imports ------------------------------ */
@font-face {
    font-family: 'Glacial Indifference';
    src: url('/assets/fonts/GlacialIndifference-Regular.eot');
    src: url('/assets/fonts/GlacialIndifference-Regular.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/GlacialIndifference-Regular.woff2') format('woff2'),
        url('/assets/fonts/GlacialIndifference-Regular.woff') format('woff'),
        url('/assets/fonts/GlacialIndifference-Regular.ttf') format('truetype'),
        url('/assets/fonts/GlacialIndifference-Regular.svg#/assets/fonts/GlacialIndifference-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('/assets/fonts/GlacialIndifference-Italic.eot');
    src: url('/assets/fonts/GlacialIndifference-Italic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/GlacialIndifference-Italic.woff2') format('woff2'),
        url('/assets/fonts/GlacialIndifference-Italic.woff') format('woff'),
        url('/assets/fonts/GlacialIndifference-Italic.ttf') format('truetype'),
        url('/assets/fonts/GlacialIndifference-Italic.svg#/assets/fonts/GlacialIndifference-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('/assets/fonts/GlacialIndifference-Bold.eot');
    src: url('/assets/fonts/GlacialIndifference-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/GlacialIndifference-Bold.woff2') format('woff2'),
        url('/assets/fonts/GlacialIndifference-Bold.woff') format('woff'),
        url('/assets/fonts/GlacialIndifference-Bold.ttf') format('truetype'),
        url('/assets/fonts/GlacialIndifference-Bold.svg#/assets/fonts/GlacialIndifference-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* root colors & fonts ------------------------------ */
:root {
    /* preloaded colors */
	--white: #FFF;
	--black: #000;
	--grey: #D9D9D9;
    --grey-faded: rgba(0,0,0,0.15);
    --grey-xfaded: rgba(0,0,0,0.05);
    --white-faded: rgba(255,255,255,0.85);
    --black-faded: rgba(0,0,0,0.85);

    /* add your custom colors here */
    --linen: #f9f7f1;
    --linenAlt: #F8F6F2;
    --mint: #a2d8c0;
    --mintLight: #D4EDE1;
    --pink: #f6d3e1;
    --pinkLight: #FCEEF3;
    --latte: #eadfce;
    --blackMatt: #1e1e1e;
    
    /* add your custom fonts here */
    --glacial: 'Glacial Indifference', sans-serif;

    /* base font size & line height */
    --base-font-size: 18px;
    --minimum-font-size: 12px;
    --base-line-height: 1.5em;
    --base-heading-line-height: 1.1em;

    /* font scale (1.15 1.2 1.25, 1.333, 1.5, 1.618 are common) */
    --desktop-font-scale-system: 1.25;
    --desktop-sml-font-scale-system: 1.25;
    --tablet-font-scale-system: 1.25;
    --mobile-font-scale-system: 1.225;
    --mobile-sml-font-scale-system: 1.2;

    /* font styling */
    --html-font-family: var(--glacial);
    --html-font-weight: 400;
    --html-font-style: normal;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--black);

    --h1-font-family: inherit;
    --h1-font-weight: 700;
    --h1-font-style: inherit;
    --h1-letter-spacing: inherit;
    --h1-text-transform: inherit;
    --h1-text-decoration: inherit;
    --h1-color: inherit;

    --h2-font-family: inherit;
    --h2-font-weight: 700;
    --h2-font-style: inherit;
    --h2-letter-spacing: inherit;
    --h2-text-transform: inherit;
    --h2-text-decoration: inherit;
    --h2-color: inherit;

    --h3-font-family: inherit;
    --h3-font-weight: 700;
    --h3-font-style: inherit;
    --h3-letter-spacing: inherit;
    --h3-text-transform: inherit;
    --h3-text-decoration: inherit;
    --h3-color: inherit;

    --h4-font-family: inherit;
    --h4-font-weight: 700;
    --h4-font-style: inherit;
    --h4-letter-spacing: inherit;
    --h4-text-transform: inherit;
    --h4-text-decoration: inherit;
    --h4-color: inherit;

    --h5-font-family: inherit;
    --h5-font-weight: 700;
    --h5-font-style: inherit;
    --h5-letter-spacing: inherit;
    --h5-text-transform: inherit;
    --h5-text-decoration: inherit;
    --h5-color: inherit;

    /* colors & standard elements */
    --body-background-color: var(--white);
    --bold-font-weight: 700;
    --link-color: var(--black);
    --link-color-hover: var(--black);
    --hr-weight: 1px;
    --hr-color: var(--grey-faded);
    --border: 1px solid var(--grey-faded);
    --shadow: 0 0.5rem 1rem var(--grey-xfaded);
    --transition: 0.3s;

    --txt-1-color: var(--black);
    --txt-2-color: var(--mint);
    --txt-3-color: var(--pink);

    --background-color-1: var(--latte);
    --background-color-2: var(--mint);
    --background-color-3: var(--pink);

    /* themes */
    --theme-1-background: var(--linen);
    --theme-1-text: var(--black);
    --theme-1-btn-1-background: var(--mint);
    --theme-1-btn-1-label: var(--blackMatt);
    --theme-1-btn-2-border: var(--mint);
    --theme-1-btn-2-label: var(--blackMatt);
    --theme-1-links: var(--black);

    --theme-2-background: var(--latte);
    --theme-2-text: var(--black);
    --theme-2-btn-1-background: var(--mint);
    --theme-2-btn-1-label: var(--blackMatt);
    --theme-2-btn-2-border: var(--mint);
    --theme-2-btn-2-label: var(--blackMatt);
    --theme-2-links: var(--black);

    --theme-3-background: var(--mint);
    --theme-3-text: var(--black);
    --theme-3-btn-1-background: var(--blackMatt);
    --theme-3-btn-1-label: var(--white);
    --theme-3-btn-2-border: var(--blackMatt);
    --theme-3-btn-2-label: var(--white);
    --theme-3-links: var(--black);

    --theme-4-background: var(--pink);
    --theme-4-text: var(--black);
    --theme-4-btn-1-background: var(--blackMatt);
    --theme-4-btn-1-label: var(--white);
    --theme-4-btn-2-border: var(--blackMatt);
    --theme-4-btn-2-label: var(--white);
    --theme-4-links: var(--black);

    --theme-5-background: var(--blackMatt);
    --theme-5-text: var(--white);
    --theme-5-btn-1-background: var(--mint);
    --theme-5-btn-1-label: var(--blackMatt);
    --theme-5-btn-2-border: var(--mint);
    --theme-5-btn-2-label: var(--white);
    --theme-5-links: var(--white);
}

/* root element styles ------------------------------ */
:root {
    --btn-1-font-family: inherit;
    --btn-1-font-size: inherit;   
    --btn-1-font-weight: 700;
    --btn-1-line-height: inherit;
    --btn-1-letter-spacing: inherit;
    --btn-1-text-transform: inherit;
    --btn-1-text-decoration: inherit;
    --btn-1-color: var(--blackMatt);
    --btn-1-padding: 0.7rem 1.5rem;
    --btn-1-background: var(--mint);
    --btn-1-border: 2px solid var(--mint);
    --btn-1-border-radius: 999px;
    --btn-1-box-shadow: initial;

    --btn-1-color-hover: var(--blackMatt);
    --btn-1-background-hover: var(--mint);
    --btn-1-border-hover: 2px solid var(--mint);

    --btn-2-font-family: inherit;
    --btn-2-font-size: inherit;   
    --btn-2-font-weight: 700;
    --btn-2-line-height: inherit;
    --btn-2-letter-spacing: inherit;
    --btn-2-text-transform: inherit;
    --btn-2-text-decoration: inherit;
    --btn-2-color: var(--white);
    --btn-2-padding: 0.7rem 1.5rem;
    --btn-2-background: none;
    --btn-2-border: 2px solid var(--mint);
    --btn-2-border-radius: 999px;
    --btn-2-box-shadow: initial;

    --btn-2-color-hover: var(--white);
    --btn-2-background-hover: none;
    --btn-2-border-hover: 2px solid var(--mint);

    --input-font-family: inherit;
    --input-font-size: inherit;   
    --input-font-weight: inherit;
    --input-line-height: inherit;
    --input-letter-spacing: inherit;
    --input-text-transform: inherit;
    --input-text-decoration: inherit;
    --input-color: var(--blackMatt);
    --input-padding: 0.75rem 1.25rem;
    --input-background: rgba(221,221,221,0.2);
    --input-border: 1px solid var(--grey-xfaded);
    --input-border-radius: 0rem;
    --input-outline-focus: 3px solid var(--grey-faded);

    --select-font-family: inherit;
    --select-font-size: inherit;   
    --select-font-weight: inherit;
    --select-text-transform: inherit;
    --select-color: var(--black);
    --select-padding: 0.75rem 1.25rem;
    --select-background: var(--white);
    --select-border: 1px solid var(--black);
    --select-border-radius: 0rem;

    --textarea-font-family: inherit;
    --textarea-font-size: inherit;   
    --textarea-font-weight: inherit;
    --textarea-line-height: inherit;
    --textarea-letter-spacing: inherit;
    --textarea-text-transform: inherit;
    --textarea-text-decoration: inherit;
    --textarea-color: var(--blackMatt);
    --textarea-padding: 0.75rem 1.25rem;
    --textarea-background: rgba(221,221,221,0.2);
    --textarea-border: 1px solid var(--grey-xfaded);
    --textarea-border-radius: 0rem;
    --textarea-resize: none;

    --checkbox-radio-margin: 0.75rem;

    --label-font-family: inherit;
    --label-font-size: inherit;   
    --label-font-weight: inherit;
    --label-line-height: inherit;
    --label-letter-spacing: inherit;
    --label-text-transform: inherit;
    --label-text-decoration: inherit;
    --label-color: var(--black);

    --placeholder-font-family: inherit;
    --placeholder-font-weight: inherit;
    --placeholder-letter-spacing: inherit;
    --placeholder-text-transform: inherit;
    --placeholder-text-decoration: inherit;
    --placeholder-color: var(--black);
    --placeholder-opacity: 0.75;
}

/* image ------------------------------ */
img {
    max-width: 100%;
    vertical-align: middle;
}
img.protected {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* font scale-------------------------- */
:root {
    --font-scale: var(--desktop-font-scale-system);
}
@media only screen and (max-width: 1250px) {
    :root {
        --font-scale: var(--desktop-sml-font-scale-system);
    }
}
@media only screen and (max-width: 991px) {
    :root {
        --font-scale: var(--tablet-font-scale-system);
    }
}
@media only screen and (max-width: 768px) {
    :root {
        --font-scale: var(--mobile-font-scale-system);
    }
}
@media only screen and (max-width: 501px) {
    :root {
        --font-scale: var(--mobile-sml-font-scale-system);
    }
}
/* apply font scale */
:root {   
    /*--text-xs: calc(max(var(--text-sm) / var(--font-scale), var(--minimum-font-size)));
    --text-sm: calc(max(var(--text-base) / var(--font-scale), var(--minimum-font-size)));*/
    --text-xs: clamp(var(--minimum-font-size), calc(var(--base-font-size) * 0.75), var(--base-font-size));
    --text-sm: clamp(var(--minimum-font-size), calc(var(--base-font-size) * 0.85), var(--base-font-size));
    --text-base: calc(var(--base-font-size) * 1);
    --text-lg: calc(var(--base-font-size) * var(--font-scale));
    --text-xl: calc(var(--text-lg) * var(--font-scale));
    --text-2xl: calc(var(--text-xl) * var(--font-scale));
    --text-3xl: calc(var(--text-2xl) * var(--font-scale));
    --text-4xl: calc(var(--text-3xl) * var(--font-scale));
    --text-5xl: calc(var(--text-4xl) * var(--font-scale));
    --text-6xl: calc(var(--text-5xl) * var(--font-scale));
    --text-7xl: calc(var(--text-6xl) * var(--font-scale));
    --text-8xl: calc(var(--text-7xl) * var(--font-scale));
    --text-9xl: calc(var(--text-8xl) * var(--font-scale));
}

/* fonts size utility variables ------- */
.text-xs {
    font-size: var(--text-xs);
    line-height: var(--base-line-height);
}
.text-sm {
    font-size: var(--text-sm);
    line-height: var(--base-line-height);
}
.text-base {
    font-size: var(--text-base);
    line-height: var(--base-line-height);
}
.text-md {
    font-size: var(--text-md);
    line-height: var(--base-line-height);
}
.text-lg {
    font-size: var(--text-lg);
    line-height: var(--base-line-height);
}
.text-xl {
    font-size: var(--text-xl);
    line-height: var(--base-line-height);
}
.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--base-line-height);
}
.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--base-line-height);
}
h1.text-3xl, .h1.text-3xl,
h2.text-3xl, .h2.text-3xl,
h3.text-3xl, .h3.text-3xl,
h4.text-3xl, .h4.text-3xl,
h5.text-3xl, .h5.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--base-heading-line-height);
}
.text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--base-line-height);
}
h1.text-4xl, .h1.text-4xl,
h2.text-4xl, .h2.text-4xl,
h3.text-4xl, .h3.text-4xl,
h4.text-4xl, .h4.text-4xl,
h5.text-4xl, .h5.text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--base-heading-line-height);
}
.text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--base-line-height);
}
h1.text-5xl, .h1.text-5xl,
h2.text-5xl, .h2.text-5xl,
h3.text-5xl, .h3.text-5xl,
h4.text-5xl, .h4.text-5xl,
h5.text-5xl, .h5.text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--base-heading-line-height);
}
.text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--base-line-height);
}
h1.text-6xl, .h1.text-6xl,
h2.text-6xl, .h2.text-6xl,
h3.text-6xl, .h3.text-6xl,
h4.text-6xl, .h4.text-6xl,
h5.text-6xl, .h5.text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--base-heading-line-height);
}
.text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--base-line-height);
}
h1.text-7xl, .h1.text-7xl,
h2.text-7xl, .h2.text-7xl,
h3.text-7xl, .h3.text-7xl,
h4.text-7xl, .h4.text-7xl,
h5.text-7xl, .h5.text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--base-heading-line-height);
}
.text-8xl {
    font-size: var(--text-8xl);
    line-height: var(--base-line-height);
}
h1.text-8xl, .h1.text-8xl,
h2.text-8xl, .h2.text-8xl,
h3.text-8xl, .h3.text-8xl,
h4.text-8xl, .h4.text-8xl,
h5.text-8xl, .h5.text-8xl {
    font-size: var(--text-8xl);
    line-height: var(--base-heading-line-height);
}
.text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--base-line-height);
}
h1.text-9xl, .h1.text-9xl,
h2.text-9xl, .h2.text-9xl,
h3.text-9xl, .h3.text-9xl,
h4.text-9xl, .h4.text-9xl,
h5.text-9xl, .h5.text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--base-heading-line-height);
}

/* fonts ------------------------------ */
html {
    font-family: var(--html-font-family);
    font-size: var(--text-base);
    font-weight: var(--html-font-weight);
    font-style: var(--html-font-style);
    line-height: var(--base-line-height);
    letter-spacing: var(--html-letter-spacing);
    text-transform: var(--html-text-transform);
    text-decoration: var(--html-text-decoration);
    color: var(--html-color);
}
h1,
.h1 {
    font-family: var(--h1-font-family);
    font-size: var(--text-4xl);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    line-height: var(--base-heading-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    text-decoration: var(--h1-text-decoration);
    color: var(--h1-color);
}
h2,
.h2 {
    font-family: var(--h2-font-family);
    font-size: var(--text-3xl);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    line-height: var(--base-heading-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-text-transform);
    text-decoration: var(--h2-text-decoration);
    color: var(--h2-color);
}
h3,
.h3 {
    font-family: var(--h3-font-family);
    font-size: var(--text-2xl);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    line-height: var(--base-heading-line-height);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    text-decoration: var(--h3-text-decoration);
    color: var(--h3-color);
}
h4,
.h4 {
    font-family: var(--h4-font-family);
    font-size: var(--text-xl);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    line-height: var(--base-heading-line-height);
    letter-spacing: var(--h4-letter-spacing);
    text-transform: var(--h4-text-transform);
    text-decoration: var(--h4-text-decoration);
    color: var(--h4-color);
}
h5,
.h5 {
    font-family: var(--h5-font-family);
    font-size: var(--text-lg);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    line-height: var(--base-heading-line-height);
    letter-spacing: var(--h5-letter-spacing);
    text-transform: var(--h5-text-transform);
    text-decoration: var(--h5-text-decoration);
    color: var(--h5-color);
}
.bold,
strong {
    font-weight: var(--bold-font-weight);
}
.italic,
em {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}
.decoration-none,
.decoration-none a {
    text-decoration: none;
}

/* color ------------------------------ */
.text-1,
.text-1 a {
    color: var(--txt-1-color);
}
.text-2,
.text-2 a {
    color: var(--txt-2-color);
}
.text-3,
.text-3 a {
    color: var(--txt-3-color);
}
.text-white,
.txt-white a,
.text-white,
.text-white a {
    color: var(--white);
}
.text-black,
.text-black a,
.text-black,
.text-black a {
    color: var(--black);
}
a {
    color: var(--link-color);
    transition: var(--transition);
}
a:hover {
    color: var(--link-color-hover);
}
body {
    background: var(--body-background-color);
}
.bg-1 {
    background: var(--background-color-1);
}
.bg-2 {
    background: var(--background-color-2);
}
.bg-3 {
    background: var(--background-color-3);
}
.bg-white {
    background: var(--white);
}
.bg-black {
    background: var(--black);
}
.bg-white-faded {
    background: var(--white-faded);
}
.bg-black-faded {
    background: var(--black-faded);
}

/* elements ------------------------------ */
hr {
    border-top: var(--hr-weight) solid var(--hr-color);
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    opacity: 1;
}
.border {
    border: var(--border);
}
.shadow {
    box-shadow: var(--shadow);
}
button, 
.btn-1,
.btn-2,
a {
    cursor: pointer;
}
button,
.btn-1,
.btn-2 {
    transition: var(--transition);
}
.btn-1 {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: var(--btn-1-text-decoration);
    color: var(--btn-1-color);
    padding: var(--btn-1-padding);
    background: var(--btn-1-background);
    border: var(--btn-1-border);
    border-radius: var(--btn-1-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-1:hover {
    color: var(--btn-1-color-hover);
    background: var(--btn-1-background-hover);
    border: var(--btn-1-border-hover);
}
a.btn-1 {
    display: inline-block;
}
.btn-2 {
    font-family: var(--btn-2-font-family);
    font-size: var(--btn-2-font-size);
    font-weight: var(--btn-2-font-weight);
    line-height: var(--btn-2-line-height);
    letter-spacing: var(--btn-2-letter-spacing);
    text-transform: var(--btn-2-text-transform);
    text-decoration: var(--btn-2-text-decoration);
    color: var(--btn-2-color);
    padding: var(--btn-2-padding);
    background: var(--btn-2-background);
    border: var(--btn-2-border);
    border-radius: var(--btn-2-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-2:hover {
    color: var(--btn-2-color-hover);
    background: var(--btn-2-background-hover);
    border: var(--btn-2-border-hover);
}
a.btn-2 {
    display: inline-block;
}
.btn-plain,
.btn-plain:hover {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: none;
    color: var(--black);
    padding: var(--btn-1-padding);
    background: none;
    border: var(--btn-1-border);
    border-color: transparent;
    border-radius: var(--btn-1-border-radius);
    box-shadow: none;
}
a.btn-plain {
    display: inline-block;
}
@media only screen and (max-width: 1100px) {
    .btn-1:hover {
        background: var(--btn-1-background);
        color: var(--btn-1-color);
        border: var(--btn-1-border);
    }
    .btn-2:hover {
        background: var(--btn-2-background);
        color: var(--btn-2-color);
        border: var(--btn-2-border);
    }
}

/* controls ------------------------------ */
input {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    letter-spacing: var(--input-letter-spacing);
    text-transform: var(--input-text-transform);
    text-decoration: var(--input-text-decoration);
    color: var(--input-color);
    padding: var(--input-padding);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
}
input[type="file"] {
    padding: 0;
}
input::file-selector-button {
    font-weight: bold;
    padding: var(--input-padding);
    border-top: none;
    border-right: var(--input-border);
    border-bottom: none;
    border-left: none;
    margin-right: 15px;
    line-height: var(--input-line-height);
}
select {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    letter-spacing: var(--select-letter-spacing);
    text-transform: var(--select-text-transform);
    text-decoration: var(--select-text-decoration);
    color: var(--select-color);
    padding: var(--select-padding);
    background: var(--select-background);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
}
select option {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    text-transform: var(--select-text-transform);
    color: var(--select-color);
}
textarea {
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    letter-spacing: var(--textarea-letter-spacing);
    text-transform: var(--textarea-text-transform);
    text-decoration: var(--textarea-text-decoration);
    color: var(--textarea-color);
    padding: var(--textarea-padding);
    background: var(--textarea-background);
    border: var(--textarea-border);
    border-radius: var(--textarea-border-radius);
    resize: var(--textarea-resize);
}
input[type='checkbox'], input[type='radio'] {
    text-align: left;
    min-width: initial;
    width: 20px;
    margin-right: var(--checkbox-radio-margin);
}
input:focus, textarea:focus, select:focus {
    outline: var(--input-outline-focus);
}
input[type='checkbox']:focus, input[type='radio']:focus {
    outline: none;
}
label {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    text-decoration: var(--label-text-decoration);
    color: var(--label-color);
}
::placeholder {
    font-family: var(--placeholder-font-family);
    font-weight: var(--placeholder-font-weight);
    letter-spacing: var(--placeholder-letter-spacing);
    text-transform: var(--placeholder-text-transform);
    text-decoration: var(--placeholder-text-decoration);
    color: var(--placeholder-color);
    opacity: var(--placeholder-opacity);
}

/* :disabled */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--grey);
    border: 1px solid var(--grey);
}

/* animation ------------------------------ */
html {
    scroll-behavior: smooth;
}

/* line height */
.line-height-1 {
    line-height: 1em;
}
.line-height-1-1 {
    line-height: 1.1em;
}
.line-height-1-2 {
    line-height: 1.2em;
}
.line-height-1-3 {
    line-height: 1.3em;
}
.line-height-1-4 {
    line-height: 1.4em;
}
.line-height-1-5 {
    line-height: 1.5em;
}
.line-height-1-6 {
    line-height: 1.6em;
}
.line-height-1-7 {
    line-height: 1.7em;
}
.line-height-1-8 {
    line-height: 1.8em;
}
.line-height-1-9 {
    line-height: 1.9em;
}
.line-height-2 {
    line-height: 2em;
}

/* cursor */
.cursor-pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-grab {
    cursor: grab;
}

/* list style */
.list-none {
    list-style-type: none;
}

/* border-radius */
.rounded {
    border-radius: 1rem;
}
.rounded-sm {
    border-radius: 0.25rem;
}
.rounded-m {
    border-radius: 0.5rem;
}
.rounded-lg {
    border-radius: 1.5rem;
}
.rounded-xl {
    border-radius: 2rem;
}
.rounded-2xl {
    border-radius: 3rem;
}
.rounded-999 {
    border-radius: 999px;
}

/* themes */
.theme-1 {
    background: var(--theme-1-background);
    color: var(--theme-1-text);
}
.theme-1 .btn-1 {
    background: var(--theme-1-btn-1-background);
    border-color: var(--theme-1-btn-1-background);
    color: var(--theme-1-btn-1-label);
}
.theme-1 .btn-2 {
    color: var(--theme-1-btn-2-label);
    border-color: var(--theme-1-btn-2-border);
}
.theme-1 a {
    color: var(--theme-1-links);
}

.theme-2 {
    background: var(--theme-2-background);
    color: var(--theme-2-text);
}
.theme-2 .btn-1 {
    background: var(--theme-2-btn-1-background);
    border-color: var(--theme-2-btn-1-background);
    color: var(--theme-2-btn-1-label);
}
.theme-2 .btn-2 {
    color: var(--theme-2-btn-2-label);
    border-color: var(--theme-2-btn-2-border);
}
.theme-2 a {
    color: var(--theme-2-links);
}

.theme-3 {
    background: var(--theme-3-background);
    color: var(--theme-3-text);
}
.theme-3 .btn-1 {
    background: var(--theme-3-btn-1-background);
    border-color: var(--theme-3-btn-1-background);
    color: var(--theme-3-btn-1-label);
}
.theme-3 .btn-2 {
    color: var(--theme-3-btn-2-label);
    border-color: var(--theme-3-btn-2-border);
}
.theme-3 a {
    color: var(--theme-3-links);
}

.theme-4 {
    background: var(--theme-4-background);
    color: var(--theme-4-text);
}
.theme-4 .btn-1 {
    background: var(--theme-4-btn-1-background);
    border-color: var(--theme-4-btn-1-background);
    color: var(--theme-4-btn-1-label);
}
.theme-4 .btn-2 {
    color: var(--theme-4-btn-2-label);
    border-color: var(--theme-4-btn-2-border);
}
.theme-4 a {
    color: var(--theme-4-links);
}

.theme-5 {
    background: var(--theme-5-background);
    color: var(--theme-5-text);
}
.theme-5 .btn-1 {
    background: var(--theme-5-btn-1-background);
    border-color: var(--theme-5-btn-1-background);
    color: var(--theme-5-btn-1-label);
}
.theme-5 .btn-2 {
    color: var(--theme-5-btn-2-label);
    border-color: var(--theme-5-btn-2-border);
}
.theme-5 a {
    color: var(--theme-5-links);
}