* {
    --mystic-gold: #D4AF37;
    --mystic-amber: #3B1E08;
    --mystic-mud: #4A3F35;
    --mystic-salmon: #F4A261;
    --mystic-white: #E0E0E0;
    --mystic-grey: #2E2E2E;
    --mystic-black: #1A1A1A;
    text-align: center;
    font-family: 'Times New Roman', Times, serif; /*Ik weet dat dit al het standaardlettertype is, maar mijn browserinstellingen overschrijven dat met het lettertype uit mijn brandbook. Deze ene regel staat er dus voor mijzelf; u kunt hem negeren.*/
    /* margin: 0; */
}

body {
    margin: 0 auto;
    background-color: var(--mystic-black)
}

ul {
    list-style: none;
    padding-left: 0;
}

h1 {
    font-size: 40px;
    color: var(--mystic-gold);
}
h2 {
    font-size: 32px;
    text-shadow: black 2px 2px 2px;
    line-height: 150%;
}

.main-header {
    background-color: var(--mystic-amber);
    padding: 1px 0 10px;
    font-weight:bold;
    
    a {
        text-decoration: none;
        color: var(--mystic-gold);
    }
    ul {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
}

section {
    padding: 40px 0;
}

.home-section {
    background-color: var(--mystic-mud);
    color: var(--mystic-white);

    .highlight {
        color: var(--mystic-salmon);
    }
}

.features-section li, .promo-section p, .reviews-section blockquote { /*boxes*/
    border: 1px var(--mystic-gold) solid;
    border-radius: 10px;
    box-shadow:  black 2px 2px 3px;
    margin: 10px auto;
}

.features-section {
    background-color: var(--mystic-grey);

    h2 {
        color: var(--mystic-gold);
    }
    li {
        color: var(--mystic-white);
        text-align: left;
        width: 450px;
        padding: 20px;
        background-color: var(--mystic-amber);
    }
}

.promo-section {
    background-color: var(--mystic-salmon);
    padding: 30px;

    p {
        font-size: 20px;
        font-weight: bold;
        color: var(--mystic-amber);
        background-color: var(--mystic-salmon);
        border-width: 3px;
        width: fit-content;
        padding: 80px 20px;
    }
}

.reviews-section {
    color: var(--mystic-gold);
    background-color: var(--mystic-mud);
    margin-bottom: 30px;

    blockquote {
        color: var(--mystic-white);
        text-align: left;
        width: 600px;
        padding: 20px;
        text-align: center;
        background-color: var(--mystic-amber);
        font-style: italic;
    }
}

.main-footer {
    background-color: var(--mystic-amber);
    padding: 1px;
    box-shadow: black 0px 0px 15px;
    color: var(--mystic-gold);

    a {
        color: var(--mystic-salmon);
    }
}