html,
body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

footer {
    border-top: 10px solid #606c38;
}

h1 {
    font-variant-caps: small-caps;
    letter-spacing: 0.1rem;
}

/* Touch friendly navigation */
a.navbar-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.custom-navbar {
    background-color: #606c38;
}

.custom-navbar .navbar-item,
.custom-navbar .navbar-link {
    color: white;
}

.custom-navbar .navbar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.navbar-item img {
    max-height: 2rem;
}

.is-markdown-content p {
    a {
        text-decoration: underline;
    }
}

.has-background-olive-leaf {
    background-color: #606c38;
}

.has-background-cornsilk {
    background-color: #fefae0;
}

.has-text-olive-leaf {
    color: #606c38;
}

.has-text-cornsilk {
    color: #fefae0;
}

.navbar-burger {
    color: white;
}

.has-radius {
    border-radius: 1rem;
}

.hero-banner {
    background-image: url('/static/img/banners/mobile/sunset.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.icon svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.website-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/*
The Quiz
*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-question {
    animation: fadeInUp 0.3s ease-out forwards;
}

/*
Media queries
*/

@media screen and (min-width: 769px) {
    .hero-banner {
        background-image: url('/static/img/banners/desktop/sunset.jpg');
    }

    .navbar-item img {
        max-height: 3rem;
    }

    .test-question {
        height: 180px;
    }
}

/* remove Bulma's mobile navbar background */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: transparent;
    }
}

@media (max-width: 500px) {
    .reverse-columns {
        flex-direction: column-reverse;
        display: flex;
    }
}

@media screen and (min-width: 1024px) {

    .navbar.is-spaced .navbar-link,
    .navbar.is-spaced a.navbar-item {
        border-radius: 50px;
    }
}