/* Reset style -> aka, remove the padding/margin on elements you otherwise would have. */
* {
    margin: 0;
    padding: 0;
}

/* TYPOGRAPHY */
body {
    font-family: "Average Sans", sans-serif;
}
H1, H2, H3, H4 {
    font-family: "Fjalla One", sans-serif;
}

/* COLOURS */
.teal { background-color: #00968B; }
.marine { background-color: #1D756E; }
.mango { background-color: #FCB600; }
/* Yes, I love the Efteling <3  */
.piecks-geel { background-color: #f2cb65; }
.piecks-rood { background-color: #ac1a2f; }
.piecks-groen { background-color: #44687d; }
.strawberry { background-color: #E20041; }
.summer { background-color: #F8B300; }

/* COLORBAND (HEADER) */
#colorband {
    display: flex;
    height: 5px;
}
.band {
    width: auto;
    min-width: 12.5%;
}

/* HEADER */
#header {
    height: 2em;
    max-height: 2em;
    overflow: hidden;
    background: #f5f5f5;
    padding: 5px;
    border-bottom: 1px solid #d9d9d9;
}
#header-logo IMG {
    max-height: 2em;
    margin-left: 5px;
}

/* HOMEPAGE */
#homepage {
    #hero {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #hero-logo {
        margin-top: 5em;
        max-width: 960px;
        flex-basis: 50%;
        align-self: center;
    }
    #hero-logo IMG {
        max-width: 90%;
        align-self: center;
        margin-bottom: 2em;
    }

    #intro {
        display: flex;
        align-items: center;
        justify-content: center;
        .intro-text {
            max-width: 960px;
        }
        H1 {
            border-bottom: 5px solid #00968B;
        }
        margin-top: 4em;
        margin-bottom: 5em;
        text-align: center;
    }
    #guildlab-info {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        .info-header {
            max-width: 960px;
        }
        H1 {
            border-bottom: 5px solid #F8B300;
        }
    }
}