@font-face {
    font-family: 'Josefin Sans';
    src: url('josefin-sans/JosefinSans-Regular.ttf');
}

:root {
    --primary-color: #2a5468;
    --secondary-color: #b4cfcd;
    --tertiary-color: #fbdb50;
    --highlight-color: #ff0000;
    --background-color: #ffffff;
}
* {
    font-family: 'Josefin Sans';
}
body {
    margin: 0 auto;
    min-width: 60%;
    max-width: 100%;
    width: 100ch;
}
h1 {color: var(--primary-color);}
h2 {
    color: var(--primary-color);
}
.grid-container {
display: grid;
gap: 2rem;
}
.grid-2x1 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 33vh;
}
.grid-2x3 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 33vh);
}
.grid-4x2 {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 33vh);
}
.grid-4x4 {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 33vh);
}

.hspan1-2 {
grid-row: auto / span 2;
}
.hspan2-2 {
grid-row: 2 / span 2;
}
.hspan1-3 {
grid-row: auto / span 3;
}
.hspan1-2 img,
.hspan1-3 img,
.hspan2-2 img {
}
.vspan3-2 {
grid-column: 3 / span 2;
}
.vspan3-2 img {
    width: 100%;
    height: auto;
}

.dark_blue {
    background-color: var(--primary-color);
}
.light_blue {
    background-color: var(--secondary-color);
}
.yellow {
    background-color: var(--tertiary-color);
}
.bodytext p {
    color: var(--primary-color);
}
.bodytext .socialmedia {
    color: var(--secondary-color);
}
.bodytext p {
    background-color: unset;
    border-left: var(--primary-color) 5px solid;
    margin: 0;
    padding: 0.7ch;
    font-size: 1.2rem;
}
.img-container {
    overflow: hidden;
    height: 100%;
}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#logo>* {
    height: 50%;
}
#logo h1 {
    text-align: center;
}
article.subheader {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}