@font-face {
    font-family: 'Alagard';
    src: url("/fonts/alagard.ttf") format("truetype");
    font-weight: normal;
    font-size: normal;
    font-display: swap;
}

a {
    color: maroon;
}

a:hover {
    box-shadow: 0px 4px 8px rgba(128, 0, 0, 0.8);
}

aside {
    display: flex;
    grid-area: sidebar;
    font-family: cursive;
    background-color: maroon;
    padding: 5px;
    text-align: center;
}

aside a {
    color: antiquewhite;
}

aside a:hover {
    box-shadow: 0px 4px 8px antiquewhite;
}


body {
    background-color: black;
    background-image: url("/assets/background.jpg");
    background-size: 50% auto;
    color: antiquewhite;
    font-family: serif;
    margin: 0 auto; /* THIS CENTERS IT IN THE MIDDLE OF THE SCREEN */
    max-width: 900px;
    padding: 0 20px; /* helps with mobile */
}

footer {
    background-color: black;
    border: 5px solid maroon;
    border-radius: 20px;
    padding: 0 20px;
    margin: 20px 0;
}

h1 {
    border: 5px solid maroon;
    background-color: maroon;
    font-family: 'Alagard', Georgia, 'Times New Roman', Times, serif;
    font-size: 50px;
    margin: 20px 0px;
    text-align: center;
}

h2 {
    background-color: antiquewhite;
    border: 3px solid antiquewhite;
    color: maroon;
    font-family: 'Alagard', Georgia, 'Times New Roman', Times, serif;
}

h3 {
    text-decoration: underline;
}

header { grid-area: header; }

main { grid-area: main; }

nav {
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
}

section {
    background-color: black;
    border: 5px solid maroon;
    border-radius: 20px;
    margin: 10px 0px;
    padding: 5px 20px;
}

.active {
    background-color: maroon;
    color: antiquewhite;
}

.column {
    flex: 1;
}

.container {
    display: grid;
    grid-gap: 10px;
    grid-template: 
        "header header"
        "sidebar main"
        / 150px 1fr;
}

.h-centre {
    display: flex;
    justify-content: center;
}

.nav-item {
    padding: 5px;
}

.no-underline {
    text-decoration: none;
}

.row {
    display: flex;
}

.v-centre {
    display: flex;
    align-items: center;
}