/* Root style - affects everything, including components that have a shadow DOM (they import root.css) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

html {
    /* background-color: #F1F1F1; */
    /* overflow: hidden; */
    background-color: hsl(205, 100%, 98%);
}


:root {

    /* Custom properties */
    /* --min-width: 300px; */
    /* Min body width (viewport can become narrower) */

    font-family: rooney-web, Georgia, Times New Roman, Times, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;

}

/* Set header font */
h1,
h2,
h3,
h4 {
    font-family: camingodos-web, sans-serif;
    text-transform: uppercase;
    color: #373a3c;
}

button {
    font-family: rooney-web, Georgia, Times New Roman, Times, serif;
    font-weight: 300;
    font-style: normal;
}

h2 {
    font-size: 1.8rem;
}

/* @media (max-width: 399px) {
    :root {
        font-size: 12px;
    }
} */

p {
    line-height: 1.5rem;
}

a, a:active, a:link, a:visited {
    text-decoration: none;
    font-weight: 500;
    color: inherit;
}

/* @media (min-width: 400px) and (max-width: 800px) { */

/* Scale base size linearly between 12-16px*/
/* :root { */
/* --font-max: 16; */
/* --font-min: 12; */
/* --font-delta: var(--font-max) - var(--font-min); */
/* max-min */
/* --range-min: 400; */
/* --range-max: 800; */
/* --pos-on-range: calc(100vw - var(--range-min)px / var(--range-max) - var(--range-min)); */
/* fontMin + fontDelta * position on range */
/* font-size: var(--font-min)px + var(--font-delta) * var(--pos-on-range); */
/* font-size: calc(12px + 6 * (100vw - 400px) / 400); */
/* } */
/* }  */

/* @media (min-width: 801px) {
    :root {
        font-size: 16px;
    }

    ;
} */
/* 
header-component:not(:defined) {
    display: block;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    }
}
*/