* 
{
    margin: 0;
    padding: 0;
}

*, 
*::after, 
*::before {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: 'Roboto Flex', Arial, sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
    color:  #333;
}

div.waitoverlay {
    opacity:    0.3; 
    background: #000; 
    width:      100%;
    height:     100%; 
    z-index:    1000;
    top:        0; 
    left:       0; 
    position:   fixed; 
    text-align: center;
}

h1 {
    font-size: 170%;
    margin: 0;
}

h1, h2 {
    font-family: 'Roboto Serif', Arial serif !important;
}

h1 {
    font-size: 140%;
    font-weight: 300;
    margin: 0;
}

h2 {
    font-size: 110%;
    font-weight: 200;
    margin: 0;
}

p {
    font-size: 90%;
    margin: 4px 0 8px 0;
}

a {
    color: rgb(0, 112, 161);
}

@media (max-width: 768px) {

    /* body {
        font-family: Arial, sans-serif !important;
    } */

    p {
        font-size: 100%;
        line-height: 1.5em;
        margin: 4px 0 8px 0;
    }

}