/* Root font size (rem) */
html {
    font-size: 16px;
}

/* Set background color and font color for whole page */
body {
    background-color:   #1E3249;
    color: #FFA053;
}

/* Fonts, set as class for paragraphs */
.urbanist {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.fraunces {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
        font-variation-settings:
        "SOFT" 0,
        "WONK" 1;
}

/* Inverted colors for highlight strip, class for div */
.hilite {
    background-color: #FCF7A4;
    color: #187587;
    font-size: clamp(1.2rem, 3vw, 4rem);
}

/* Flexbox */
.container {
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
}

.container div {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;  
}

/* Remove margins from p inside div */
div p {
    margin: 0;
    padding: 0;
}

/* Font size for menu */
.menu {
    font-size: clamp(1.5rem, 5vw, 5rem);
}

/* Font size for submenu */
.submenu {
    font-size: clamp(0.8rem, 2.5vw, 2.8rem);
}

/* For smallest screens */
@media (max-width: 550px) {
    .submenu {
        flex-direction: column;
        font-size: 30px;
    }
    .submenu div {
        padding: 0 0 30px 0;
    }
}

.submenu-small {
    font-size: clamp(0.8rem, 0.6em, 0.6em);
    padding: 0.3em 0 0 0;
}

/* Inverted color and background box for highlights - used with <span> or <p> */
.invert {
    color: #1E3249;
    line-height:150%;
    width: 40%;
    background-color:#FFA053;
    padding: 5px 0px 5px 0px;
    border-radius: 15px;
    display: inline-block;
}

a {
    color:inherit;
}

/* For later
.menu p {
    text-align: left;
}
*/

/* Class for img, */
.logo-size {
    width: clamp(10px, 100%, 700px);
}

.icon-size {
    height: 0.8em;
    padding-right: 0.4em;
}

.icon-size2 {
    height: 0.8em;
    padding-left: 0.4em;
}