body {
    background: #f2efea;
    margin: 0;

    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1;
}

header {
    background: #fc7753;
    min-height: 1vh;
}

footer {
    background: #66d7d1;
    padding: 0 1vw;
    margin-bottom: 0;
    min-height: 2em;
}

/* Navbar */
.navbar {
    width: 100%;
}

.navbar-toggle-button,
.navbar-toggle-trigger {
    display: none;
    width: 0;
}

.navbar>ul {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
}

.navbar>ul>li {
    list-style-type: none;
    margin: 0;
    font-size: 3ex;
}

.navbar-item>a {
    text-decoration: none;
    font-weight: bold;
    outline: 0;

    color: black;
    padding: 0 2vw;
}

.navbar-item>a:hover {
    background: #fb5c32;
}

/* Remove dotted line around link */
.navbar-item>a,
.navbar-item>a:hover,
.navbar-item>a:active {
    outline: 0;
}

/* Different menu for smaller screens */
@media only screen and (max-width: 767px) {
    .navbar>ul {
        flex-direction: column;
    }

    .navbar-item,
    .navbar>ul>li {
        margin: 0;
    }

    .navbar-item>a {
        display: block;
        padding: 2vw;
    }

    .navbar-toggle-button {
        display: block;
        min-width: 25px;
        min-height: 25px;

        /* almost centered X */
        text-align: center;
        line-height: 5vw;
        width: 5vw;
        height: 5vw;

        padding: 1vw;
        font-size: 4vh;
        background-color: #fb5c32;
        border: none;
        cursor: pointer;
        align-self: flex-start;
    }

    .navbar-toggle-trigger~li {
        display: none;
    }

    .navbar-toggle-trigger:checked~li {
        display: block;
    }
}