/**

In heel dit css document is alleen maar general styling te vinden, denk
aan dingen die op elke pagina zichtbaar zijn, zoals font sizing, kleur etc. 

*/

/* ------------------------------------------------------------- Achtergrondkleur */
body {
    background: linear-gradient(to bottom, #4c6977, #22333b);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------- Font */
* {
    font-family: 'Arial', sans-serif;
}

h2 {
    color: #e1bb80;
    font-size: 3em;   
}

h3 {
    font-size: 1.5em;
    margin-bottom: 5%;
}

p {
    font-size: 1em;
    color: #0A0908;
}

/* Dit is puur voor het logo en de naam op de home/index pagina */
.bedrijfsNaam {
    text-shadow: 1px 1px 3px #000000a1;
    margin-top: 0%; 
}

.logo {
    width: 10%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ------------------------------ MOBILE-FRIENDLY STYLES ------------------------------ */

/* Als het scherm kleiner is dan 768px (tablet/telefoon) */
@media (max-width: 768px) {

    h2 {
        font-size: 2.5em;
    }

    h3 {
        font-size: 1.2em;
    }

    p {
        font-size: 0.9em;
    }

    .bedrijfsNaam {
        font-size: 1.8em;
    }

    .logo {
        width: 20%;
    }
}

/* Als het scherm kleiner is dan 480px (mobiel) */
@media (max-width: 480px) {

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1em;
    }

    p {
        font-size: 0.8em;
    }

    .bedrijfsNaam {
        font-size: 1.6em;
    }

    .logo {
        width: 30%;
    }
}