/*
Font: ARROWS
Author: Matt Mars
License: CC BY 4.0
*/
@font-face {
    font-family: "arrows";
    src: url("arrows.woff2");
}

body {
    width: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: black;
    color: white;
    font-family: sans-serif;
    font-size: 1.25em;
}

.body-main {
    background-color: rgb(8, 8, 8);
    width: 100vmin;
}

.info-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-top: 8px;
    margin-bottom: 8px;
}

.info-box {
    background-color: gray;

    margin: 4px;
    padding: 8px;

    background-color: rgb(32, 32, 32);
    border-color: rgb(64, 64, 64);
    border-style: dotted;
}

.cool-title-container {
    width: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "arrows";
    font-size: 4em;

    background: linear-gradient(0,rgba(42, 123, 155, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.nl-flag {
    width: 100vmin;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;

    color: black;
    background: linear-gradient(180deg, #C8102E 0%, #C8102E 33%, #FFFFFF 34%, #FFFFFF 66%, #003DA5 67%);
}

.map {
    width: 50%;
    flex-shrink: 0;
    aspect-ratio: 640 / 480;

    background: linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(8, 8, 8, 1)), url("map.png");
    background-size: cover;

    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    font-family: monospace;
    font-size: 4em;
}

.left-to-right-container {
    width: 100%;

    display: flex;
    justify-content: left;
    align-items: center;
}

.margin-for-text {
    margin: 16px;
}

small {
    color: gray;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

a:link { color: teal; }
a:visited { color: teal; }