/* ======================================================

GENERAL 

====================================================== */
/* kleurcodes 

donkergrijs: 60, 60, 69
grijs: 76, 76, 82
lichtgrijs: 141, 141, 141
geel: 255, 188, 63

*/ 

* {
	box-sizing: border-box;
}

body {
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    font-weight: 300;
    background-image: url(../images/achtergrond_tekening_geel.jpeg);
    color: white;
    line-height: 23px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1, h2 {
    font-size: 1.5rem;
    margin: 1rem 0 1rem 0;
}

img {
    margin: auto;
    max-width: 100%;
}

/* ICONEN */

.icon {
    color: rgb(255, 188, 63);
    margin: 0 15px 0 0;
}

/* CONTAINERS */

.container{
    max-width:1000px;
    margin: auto;
    padding: 1rem 0 1rem 0;
}

/* KNOPPEN */

.knop {
    color: rgb(60, 60, 69);
    background-color: white;
    padding: 0.2rem 1.5rem 0.2rem 1.5rem;
    border: solid;
    border-color: white;
    border-radius: 0.5rem;
    font-weight: 700;
    text-decoration: none;
}

.knop:hover {
    background-color:rgb(255, 188, 63);
    border-color:rgb(255, 188, 63);
    text-decoration: underline;
}

.knop:hover .icon {
    color: white;
}

/* HEADER */ 

#siteHeader {
    background-color: rgb(60, 60, 69);
    margin: 0 0 1rem 0;
}

#siteHeader .container {
	background-color: rgb(60, 60, 69);
}

#siteHeader nav {
    height: 75px;
    width: 100%;
    background-color: rgb(60, 60, 69);
    display: flex;
    justify-content: space-between;
}

.logoContainer {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
}

.logo {
    margin-left: 20px;
    max-height: 75px;
}

.navList {
    position: fixed;
    width: 100%;
    height: 0vh;
    top: 100px;
    background-image: url(../images/achtergrond_tekening_grijs.jpeg);
    float: right;
    text-align: center;
    transition: all .5s;
}

.navList li {
    display: none;
    line-height: 30px;
    margin: 60px 0;
    transition: all .5s;
}

.navList li a {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    padding: 30px 0;
}

.navList li a.active, .navList li a:hover {
    color:rgb(255, 188, 63);
    transition: 0.5s;
    border-bottom: 2px solid rgb(255, 188, 63);
}

.hamburgerKnop {
    display: block;
    font-size: 30px;
    color: white;
    float: right;
    line-height: 75px;
    margin-right: 40px;
    cursor: pointer;
}

#check {
    display: none;
}

#check:checked ~ .navList {
    height: 100vh;
}

#check:checked ~ .navList li {
    display: block;
}

/* CALL TO ACTION */

#siteCTA {
    background-color: rgb(76, 76, 82);
    padding: 1rem 2rem 3rem 2rem;
    text-align: center;
}

#siteCTA p {
    margin-bottom: 1rem;
}

/* FOOTER */

#siteFooter {
    background-image: url(../images/achtergrond_tekening_wit.jpeg);
    padding: 1rem;
    text-align: center;
}

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

#siteFooter .card:nth-child(3) li {
    display: inline;
    margin: 0 1rem 3rem 1rem;
}

nav ul {
    list-style: none;
}

nav ul li {
    margin-bottom: 1.5rem;
}

nav a {
    text-decoration: none;
    color: black;
}

nav a:hover {
    text-decoration: underline;
}

small {
    color: black;
}

/* =============================================

HOMEPAGE

=============================================== */

/* INTRODUCTIE */

#homeIntro {
    background-color: rgb(60, 60, 69);
    padding: 1rem 2rem 2rem 2rem;
    text-align: center;
}

#homeIntro h1 {
    font-size: 2rem;
}

#h1Small {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 0.25rem 0 0.5rem 0;
}

#homeIntro img {
    display: block;
}

#homeIntro p {
    margin-bottom: 2rem;
}

/* CMD OP DE HAN */

#homeCMD {
    background-color: rgb(76, 76, 82);
    padding: 0 2rem 0 2rem;
}

.cmdCard {
    margin-top: 3rem;
    padding: 0.75rem;
    text-align: center;
    background-color: rgb(60, 60, 69);
    /* hover animatie duurt .2s */
    transition: transform .2s;
}

/* wanneer je over de card hovert wordt het wat groter */
.cmdCard:hover {
    transform: scale(1.1);
}

#homeCMD a {
    color: white;
    text-decoration: none;
}

/* als je over de card hovert wordt alle tekst geel */
#homeCMD a:hover h2, #homeCMD a:hover p {
    color:rgb(255, 188, 63);
}

#hanLogo {
    margin: 2.5rem 0 -1.5rem 0;
}

/* PERSOONLIJKE PROJECTEN */

#homeProjects {
    background-color: rgb(60, 60, 69);
    padding: 0 2rem 0 2rem;   
}

#homeProjects .card:nth-child(3) {
    text-align: center;
    margin-bottom: 2rem;
}

#homeProjects p {
    margin-bottom: 2rem;
}

/* de slideshow, bestaande uit 4 verschillende afbeeldingen */

#slider {
    overflow: hidden;
}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    /* de hele slider animatie duurt 20s en gaat voor altijd door */
    animation: 20s slider infinite;
}

#slider figure img {
    width: 20%;
    float: left;
}

/* door keyframes te maken kun je bepalen wanneer in de animatie de afbeeldingen moeten verschuiven */
@keyframes slider {
    /* van 0% (van de 20 seconden) tot 20% afbeelding 1 */
    0% {
        left: 0;
    }
    20% {
        left: 0;
    }
    /* 5% tussen elke afbeelding voor de slide animatie */
    /* van 25% tot 45% afbeelding 2 */
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    /* van 50% tot 70% afbeelding 3 */
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    /* van 75% tot 95% afbeelding 4 */
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
    /* afbeelding 5 is dezelfde als afbeelding 1, voor een goede loop */
    100% {
        left: -400%;
    }
}

/* =============================================

CV PAGE 

=============================================== */

#cvHero img {
    width: 100%;
    height: auto;
}

/* via een media query ervoor zorgen dat mijn persoonlijke informatie op een scherm niet te zien is, maar alleen bij het printen */
@media screen {
    #cvHero .card:nth-child(2) {
        display: none;
    }
}

/* naam en leeftijd */

#cvPersonalia {
    background-color: rgb(60, 60, 69);
    padding: 0 2rem 0 2rem;
}

/* korte introductie over mij */

#cvOverMij {
    background-color: rgb(76, 76, 82);
    padding: 0 2rem 1.5rem 2rem;
}

/* timeline met onderwijs */

#cvOnderwijs {
    background-color: rgb(60, 60, 69);
    padding: 0 2rem 1.5rem 2rem;
}

#cvOnderwijs .gridContainer .card {
    margin-bottom: 2rem;
    border-left: solid;
    border-left-color:rgb(255, 188, 63);
    padding-left: 1rem;
}

#cvOnderwijs .gridContainer .card {
    border-left: solid;
    border-left-color:rgb(255, 188, 63);
    padding-left: 1rem;
}

/* lijst met vaardigheden */

#cvVaardigheden {
    background-color: rgb(76, 76, 82);
    padding: 0 2rem 1.5rem 2rem;
}

/* lijst met interesses */

#cvInteresses {
    background-color: rgb(60, 60, 69);
    padding: 0 2rem 1.5rem 2rem;
}

/* alle tags voor vaardigheden en interesses */

.tags li {
    display: inline;
    padding: 10px;
    margin: 5px;
    line-height: 60px;
    border: solid;
    border-color: white;
    border-radius: 20px;
}

/* knoppen om cv te downloaden en te printen */

#cvButtons {
    background-color: rgb(76, 76, 82);
    padding: 0 2rem 0 2rem;
    line-height: 60px;
    text-align: center;
    margin: 0 0 1rem 0;
}


/* ==============================================

CONTACTFORMULIER 

================================================ */

#contactFormulier {
    background-color: rgb(60, 60, 69);
    padding: 1rem 2rem 1rem 2rem;
}

form {
    background-color: rgb(76, 76, 82);
}

fieldset {
    margin: 1rem;
}

legend {
    font-size: 1.5rem;
    text-align: center;
    padding-top: 1rem;
}

.formWrapper {
    padding-top: 1rem;
}

fieldset input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: solid 1px white;
    padding: 0.5rem 0 0.5rem 0;
    color: white;
    font-family: 'Karla', sans-serif;
}

#bericht {
    border: solid 1px white;
}

::placeholder {
    color: rgb(141, 141, 141);
}

#verstuurKnop {
    text-align: center;
    padding: 2rem;
}

.versturen {
    max-width: 50%;
}

.inputToelichting {
    color: rgb(255, 188, 63);
}

.resultaatContainer {
    text-align: center;
    color:white;
    line-height: 50px;
    padding: 8.5rem;
    background-color: rgb(76, 76, 82);
}

/* ===============================================

DESKTOP VIEW 

================================================ */


@media (min-width: 1000px) {

    /* ==========================================================

    HOMEPAGE 

    ============================================================ */

    /* de header van hamburger menu naar links naast elkaar */

    .logoContainer {
        margin-left: 25px;
    }

    #siteHeader nav {
        height: 100px;
    }

    .hamburgerKnop {
        display: none;
    }

    .navList {
        position: relative;
        height: 100px;
        top: 0;
        background: none;
        float: right;
        text-align: right;
        margin-right: 25px;
        transition: none;
    }

    .navList li {
        display: inline-block;
        line-height: 100px;
        margin: 0 20px;
        transition: none;
    }

    .navList li a.active, .navList li a:hover {
        border: none;
        text-decoration: underline;
    }

    /* foto en tekst naast elkaar plaatsen i.p.v. onder elkaar */

    #homeIntro .container {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-gap: 1rem;  
    }
    
    #homeIntro .card:nth-child(1) {
        grid-column: 5 / span 3;
    }
    
    #homeIntro .card:nth-child(2) {
        grid-column: 9 / span 4;
    }

    /* de klikbare cards over de opleiding naast elkaar plaatsen i.p.v. onder elkaar */

    #homeCMD #cardContainer {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-gap: 1rem;  
    }

    #homeCMD .cmdCard:nth-child(1) {
        grid-column: 1 / span 7;
    }

    #homeCMD .cmdCard:nth-child(2) {
        grid-column: 10 / span 7;
    }

    /* de elementen uit de footer naast elkaar plaatsen i.p.v. onder elkaar */

    #siteFooter .container:nth-child(1) {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-gap: 1rem;
        max-height: 11rem;
    }

    #siteFooter .card:nth-child(1) {
        grid-column: 2 / span 3;
        margin-top: 3rem;
    }

    #siteFooter .card:nth-child(2) {
        grid-column: 6 / span 6;
    }

    #siteFooter .card:nth-child(3) {
        grid-column: 13 / span 4;
        margin-top: 3rem;
    }

    /* ====================================================

    CV 

    ==================================================== */

    /* de twee scholen in het stukje onderwijs naast elkaar */

    #cvOnderwijs .gridContainer {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-gap: 1rem;
    }

    #cvOnderwijs .gridContainer .card:nth-child(1) {
        grid-column: 1 / span 8;
    }

    #cvOnderwijs .gridContainer .card:nth-child(2) {
        grid-column: 9 / span 8;
    }

    /* ====================================================

    CONTACT FORMULIER 

    ===================================================== */

    /* legend links plaatsen i.p.v. in het midden */

    legend {
        text-align: left;
    }

}