:root {
    --bg: lightblue;
}

body {
    margin: 0;
    background-color: var(--bg);
}

header {
    background-image: url(/assets/img/bg.webp);
    color: white;
    display: flex;
    flex-direction: row;
    padding: 30px 0;
    justify-content: center;
    align-items: center;
}

header div {
    display: flex;
    flex-direction: column;
}

header div h1,p {
    margin: 0;
}

header img {
    height: 100px;
}

nav {
    padding: 20px;
    background-color: white;
}

main {
    background-color: white; /* Darkmode users be damned */
    padding: 30px;
}

.teams {
    padding: 30px;
    display: grid;
    grid-template-columns: auto auto;
}

footer {
    align-items: center;
    background-color: var(--bg);
    display: flex;
    flex-grow: 1;
    min-height: 100px;
    height: auto;
    justify-content: center;
}

footer img {
    height: 50px;
}

/* Move this to own files??? */
@media (max-width: 600px) {

    header div {
        display: none;
    }

    main {
        padding: 0;
    }
    
    .post {
        flex-direction: column;
    }

    .teams {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .teams .team {
        flex-direction: column;
        width: 80%;
    }

    .teams img {
        size: 30px;
    }
}