/* K E E T A */

/* Roboto Flex + Roboto Slab */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');


/* Structure */

header {
    padding-top: var(--spacing-1);
}

header div {height: 16.5vh;
    max-height: 283px;
}

main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-1);
}

#menu-wrapper {
    max-width: 250px;
    margin: auto;
}

#menu-wrapper li {list-style: none;}

#menu-wrapper img.logo {margin: var(--spacing-4) var(--spacing-4) var(--spacing-6) -6px;}

#menu-wrapper img.social {margin: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;}

.logo {
    width: var(--spacing-9);
}

.social {
    width: var(--spacing-6);
    margin: var(--spacing-2) var(--spacing-2) var(--spacing-1) 0px;
}

.item {
    background-color: inherit;
}

nav li {
    margin-bottom: var(--spacing-2);
}

nav li a {
    text-decoration: none;
    background-color: #ede2df;
    padding: 6px 8px 6px 8px;
    letter-spacing: 0.3;
}

footer nav li a {
    font-weight: 700;
}

footer nav ul {
    margin-left: 0;
}

footer h2 {margin-top: 0;}



/* Type */

body {
    font-family: "Roboto Flex", sans-serif;
}


h1 {
    font-size: calc(1rem * 1.333 * 1.333);
    font-family: "Roboto Slab", sans-serif;
    margin-bottom: 2px;
}

h2 {
    font-size: calc(1rem * 1.333);
    font-family: "Roboto Slab", sans-serif;
    margin-bottom: 2px;
    margin-top: 1.33rem;
}


h3 {
    font-size: 1rem;
    font-family: "Roboto Flex", sans-serif;
    font-weight: 700;
}