:root {
    --title-color: #fafafa;
    --topbar-color: #fafafa;
    --topbar-bg-color: #0d1c29;
    --footer-color: #fafafa;
    --footer-bg-color: #0d1c29;
    --box-bg-color: rgb(220, 221, 225);
    --button-bg-color: #fafafa;
    --button-color: #0d0003;
    --button-hover-bg-color: #0d1c29;
    --button-hover-color: var(--button-bg-color);

    --header-3-color: #f25c05;
}

body {
    font-family: sans-serif;
    font-size: 12pt;
    margin: 0px;
    padding: 0px;
}

.container {
    display: grid;
    grid-template-areas:
        "header"
        "content"
        "footer";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.container div.header {
    padding: 5px;
    grid-area: header;
    display: grid;
    grid-template-areas:
        "app-logo title company-logo";
    grid-template-columns: auto 1fr auto;
    background-color: var(--topbar-bg-color);
    color: var(--topbar-color);
}

.container div.header div.app-logo {
    grid-area: app-logo;
    display: flex;
    align-items: center;
}

.container div.header div.title {
    grid-area: title;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.container div.header div.company-logo {
    grid-area: company-logo;
    display: flex;
    align-items: center;
}

.container div.footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--footer-bg-color);
    color: var(--footer-color);
    height: 32px;
}

.container div.content {
    grid-area: content;
    display: flex;
    align-items: center;
    justify-content: center;
}


.content-display {
    display: grid;
    grid-template-columns: 350px 20px 400px;
}

.content-display div {
    padding: 5px;
}

.content-display a {
    text-decoration: none;
    color: var(--topbar-bg-color);
    font-style: bold;
}

.content-display a:hover {
    color: var(--header-3-color);
    font-style: bold;
}

.content-display div.image-container {
    padding: 10px;
    background-color: var(--topbar-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-display h1 {
    font-size: 36px;
}

.content-display h3 {
    color: var(--header-3-color);
}