* {
    box-sizing: border-box;
}

html, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Rubik', sans-serif;
}

body {
    background-color: rgba(249, 249, 249, 1);
}

i, p, a, h1, h2, h3, h4, h5, h6 {
    color: rgba(51, 51, 51, 1);
    text-decoration: none;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.2rem;
}

p {
    line-height: 1.4rem;
}

/* ===== #siteNav CSS ===== */

/* Deze CSS definieert de grid voor de container van de navigatiebalk */
#siteNav .container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 0.3rem;
    justify-content: center;
    align-items: center;
    margin: 0 0 3rem 0;
}

/* Deze CSS definieert de positie voor de eerste 'card' van de container van #siteNav, in dit geval dus de logo van de website */
#siteNav .card:nth-child(1) {
    display: block;
    grid-column-start: 2;
    grid-column-end: 3;
    margin: 3rem;
}

/* Deze CSS definieert de positie voor de eerste 'card' van de container van #siteNav, in dit geval dus hyperlinks in de navigatiebalk die naar de andere pagina's van de website leiden */
#siteNav .card:nth-child(2) {
    display: block;
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    background-color: rgba(51, 51, 51, 1);
}

#siteNav a {
    color: rgba(249, 249, 249, 1);
}

#siteNav li {
    padding: 2rem 0;
    border-top: 0.1rem solid rgba(249, 249, 249, 1);
}

#siteNav li:nth-child(4) {
    padding: 2rem 0;
    border-bottom: 0.1rem solid rgba(249, 249, 249, 1);
}

/* Deze code zorgt ervoor dat bij het 'hoveren' met de muis over de hyperlinks in de navigatiebalk, de hyperlinks waarover 'gehoverd' wordt onderstreept worden. 
Onderstreepte teksten worden vaak als linkjes gezien in een website, dus vandaar dat ik voor deze text-decoration heb gekozen.  */
#siteNav a:hover {
    text-decoration: underline;
}

/* Deze CSS-code zorgt ervoor dat de hyperlink met de class 'active' in de HTML dikgedrukt en onderstreept weergegeven wordt, zodat de gebruiker kan zien bij welke pagina op de website hij/zij zich bevindt. 
Aangezien dit CSS-bestand gekoppeld is aan de HTML-pagina cv.html, heeft de hyperlink van 'CV' in de navigatiebalk de class 'active' gekregen in de HTML-pagina en wordt deze dus dikgedrukt en onderstreept weergegven in de navigatiebalk zodra de gebruiker zich op de CV-pagina bevindt. */
#siteNav .active {
    font-weight: 700;
    text-decoration: underline;
}

/* #profile CSS */

#profile .container {
    margin: 3rem;
}

#profile .card:nth-child(1) {
    margin: 3rem 0;
}

#profile .card:nth-child(2) {
    margin: 3rem 0;
}

#profile img {
    max-width: 100%;
    max-height: 100%;
}

#profile p {
    margin: 1.5rem 0;
    line-height: 1.4rem;
}

/* #education CSS */

#education .container {
    margin: 3rem;
}

#education h2 {
    margin: 1rem 0 0.5rem 0;
}

/* Deze CSS-code zorgt ervoor dat de periode van een opleiding (semi)-dikgedrukt wordt weergegeven in de website (bijv. 2018-2019 bij de opleiding HBO-Bedrijfskunde */
#education span {
    font-weight: 500;
}

/* #experience CSS */

#experience .card:nth-child(1) {
    margin: 3rem 0 0 0;
}

#experience .card:nth-child(2), #experience .card:nth-child(2) {
    margin: 1rem 0;
}

#experience .container {
    margin: 3rem;
}

/* Deze CSS-code maakt van de periodes van mijn werkervaringen een inline-block, zodat ik deze als block-elementen terwijl ze 'inline' zitten kan bewerken met CSS. 
De overige twee regels van deze CSS-code maakt de periodes (semi)-dikgedrukt en geeft ze een kleine margin aan de boven- en onderkant. Ik wilde zelf deze margins toepassen, omdat ik vond dat de teksten anders te dicht op elkaar zaten. */
#experience span {
    display: inline-block;
    font-weight: 500;
    margin: 0.2rem 0;
}

#experience a:hover {
    text-decoration: underline;
}

/* #skills CSS */

#skills .container {
    margin: 3rem;
}

#skills .card:nth-child(1) {
    margin: 3rem 0 0 0;
}

#skills .card:nth-child(2), #skills .card:nth-child(2), #skills .card:nth-child(3) {
    margin: 1rem 0 0.5rem 0;
}

#skills h2 {
    font-weight: 500;
    margin: 0 0 0.5rem 0;
}

/* #siteFooter CSS */

#siteFooter .container {
    background-color: rgb(238, 238, 238);
}

#siteFooter .card:nth-child(1) {
    margin: 0 7rem 0 0;
    padding: 0 7rem 0 0;
    text-align: left;
}

#siteFooter li {
    display: block;
    padding: 1rem;
    margin: 1rem 2rem;
}

#siteFooter li:nth-child(4) {
    padding: 1rem;
    margin: 1rem 2rem 0 2rem;
}

/* Tablets and larger screens  */

@media (min-width: 768px) {
    /* Styles for tablets and larger screens in landscape mode */

    #siteNav .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem;
        justify-content: center;
        align-items: center;
        margin: 0 0 3rem 0;
    }

    #siteNav .card:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 2;
        max-width: 7rem;
    }

    #siteNav .card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
        background-color: rgba(249, 249, 249, 1);
        text-align: right;
        margin: 0 1rem;
    }

    #siteNav ul li a {
        color: rgba(51, 51, 51, 1);
    }

    #siteNav li {
        display: inline-block;
        margin: 0 1rem;
    }
    
    #siteNav .active {
        font-weight: 700;
        text-decoration: underline;
    }

    #siteNav a:hover {
        text-decoration: underline;
    }

    #siteFooter .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem;
        justify-content: center;
        align-items: center;
        margin: 5rem 0 0 0;
    }
    
    #siteFooter .card:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 2;
    }
    
    #siteFooter .card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
        text-align: right;
        margin: 0 3rem;
    }
    
    #siteFooter li {
        display: inline-block;
        margin: 1rem;
    }

    #siteFooter li:nth-child(4) {
        display: inline-block;
        margin: 1rem;
    }
    
    #siteFooter img {
        margin: 1rem 0;
        max-width: 10rem;
    }

    /* #profile CSS */

    #profile .container {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;
    }

    /* .gridDoubleColumn zorgt ervoor dat de afbeelding en de tekst naast elkaar in een grid komen te staan
    bij schermen groter dan 768px. Bij schermen kleiner dan 768px zal deze grid niet van toepassing zijn
    en zullen de afbeelding en de tekst onder elkaar komen te staan (in mobile view). */
    #profile .gridDoubleColumn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem;
        justify-content: center;
        align-items: center;
    }

    #profile .gridDoubleColumn {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    #profile .gridDoubleColumn .card:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 2;
        margin: 0 2rem 0 0;
    }

    #profile .gridDoubleColumn .card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
        text-align: center;
    }

    /* #education CSS */

    #education .container {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;    
    }

    #education .card:nth-child(1) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    /* #experience CSS */

    #experience .container {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;
    }

    #experience .card:nth-child(1) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    #experience .card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    #experience .card:nth-child(3) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    /* #skills CSS */

    #skills .container {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;
    }

    #skills .card:nth-child(1) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    #skills .card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    #skills .card:nth-child(3) {
        grid-column-start: 2;
        grid-column-end: 3;
    }

}

@media (min-width: 1024px) {
    /* Styles for desktop screens */

    #siteFooter li {
        display: inline-block;
    }

    #siteFooter .card:nth-child(2) {
        margin: 0 1rem;
    }

     /* Ik pas hier nog een extra CSS-code voor de 4e child van li in #siteFooter toe, omdat deze li niet goed meeschaalde met de responsive design van de footer (hij verschoof dus niet correct bij verschillende schermgroottes. Hierdoor heb ik deze child apart genomen en voor deze child nog extra CSS-code toegepast, zodat deze ook goed meeschaalt bij verschillende schermgroottes. De 4e child van #siteFooter is de hyperlink 'Contact' in de footer.
    Door display: inline-block toe te passen, wordt de 4e child net zoals de rest van de hyperlinks in de footer een inline-block, waardoor deze de correcte margins en/of paddings meekrijgt vanuit de CSS-code voor de #siteFooter */
    #siteFooter li:nth-child(4) {
        display: inline-block;
    }
}