* {
    box-sizing: border-box;
}

/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
    font-family: 'Space Grotesk', Arial, Helvetica, sans-serif;

    --primary-blue: #42658f;
}

html, body {
    margin: 0;
    padding: 0;
}

main {
    padding: 1rem;

    h1, h2, h3, h4 {
        margin: 1rem 0;
        text-transform: uppercase;
        font-weight: 600;
        color: #42658f;

        a {
            text-decoration: none;
            color: inherit;

            &:hover {
                color: inherit;
                background-color: inherit;
                text-decoration: underline;
            }
        }
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3, h4 {
        font-size: 1rem;
    }

    h4 {
        font-weight: normal;
    }

    p, li {
        margin: 1rem 0;
        line-height: 1.0;
    }

    ol ol {
        list-style: lower-latin;
    }

    a {
        color: black;

        &:hover {
            background-color: #42658f;
            color: white;
        }
    }
}



hr {
    border: none;
    border-top: 0.2rem solid #42658f;
    margin: 2rem 0;
}

.button {
    font: inherit;
    font-weight: 600;
    padding: 0.5rem;
    margin: 0.25rem;
    text-decoration: none;
    box-shadow: none;
    transition: all .25s ease;
    display: inline-block;

    background-color: #f0faff;
    color: #42658f;

    &:hover {
        box-shadow: 0 0 0 100px #2462 inset;
        background-color: #f0faff;
        color: #42658f;
    }

    &:active {
        transform: scale(95%);
    }

    &.primary {
        background-color: #42658f;
        color: white;

        &:hover {
            box-shadow: 0 0 0 100px #0003 inset;
        }
    }
}

main.fullpage-home {
    background-color: #42658f;
    color: white;
    min-height: 100vh;

    padding: 4rem 2rem;

    h1 {
        font-size: 3rem;
        margin-bottom: 1.5rem;
        font-weight: bold;
        color: white;
        text-transform: none;
        text-align: center;

        .inverse {
            background-color: white;
            color: #42658f;
            padding: 0 0.5rem;
        }
    }

    h2 {
        color: white;
        text-align: center;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    img {
        display: block;
        max-width: 168px;
        margin: 0 auto;
        margin-bottom: 2rem;

        border: 3px solid #273c56;

        box-shadow: 0.35rem 0.35rem #0004;
    }

    a {
        color: inherit;
    }

    p {
        font-size: 1.65rem;
        text-align: center;
        margin: 0.35rem 0;
    }

    ul {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul li {
        color: inherit;
        font-size: 1.5rem;
        display: block;
        margin: 0;
    }

    ul li:not(:last-child)::after {
        content: '·';
        margin: 0 1rem;
        display: inline-block;
    }
}

@media all and (max-width: 800px) {
    main.fullpage-home {
        padding: 2rem 1rem;

        img {
            max-width: 128px;
        }

        h1 {
            font-size: 2.5rem;
        }

        h2 {
            font-size: 1.25rem;
        }

        p, ul li {
            font-size: 1.15rem;
        }
    }
}