:root {
    --bg_light: #EFEEFF;
    --bg_dark: #232233;
    --v2_1: #7076F1;
    --sg_1: #3D3E35;
}

.header {
    padding: 25px;
}

.footer {
    margin-top: 25px;
    padding: 25px;
    background-color: var(--bg_dark);
    color: white;
    font-size: 8pt;
}

.row {
    width: 100%;
    height: 100%;
    display: table-row;
}

.col-left, .col-right {
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: middle;
}

body {
    background: url(assets/background.png) no-repeat center;
}

.textbox {
    padding-left: 40px;
    margin-right: 40px;
    width: 75%;
    float: right;
    background: white;
    outline: 20px solid var(--v2_1);
    outline-offset: 5px;
}

img {
    width: 75%;
    float: left;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

#footer-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

.footer-textbox {
    background: white;
    color: black;
    border-radius: 0.25 rem;
    border-radius: 25px;
    padding: 16px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 600px) {
    .col-left, col-right {
        width: 100%;
    }
}

body {
    background-color: var(--bg_light);
}

h1 {
    font-family: Inter, sans-serif;
    color: var(--v2_1);
}

h2 {
    font-family: Inter, sans-serif;
    color: var(--v2_1);
}

h3 {
    font-family: "Josefin Sans", sans-serif;
    color: black;
}

p {
    font-family: "Josefin Sans", sans-serif;
}

td {
    font-family: "Josefin Sans", sans-serif;
}

a:link {
    color: white;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
}

a:visited {
    color: white;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
}

a:hover{
    color: var(--v2_1);
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
}

h-menu {
    font-size: 12pt;
}