:root {
    --bluek: #2b65b3;
}

@font-face {
    font-family: eurasia;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    src: url(fonts/Eurasia_Normal.ttf);
}

@font-face {
    font-family: eurasia;
    font-stretch: normal;
    font-style: italic;
    font-weight: normal;
    src: url(fonts/Eurasia_Italic.ttf);
}

@font-face {
    font-family: eurasia;
    font-stretch: normal;
    font-style: italic;
    font-weight: bold;
    src: url(fonts/Eurasia_Bold_Italic.ttf);
}

@font-face {
    font-family: eurasia;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    src: url(fonts/Eurasia_Bold.ttf);
}

* {
    font-family: eurasia;
}

.flex-main-container {
    display: flex;
    flex-direction: column;
    padding: 0.5%;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}

.flex-secondary-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 20px;
    column-gap: 20px;
}

.flex-group-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    outline: 1px solid grey;
    padding: 2.5%;
    box-shadow: 5px 5px 5px grey;
}

.flex-inner-group-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*outline: 1px solid grey;*/
    padding: 0.5%;
    row-gap: 10px;
    column-gap: 10px;
}

.flex-header {
    /*background: yellow;*/
    padding: 20px;
    height: auto;
    /*margin: 10px;*/
    text-align: center;
}

.flex-item {
    /* background: tomato; */
    padding-top: 1em;
    width: 300px;
    height: 2em;

    /* color: white; */
    /* font-weight: bold; */
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;

    box-shadow: 2px 2px 2px grey;
}

.button {
    text-decoration: none; /*remove hyperling underline*/
}

.button-green {
    background-color: green;
    color: white;
}

.button-blue {
    background-color: white;
    outline: 1px solid var(--bluek);
    color: var(--bluek);
    font-weight: bold;
}

.low-res {
    display: none;
}

h1 {
    text-align: center;
    margin: 0px;
    padding-bottom: 5px;
}

@media (max-width: 740px) {
    .hidden-mobile {
        display: none;
    }
    .low-res {
        display: inline;
    }
}

@media (max-width: 1200px) {
    .hidden-1280 {
        display: none;
    }
    .low-res {
        display: inline;
    }
}