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;
}

/*================================================================
    #siteNav CSS voor structuur/lay-out
===================================================================*/

/* Ik heb hier gekozen om de grid op een net andere wijze toe te passen dan ik oorspronkelijk geleerd heb vanuit de opleiding.
Met de hup van een vriend van me die MBO-ICT op niveau 4 heeft afgerond, heb ik de tip gekregen om 3 'kolommen' toe te passen die een bepaalde 'fr'-breedte krijgen.
Hierbij heeft hij als extra tip gegeven om de middelste kolom (de kolom waarin mijn content komt) de meeste breedte te geven. 1fr staat namelijk gelijk aan 'een zoveelste, beschikbare ruimte van de grid (een 'fractie')' 
Door de middelste kolom de meeste breedte te geven, kan ik ervoor zorgen dat mijn content in mobile first netjes in het midden komt in een grid, terwijl links en rechts van de content ook een kleine witruimte overblijft. 

BELANGRIJK: Dit 'grid-trucje' pas ik veelvoudig toe bij meerdere elementen in alle html-pagina's (m.u.v. de printweergave van mijn CV-pagina). Ik wil niet telkens dezelfde toelichting bij een bepaalde coderegel neerzetten, dus vandaar dat ik de sitenote hier alvast vermeld.
Deze sidenote zal ik ook in een readme-bestand zetten, zodat daar ook duidelijk terug te vinden is dat dit trucje meerdere malen wordt toegepast. */
#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;
}

#siteNav .card:nth-child(1) {
    display: block;
    grid-column-start: 2;
    grid-column-end: 3;
    margin: 3rem;
}

#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);
}

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

#siteNav .active {
    font-weight: 700;
    text-decoration: underline;
}

/*================================================================
    #siteHero CSS voor structuur/lay-out
===================================================================*/

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

#siteHero .innerContainer {
    grid-column-start: 2;
}

/*================================================================
    #siteHero CSS voor vormgeving
===================================================================*/

#siteHero img {
    max-width: 100%;
    max-height: 100%;
    margin: 1.25rem 0 0 0;
}

#siteHero p:nth-child(1) {
    font-weight: 700;
    font-size: 1.5rem;
    font-family: 'Ubuntu', sans-serif;
}

#siteHero h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    margin: 0 0 1.25rem 0;
}

#siteHero p:nth-child(3) {
    font-weight: 400;
    font-size: 1.125rem;
}

/*================================================================
    #greeting CSS voor vormgeving lijntje voor de groet "Hi!"
===================================================================*/

#greeting {
    display: inline-block;
    width: 48px;
    height: 3px;
    margin: 0 0.625rem 0.3125rem 0;
    background-color: rgba(51, 51, 51, 1);
}

/*================================================================
    #boldName CSS voor vormgeving lijntje voor de groet "Hi!"
===================================================================*/

#boldName {
    display: inline-block;
    font-family: 'Rubik', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin: 20px 0 0 0;
}


/*  Mobile Only  */
/* Deze media query pas ik toe, zodat de icons van mijn socials alleen voor mobile screens in het midden van de pagina/grid uitgelijnd worden */
@media (max-width: 767px) {
    .gridSocials {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-gap: 0.3rem;
        grid-column-start: 2;
        margin-top: 1rem;
    }

    .gridSocials .card {
        grid-column-start: 2;
        justify-self: center;
        align-items: center;
    }

    .gridSocials .card a {
        padding: 10px;
    }

    .gridSocials .card a i {
        font-size: 2rem;
        color: rgba(51, 51, 51, 1);
    }
}

/*=== CSS voor "Briefly about me" ===*/

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

#brieflyAboutMe .card {
    grid-column-start: 2;
}

#brieflyAboutMe h1 {
    margin: 1.25rem 0;
    font-size: 4rem;
}

#brieflyAboutMe p {
    font-size: 1.125rem;
}

/* Mobile only */

@media (max-width: 767px) {
    #brieflyAboutMe .container {
        display: grid;
        grid-template-columns: 0.5fr 2fr 0.5fr;
        grid-gap: 0.3rem;
        justify-content: center;
        align-items: center;
    }
}

/*== CSS voor #projects ==*/

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

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

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

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

#projects .card:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: 4;
}

#projects h1 {
    font-size: 4rem;
    text-align: center;
    margin: 8rem 0 3rem 0;
}

#projects img {
    object-fit: cover;
    width: 100%;
    height: 12.5rem;
}

#projects h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 1rem 0 0 1rem;
}

#projects p {
    color: rgba(51, 51, 51, 0.65);
    margin: 0 0 3rem 1rem;
}

#projects a:hover {
    opacity: 65%;
    transition: ease-in 0.2s;
}

/*========= CSS voor #contact ==========*/

#contact h1 {
    font-size: 4rem;
    color: rgba(249, 249, 249, 1);
}

#contact .container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 0.3rem;
    background-color: rgba(51, 51, 51, 1);
}

#contact .card {
    grid-column-start: 2;
    grid-column-end: 3;
    margin: 8rem 0 3.75rem 0;
    text-align: center;
}

#contact .innerContainer {
    grid-column-start: 2;
    grid-column-end: 3;
}

#contact .formGridContainer {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 0.3rem;
    justify-items: center;
    align-items: center;
}

#contact .formGridContainer fieldset {
    grid-column-start: 2;
    grid-column-end: 3;
}

#contact .formGridContainer .formWrapper{
    grid-column-start: 2;
    grid-column-end: 3;
    margin: 1rem;
}

#contact .formGridContainer .formWrapper:nth-child(1) .fieldLabel {
    display: inline-block;
    font-weight: 600;
    margin: 1rem 0;
    color: rgba(249, 249, 249, 1);
}

#contact .formGridContainer .formWrapper:nth-child(1) .textField {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgba(249, 249, 249, 1);
    padding: 1rem 0;
    background-color: rgba(51, 51, 51, 1);
    font-family: 'Rubik', sans-serif;
    color: rgba(249, 249, 249, 1);
}

#contact .formGridContainer .formWrapper:nth-child(2) .fieldLabel {
    display: inline-block;
    font-weight: 600;
    margin: 1rem 0;
    color: rgba(249, 249, 249, 1);
}

#contact .formGridContainer .formWrapper:nth-child(2) .textField {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgba(249, 249, 249, 1);
    padding: 1rem 0;
    background-color: rgba(51, 51, 51, 1);
    font-family: 'Rubik', sans-serif;
    color: rgba(249, 249, 249, 1);
}

#contact .formGridContainer .formWrapper:nth-child(3) .fieldLabel {
    display: inline-block;
    font-weight: 600;
    margin: 1rem 0;
    color: rgba(249, 249, 249, 1);
}

#contact .formGridContainer .formWrapper:nth-child(3) .textField {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgba(249, 249, 249, 1);
    padding: 1rem 0;
    background-color: rgba(51, 51, 51, 1);
    font-family: 'Rubik', sans-serif;
    color: rgba(249, 249, 249, 1);
}

#submitButton {
    background-color: rgba(249, 249, 249, 1);
    border: none;
    color: rgba(51, 51, 51, 1);
    padding: 1rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    margin: 2rem 0 4rem 0;
}

#contact .submit {
    grid-column-start: 2;
    grid-column-end: 3;
    text-align: center;
}

#contact .submit .fieldLabel {
    display: none;
    /* Door display: none; toe te passen, zorg ik ervoor dat de field Label voor de label "Message" onzichtbaar wordt, zodat alleen de knop van de submit-button zichtbaar blijft op de website */
}

/*== CSS voor #siteFooter ==*/

#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;
}

/* #formFeedback CSS voor bevestiging.html */

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

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

#formFeedback .card:nth-child(1) p {
    font-size: 3rem;
    font-weight: 600;
}

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

#formFeedback .card:nth-child(2) h1 {
    font-size: 2rem;
    font-weight: 400;
    margin: 3rem 0 1rem 0;
}

/* Met de CSS-code zorg ik ervoor dat het verstuurde bericht van de gebruiker in het webformulier tussen twee lijnen in wordt weergegeven. 
Ik heb voor deze vormgeving gekozen, zodat de gebruiker een duidelijk onderscheid kan maken tussen hun eigen bericht en de tekst van de website */
#formFeedback .card:nth-child(2) p {
    border-top: 2px solid rgba(51, 51, 51, 1);
    border-bottom: 2px solid rgba(51, 51, 51, 1);
    padding: 1rem;
}

/* Tablets and larger screens  */

@media (min-width: 768px) {
    /* Styles for tablets and larger screens in landscape mode */
    
    /* #siteNav CSS Tablet screens */
    
    #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);
        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;
    }

    /* #siteHero CSS Tablet screens */

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

    #siteHero .innerContainer {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .gridDoubleColumn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem 0.3rem;
    }

    .gridSocials {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem;
    }

    .gridSocials .card {
        grid-column-start: 2;
        grid-column-end: 3;
        justify-self: center;
    }

    .gridSocials .card a i {
        font-size: 2rem;
        margin: 1rem
    }

    /*== #contact CSS ==*/

    #contact h1 {
        font-size: 4rem;
        color: rgba(249, 249, 249, 1);
    }
    
    #contact .container {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;
        background-color: rgba(51, 51, 51, 1);
    }
    
    #contact .card {
        grid-column-start: 2;
        grid-column-end: 3;
        margin: 8rem 0 3.75rem 0;
        text-align: center;
    }
    
    #contact .innerContainer {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    
    #contact .formGridContainer {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: 0.3rem;
        justify-items: center;
        align-items: center;
    }
    
    #contact .formGridContainer fieldset {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    
    #contact .formGridContainer .formWrapper{
        grid-column-start: 2;
        grid-column-end: 3;
        margin: 1rem;
    }
    
    #contact .formGridContainer .formWrapper:nth-child(1) .fieldLabel {
        display: inline-block;
        font-weight: 600;
        margin: 0 0.8rem 0 0;
        color: rgba(249, 249, 249, 1);
    }
    
    #contact .formGridContainer .formWrapper:nth-child(1) .textField {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 2px solid rgba(249, 249, 249, 1);
        padding: 1rem 0;
        background-color: rgba(51, 51, 51, 1);
        font-family: 'Rubik', sans-serif;
    }
    
    #contact .formGridContainer .formWrapper:nth-child(2) .fieldLabel {
        display: inline-block;
        font-weight: 600;
        margin: 0 1rem 0 0;
        color: rgba(249, 249, 249, 1);
    }
    
    #contact .formGridContainer .formWrapper:nth-child(2) .textField {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 2px solid rgba(249, 249, 249, 1);
        padding: 1rem 0;
        background-color: rgba(51, 51, 51, 1);
        font-family: 'Rubik', sans-serif;
    }
    
    #contact .formGridContainer .formWrapper:nth-child(3) .fieldLabel {
        display: inline-block;
        font-weight: 600;
        margin: 0 0.2rem 0 -1.6rem; /* ik 'cheat' hier door tegen de fieldLabel van de message-input te zeggen dat hij eigelijk 1.6rem terug naar links moet gaan. Op deze manier zorg ik ervoor dat de fieldLabel goed onder elkaar uitgelijnd blijft samen met de andere inputs en labels in het webformulier*/
        color: rgba(249, 249, 249, 1);
    }
    
    #contact .formGridContainer .formWrapper:nth-child(3) .textField {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 2px solid rgba(249, 249, 249, 1);
        padding: 1rem 0;
        background-color: rgba(51, 51, 51, 1);
        font-family: 'Rubik', sans-serif;
        margin: 0 0 0 0.8rem;
    }
    
    #submitButton {
        background-color: rgba(249, 249, 249, 1);
        border: none;
        color: rgba(51, 51, 51, 1);
        padding: 1rem;
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        margin: 2rem;
    }
    
    #contact .submit {
        grid-column-start: 2;
        grid-column-end: 3;
        text-align: center;
    }
    
    #contact .submit .fieldLabel {
        display: none;
    }

    /*== #siteFooter CSS ==*/

    #siteFooter .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.3rem;
        justify-content: center;
        align-items: center;
    }
    
    #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: block;
        margin: 1rem;
    }

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

/* Desktop screens */

@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;
    }
}