@font-face {
    font-family: 'Oxanium';
    font-weight: normal;
    src: url('/static/fonts/Oxanium-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Oxanium';
    font-weight: bold;
    src: url('/static/fonts/Oxanium-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: normal;
    src: url('/static/fonts/DejaVuSans-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    src: url('/static/fonts/DejaVuSans-Bold.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: "DejaVu Sans", Verdana, Arial, sans-serif;
}

a:link,
a:visited,
a:active {
    color: darkblue;
}

a:hover {
    color: darkred;
}

h1,
h2,
h3 {
    font-family: "Oxanium", Verdana, Arial, sans-serif;
}

h2 {
    color: black;
}

.centerlink.bp p {
    border: 1px solid #aa0000;
    background-color: white;
    color: #aa0000;
}


.centerlink.bp p:hover {
    color: white;
    border: 1px solid #aa0000;
    background-color: #aa0000;
}

.centerlink.bi p {
    border: 1px solid #000096;
    background-color: white;
    color: #000096;
}


.centerlink.bi p:hover {
    color: white;
    border: 1px solid #000096;
    background-color: #000096;
}


.centerlink.bt p {
    border: 1px solid #916721;
    background-color: white;
    color: #916721;
}


.centerlink.bt p:hover {
    color: white;
    border: 1px solid #916721;
    background-color: #916721;
}





header {
    background-color: white;
    border-bottom: 2px solid #d3d3d3;
}

header a:link,
header a:visited,
header a:active,
header a:hover {
    color: black;
    background-color: transparent;
}

header li:hover {
    color: white;
    background-color: #d3d3d3;
}

header li:hover a {
    color: black;
}

header > a:first-child {
    background-color: white;
}


/*header ul {
    display: grid;
    grid-template-columns: repeat(7, auto);
}
*/
footer {
    background-color: black;
}



.solutions, .constat {
    width: 400px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solutions {
    border: 2px solid green;
    background-color: lightgreen;
}

.constat {
    border: 2px solid red;
    background-color: lightcoral;
}

.constat > div:last-child, .solutions > div:last-child  {
    color: black;
    text-align: justify;
    display: grid;
    grid-template-columns: 50px auto;
}

.constat > div:first-child, .solutions > div:first-child {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    box-sizing: border-box;
    font-family: "Oxanium", Verdana, Arial, sans-serif;
    padding: 0.2rem;
}

.constat > div:first-child {
    background-color: red;
}

.solutions > div:first-child {
    background-color: green;
}

.constat > :last-child,  .solutions > :last-child {
    height: 100%;
}

.constat p, .constat ul, .solutions p, .solutions ul  {
    display: block;
    margin: 0;
    padding: 0.2rem;
}

.constat ul, .solutions ul {
    list-style-type: none;
}

.constat li::before, .solutions li::before {
    content: "• ";
}

footer a:link {
    text-decoration: none;
}

footer li {
    color: white;
}

footer a:link,
footer a:visited,
footer a:active {
    color: white;
    background-color: transparent;
}

footer a:hover {
    color: lightgray;
    background-color: black;
}

.full {
    border-top: 0.25rem dotted #d3d3d3;
}

.full-nopad {
    border-top: 0.25rem dotted #d3d3d3;
}

#tagline1,
#tagline2 {
    color: black;
    font-family: "Oxanium", Verdana, Arial, sans-serif;
}

.brand {
    display: grid;
    grid-template-rows: 105px 4rem max-content 250px;
    grid-auto-flow: column;
    column-gap: 1rem;
    row-gap: 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1350px) {
    .brand {
        grid-template-rows: repeat(3, 105px 4rem max-content 250px);
        grid-auto-flow: unset;
        column-gap: 0;
        row-gap: 1rem;
        max-width: 300px;
    }
}

.brand img {
    margin: auto;
    display: block;
}

.brand span {
    display: block;
    box-sizing: border-box;
    padding: 0.2rem;
    text-align: center;
    margin: auto;
    width: 100%;
    font-weight: bold;
}

.bp {
    color: #aa0000;
}

.bi {
    color: #000096;
}

.bt {
    color: #916721;
}

#intro {
    display: grid;
    grid-template-rows: 0 auto max-content auto auto 200px;
    align-content: space-evenly;
    row-gap: 5rem;
}