* {
    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;
    }

    hr {
        border: none;
        /* outline: 1px solid green; */
        width: 256px;
        height: 15px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAf8AAAAWCAYAAADOzZVAAAAFf0lEQVR4Xu1d25HbMAz0/SaNpYoUkUJSRKpIY8nv5TQZzeh4BLGg8Fj66E9LNpcLYBegZ+SXx35tBjYDm4HNwGZgM9Bl4M/j8dpe+Pp4vFTQdcVyF0PJBipI22tuBjYDm4HNwGagx8DIVNnNv4fv3OOoQVjK/HsB8uyEVi2LzcGqkfPBLcWfSbTOnVqwHp+5O934MLy/xcLAijHWvIVh8m/r+ayNVPNHifIs3N7GM8SNJZErOJcKngnLgRHB45mL0po9g7ty6I2hxXE1S0kQIjBEGkNVA7DyJFiRh9ccYNFMNC+9TRVd13of6oFoo2Ke/C0APIUGXTd6zZ7gVgh8lbijccgSbRRPRl6w5MYIhycPHuKlcZaVR+1etvlbo/v//lWMVGpWznzTdKWijixDDnIavIT5t4H49v3n4/evH93s9AwKSyJriZgpkAiWMzCesZCkCMXjiWUmLyJihOLw3PucJdiM4cCLiNcdLKPPSryyNVUzOCPyUDPSUVMQFUP0e1epIQTntc6R+jGZP2LCEUJTsS5CdnQh9Yqm1/hEcN4rnoo4WEQ6gxuL4EbHhSVHEaF9BqxsJsaUixo3iBkheeR9DzI8RNcxsiekfqw4X17fXsjif18+9glf3j7avn+85/nqfX/2msd+ens93/fcb/tdFfvv7acX/9593vEfcZvNjVQDB8bonETyogIHmvsSP9m8aXhHeJiwMuJcJcZnDqyE94r11Ni7+Tht/hXGLxWut+GwJEW2uUn8buP/aO7Xxm/UFGhmM3udJUcR/M+Ala2xYjN/NjyzeXnXUJF1rfdE1Q9k/ogJRUzByLrPavw9samatCvioBVINia0ACPqYE/9Wjb4XF/FwBhxovXhrdezkV8JL4J1hlc3859ZnOlIl+0oKNvc0Kk/48RHK+hsbtjEFhGDjCZEi9NoWl5pwtpTvx7p3rE0G2/XXWRriM6gfEfEkf+xmmr+FSRJx6jRgsEiqsgxu3ez1Us9BEe2yWRjGh3pR+cjEhOv3//uiJO1iWc1hVUMjA0n2hxnaBaSxyw6X411aP5MJhwttOheM8yuouFCjSY6DlpBZHODCkVGXjzLJF2dQ2iua6eBWq5GXEeNNisfV8tJCS9jTqLczjZVJvPPOPJFxXZ2w1JBVq3b4sk2Nwsf1QWSzQ2aE1lCi+Lxro1ZE1sJ7ypY2XAyNiPPchLVmr/3KZ9o/ojQRogesq63uDEVFHKs7b1/rQGRiikah4YrshllOgnSJtDqpswySa+Ele3nCUajRTFla8VKQ40Fq2dOds0fFT7vgCLG791woHv1XhcVzGyxRJqPDC4Yjd+z8KzTNFODimBfCe8qWNlwosZfoReovlbWtFZHSLzveHD3CX8VTz1q1zyIqXxi2+jpWVrQZq/3OLh+l/UJTjM42J7id+4hExfyNK0DV0Y8pP1L/+iViUnKL0b+rFiP+ys0YCWcbE8Y1PSuwtc0TKPr0lMRvZ6W+M78e+aTJTKZgZFMNmuvvYBnmlu7/oiPagGUcjIClyX/M8yfMU+R3G3vqawrK142rKzN3zMYP1uDd83VjAYaMv8IoZWS+iqqUesyiao27Z88RU50n938RzGoNAOmPEUnFMn4W6GNzGdt2tJ4ZTMFRqNlxIQONafHRPmLln/o6c71vggdGpp/xIJIgNp/9fKeskYTXrZIZU62lqTrxb5CsJEO+C4uqxncXQ8VB6Y8/czmnxVvRBszhiOLTvS02etYGq2TWbyrmL/13/pQ3qB/9YsMJiLu3uaPkpNxn8RtJOcZ+1ppjc31StHKwcqQE5bmL0MjkSY5e3iaaUpZBhtrs+fNLWT+OeX2fhWG4qvY915zM7AZ2Ay0Qn8yEjUFIoxvTUZYWueefwX4FD67EPy0AAAAAElFTkSuQmCC);
        margin: 1rem auto;
        margin-top: 1.25rem;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        image-rendering: crisp-edges;
    }

    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;
        }
    }
}