@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,GRAD,ROND@6..144,-10..0,25..151,1..1000,0..100,0..100&display=swap');

body, html {
    background-color: #bbbbbb;
    margin: 0px;
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: auto;
    font-style: normal;
    font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 0;
    color: #003082;
}

@media (prefers-color-scheme: light) {
    @supports (-webkit-tap-highlight-color: transparent) and (display: grid) {
        .header {
            width: 100%;
            padding-top: 0px;
            position: fixed;
            height: 60px;
            background: linear-gradient(0deg,rgba(187, 187, 187, 0) 0%, rgba(187, 187, 187, 1) 100%);

        }
    }
}

a {
    text-decoration: none;
    color: #003082;
}

.heroimage {
    width: 60%;
}

.spacer {
    height: 30px;
}

.greattitle {
    font-size: 90px;
    font-variation-settings:
    "slnt" 50,
    "wdth" 100,
    "GRAD" 100,
    "ROND" 87;
    color: #003082;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 30px;
    font-variation-settings:
    "slnt" 100,
    "wdth" 300,
    "GRAD" 100,
    "ROND" 0;
    color: #003082;
}

.copyright {
    font-size: 20px;
    font-variation-settings:
    "slnt" 100,
    "wdth" 300,
    "GRAD" 100,
    "ROND" 0;
    color: #003082;
}

.button {
    font-size: 14px;
    font-variation-settings:
    "slnt" 100,
    "wdth" 100,
    "GRAD" 100,
    "ROND" 10;
    color: #003082;
    width: fit-content;

    border: 2px solid #003082;
    padding: 10px;
    margin: 10px;
    margin-top: 30px;
}

.button:hover{
    background-color: #003082;
    color: #fff;
}

.buttonrow {
    display: flex;
    width: fit-content;
}

hr {
    border-bottom: 0px;
    border-color: #003082 !important;
}

.textbox {
    width: 90%;
    text-align: left;
}

@media (max-width: 768px) {
    .greattitle {
        font-size: 60px;
    }

    .subtitle {
        font-size: 25px;
    }

    .spacer{
        height: 10px;
    }

    .heroimage {
        width: 80%;
    }
}