@font-face {
    font-family: "PT Sans Narrow";
    src: url('./font/PTSansNarrow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    --page-max-width: 1000px;
    --page-max-inner-width: 960px;

    --border-radius: 8px;

    --page-background: #4185eeff;
    --font-main: "PT Sans Narrow", sans-serif;

    --color-text: #3a3a3a;
    --color-text-alternate: #e6e6e6;

    --color-text-menu: #ffffff;
    --color-white: #fefefeff;
    --color-white-faded: #fefefe73;
    --color-white-transparent: rgba(255, 255, 255, 0.329);

    --color-grey-darkest: hsl(0, 0%, 40%);
    --color-grey-darker: hsl(0, 0%, 50%);
    --color-grey-dark: hsl(0, 0%, 60%);
    --color-grey: hsl(0, 0%, 70%);
    --color-grey-light: hsl(0, 0%, 90%);
    --color-grey-lighter: hsl(0, 0%, 95%);
    --color-grey-faded: hsla(0, 0%, 95%, 0.5);

    --color-green-darkest: hsl(66, 60%, 28%);
    --color-green-darker: hsl(66, 60%, 38%);
    --color-green-dark: hsl(66, 60%, 48%);
    --color-green: hsl(66, 60%, 58%);
    --color-green-light: hsl(66, 60%, 68%);
    --color-green-lighter: hsl(66, 60%, 78%);
    --color-green-faded: hsla(66, 60%, 78%, 0.5);

    --color-blue-darker: hsl(223, 84%, 39%);
    --color-blue-dark: hsl(223, 84%, 49%);
    --color-blue: #3f70ee;
    --color-blue-light: hsl(223, 84%, 69%);
    --color-blue-lighter: hsl(223, 84%, 79%);
    --color-form-field: hsl(223, 78%, 86%);
    --color-blue-faded: hsla(223, 83%, 79%, 0.5);

    --color-gold-darker: #7a6000;
    --color-gold-dark: #ad8800;
    --color-gold: hsl(47, 100%, 44%);
    --color-gold-light: hsl(47, 100%, 54%);
    --color-gold-lighter: hsl(47, 100%, 64%);
    --color-gold-faded: hsla(47, 100%, 64%, 0.5);

    --color-eco-green-darker: #4c5e26;
    --color-eco-green-dark: #698235;
    --color-eco-green: hsl(80, 42%, 46%);
    --color-eco-green-light: hsl(80, 42%, 56%);
    --color-eco-green-lighter: hsl(80, 42%, 66);
    --color-eco-green-faded: hsla(80, 42%, 66%, 0.5);

    --color-forest-green-darker: hsl(100, 41%, 07%);
    --color-forest-green-dark: hsl(100, 41%, 17%);
    --color-forest-green: hsl(100, 41%, 27%);
    --color-forest-green-light: hsl(100, 41%, 37%);
    --color-forest-green-lighter: hsl(100, 41%, 47%);
    --color-forest-green-faded: hsla(100, 41%, 47%, 0.5);

    --color-red: hsl(359, 79%, 51%);
    --color-red-dark: hsl(359, 79%, 41%);
    --color-red-light: hsl(359, 79%, 61%);
    --color-red-faded: hsla(359, 79%, 51%, 0.5);

    --input-border-color: var(--color-blue-dark);
    --focus-color: var(--color-red);
    --select-arrow-color: var(--input-border-color);

    --font-size-xxsmall: .5rem;
    --font-size-xsmall: .75rem;
    --font-size-small: 1.13rem;
    --font-size-nav: 1.25rem;
    --font-size-default: 1rem;
    --font-size-normal: 1.5rem;
    --font-size-large: 1.75rem;
    --font-size-xlarge: 2rem;
    --font-size-xxlarge: 2.25rem;

    --h1-size: 5rem;
    --h2-size: 3rem;
    --h3-size: 2rem;
    --h4-size: 1.75rem;
    --h5-size: 1.5rem;

    --icon-size-xxsmall: 12px;
    --icon-size-xsmall: 16px;
    --icon-size-small: 18px;
    --icon-size-default: 22px;
    --icon-size-large: 28px;
    --icon-size-xlarge: 32px;
    --icon-size-xxlarge: 36px;

    box-sizing: border-box;

}

body,
html {
    background-color: var(--page-background);
    font-family: var(--font-main);
    margin: 0;
    color: var(--color-text);
}


s-wrapper {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    opacity: 1;

    transition: opacity 0.2s ease-in-out;

    background-color: #ffffff;
    ;

    z-index: 5000;
    pointer-events: none;

    &.fade-in {
        opacity: 0;
    }

}


/** TEXT STYLES **/

h1,
h2,
h3,
h4,
h5 {
    color: var(--color-forest-green);
    font-weight: normal;
    line-height: 1;

    margin: 0;

    &.center {
        text-align: center;
    }
}

h1 {
    font-size: var(--h1-size);
    margin: 0;
    padding: 0rem 0rem 0.7rem;
}

h2 {
    font-size: var(--h2-size);
}

h3 {
    font-size: var(--h3-size);
    margin: 0rem 0 0.1rem;
}

h4 {
    font-size: var(--h4-size);
    margin: 0rem 0 .5rem;
}

h5 {
    font-size: var(--h5-size);
    margin: 0rem 0 0.1rem;
    font-weight: bold;
}

p {
    font-size: var(--font-size-normal);
    margin-top: 0;

    &.left {
        text-align: left;
    }

    &.small {
        font-size: var(--font-size-small);
    }

    h2+& {
        margin-top: 1rem;

    }
}

ul {
    margin: 1rem 0 0;
}

a.btn {
    display: inline-block;
    line-height: 1.5;
    font-size: var(--font-size-normal);
    text-decoration: none;
    color: var(--color-text-menu);
    background-color: var(--color-blue);
    padding: 0.5rem 1.5rem 0.6rem;
    border-radius: 2rem;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;

    &:hover {
        background-color: var(--color-blue-light);
    }
}

div.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--page-background);

    background: #4071EEFF;
    background: radial-gradient(circle, rgba(64, 113, 238, 1) 0%, rgba(114, 150, 242, 1) 100%);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

sc-icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    &.add-margin-right {
        margin-right: 0.5rem;
    }
}

span {

    &.icon {
        box-sizing: border-box;
        font-family: icons;
        text-transform: none;
        font-style: normal;
        line-height: 1;
        font-size: var(--icon-size-default);
        padding: 0;
        margin: 0;
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.add-margin-right {
        margin-right: 0.5rem;
    }

    &.my-home {
        color: var(--color-red-light);
    }
}

.hidden {
    display: none;
}

/* Responsive breakpoints 
    Switch to smaller fonts: 800px
    Switch to even smaller fonts: 680px
    Switch to Single column layout: 540px
    mobile: 420px
    tiny: 320px
*/

@media only screen and (max-width: 800px) {
    :root {
        --h1-size: 4rem;
        --h2-size: 3rem;
        --h3-size: 2rem;
        --h4-size: 1.75rem;
        --h5-size: 1.25rem;

        --font-size-xsmall: .75rem;
        --font-size-small: 1rem;
        --font-size-normal: 1.25rem;
        --font-size-large: 1.5rem;
        --font-size-xlarge: 2rem;

    }
}

@media only screen and (max-width: 680px) {
    :root {
        --h1-size: 3.25rem;
        --h2-size: 2.5rem;
        --h3-size: 2rem;
        --h4-size: 1.5rem;
        --h5-size: 1rem;

        --font-size-xsmall: .5rem;
        --font-size-small: .75rem;
        --font-size-normal: 1rem;
        --font-size-large: 1.25rem;
        --font-size-xlarge: 1.5rem;
    }
}

@media only screen and (max-width: 540px) {
    :root {
        --h1-size: 3.25rem;
        --h2-size: 2.5rem;
        --h3-size: 2rem;
        --h4-size: 1.5rem;
        --h5-size: 1rem;

        --font-size-xsmall: .5rem;
        --font-size-small: .75rem;
        --font-size-normal: 1rem;
        --font-size-large: 1.25rem;
        --font-size-xlarge: 1.5rem;
    }
}

@media only screen and (max-width: 420px) {
    :root {
        --h1-size: 2.25rem;
        --h2-size: 1.75em;
        --h3-size: 1.5rem;
        --h4-size: 1.25rem;
        --h5-size: 1rem;

        --font-size-xsmall: .5rem;
        --font-size-small: .75rem;
        --font-size-normal: 1rem;
        --font-size-large: 1.25rem;
        --font-size-xlarge: 1.5rem;
    }
}