html {
    /* gebruik montserrat als standaard lettertype */
    font-family: 'Montserrat', sans-serif !important;

}

/* Grid-layout van de homepage */
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 109px 1fr;
    grid-template-areas: 
        "header"
        "content";

    background-color: #D7E9FB;
}

/* specificeert waar .mainheader in grid-layout moet komen */
.mainHeader {
    grid-area: header;

    background-color: #ffffff;
}

/* Grid-layout van de navigatie */
.mainNav {
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* plaatsing van Logo in grid-layout van navigatie */
.mainNav .logo {
    justify-self: start;
    display: grid;
    align-items: center;
    margin: 0 20px;
}

/* plaatsing van Logo afbeelding*/
.mainNav .logo img {
    height: 40px;
    align-items: center;
}

/* Grid-layout van profiel*/
.mainNav .profiel {
    justify-self: end;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: 24px;
}

/* plaatsing van profiel afbeelding */
.mainNav .profiel .profielFoto img {
    height: 40px;
}

/* Draait het uitklapicoon van het profiel */
.mainNav .profiel .profielUitklap img {
    transform: rotate(90deg);
}

/* specificeert waar .mainContent in grid-layout moet komen */
.mainContent {
    grid-area: content;
}

/* Grid-layout van de dashboard */
.dashboard {
    display: grid;
    grid-template-columns: 1fr 60% 1fr;
    grid-template-areas: 
    ". content beloning";

    padding: 50px 0;
}

/* specificeert waar .dashboardContent in grid-layout moet komen */
.dashboardContent {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 130px auto;

    row-gap: 16px;

    padding: 32px 24px 16px 24px;
}

/* Stijl van de dashboard koptekst */
.dashboardHeaderText {
    font-size: 45px;
    font-weight: bold !important;
    color: white;
    font-style: italic;

    display: grid;
    align-items: end;
}

/* grid-layout van de dashboardtegels */
.dashboardTegels {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 24px;
}

/* grid-layout van de tegels zelf */
.dashboardTegels ul {
    display: grid;
    /* hokus pokus formule, voor elke kolom moet er 1/4 van de totale column-gap er van af. */
    grid-template-columns: repeat(4, calc(25% - 24px * 3 / 4)); 
    grid-template-rows: 1fr;
    column-gap: 24px;
}

/* stijl van de tegels */
.dashboardTegels ul li {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 24px;
}

/* verwijderd de standaard onderlijning van de a tegels */
.dashboardTegels ul li a {
    text-decoration-line: none;
}

/* grid-layout van de tegelinhoud */
.dashboardTegelContent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

/* stijl van de tegelicoon */
.dashboardTegelImage {
    width: 100%;
    padding: 48px;
    padding-bottom: 16px;
    box-sizing: border-box;
}

/* stijl van de tegeltekst h2 */
.dashboardTegelText {
    text-align: center;
    color: rgb(11, 9, 9);
    font-family: "Montserrat-Bold";
    padding-bottom: 16px;
}

/* stijl van de tegeltekst p */
.dashboardTegelText p {
    color: #707070;
    margin-top: 16px;
    font-size: 14px;
    font-weight: normal;
}

/* stijl van de groene tegel */
.dashboardTegels ul li.dashboardTegelGroen {
    background-color: #74B82A;
    color: white;
}

/* stijl van de groene tegeltekst */
.dashboardTegels ul li.dashboardTegelGroen .dashboardTegelText,
.dashboardTegels ul li.dashboardTegelGroen .dashboardTegelText p {
        color: white;
}

/* specificeert waar .dashboardAchtergrond in grid-layout moet komen
Grid-layout dashboard achtergrond */
.dashboardAchtergrond {
    grid-area: content;
    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    
    background-color: #D2E2F2;
}

/* gradient achtergrond afbeelding */
.dashboardAchtergrondImage {
    /* verbergt overflow van het element */
    overflow: hidden;    

    /* zorgt voor een gradient van beneden naar boven */
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75)), url("/images/dashboard_Banner.jpeg");

    background-size: cover;
    background-position: 0% 50%;
}

/*  verbergt de afbeelding (de afbeelding staat in de background, 
    door de afbeelding nog wel te bewaren word de toegankelijkheid (alt) gewaarborgt) */
.dashboardAchtergrondImage img {
    display: none;
}

/* specificeert waar .dashboardBeloningsknop in grid-layout moet komen
Stelt element in als grid */
.dashboardBeloningKnop {
    grid-area: beloning;

    display: grid;
    justify-items: center;
}

/* beloningsknop grootte -> breedte innemen van container */
.dashboardBeloningKnop a {
    width: 40%; 
}

/* beloningsknop afbeelding groote  in op 100% van beschikbare ruimte*/
.dashboardBeloningKnop a img {
    width: 100%;
}

/* positie van de avatar */
.avatar {
    position: fixed;
    right: 0px;
    bottom: 0px;
}

/* avatar bij de opdrachten (voortgang) */
.avatar.hoger {
    /* Wanneer de 'hoger' klasse is toegevoegd aan het avatar element, 
    wordt het uitgelijnd met de bovenkant van het scherm op 115px, 
    inplaats van de onderkant */
    bottom: auto;
    top: 115px;
}

/* Animaties */
/* Animatie voor het in vliegen van de avatar */
@keyframes folioFlyIn {
    0% {
        /* Start de animatie door het element 100% naar rechts te verplaatsen */
        transform: translateX(100%);
    }
    100% {
        /* Eindigt de animatie door het element terug te brengen naar zijn oorspronkelijke positie */
        transform: translateX(0%);
    }
}

.avatar {
    /* Start de animatie 1 seconde nadat de pagina is geladen */
    animation: folioFlyIn 1s ease-in-out 4s;
    animation-fill-mode: backwards;
}

/* Animatie voor het oplichten van de dashboard tegels */
@keyframes TekstLichtOp {
    0% {
        /* Start de animatie zonder schaduw */
        box-shadow: 0px 0px 0px 0px #F39200;
    }
    100% {
        /* Eindigt de animatie door een schaduw toe te voegen */
        box-shadow: 0px 0px 0px 10px #F39200;
    }
}

.dashboardWoordenschat {
    /* Start de animatie 5 seconde nadat de pagina is geladen + herhaling van de animatie */
    animation: TekstLichtOp 1s ease-in-out 5s infinite alternate;
    animation-fill-mode: forwards;
}







/* Broodkruimel navigatie */
/* Grid-layout van de pagina navigatie */
.paginaNav {
    height: 100%;

    max-width: 100vw;
    overflow: scroll;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;

    column-gap: 24px;
}

/* Grid-layout van de broodkruimels in navigatie */
.paginaNav .broodkruimel {
    display: grid;
    grid-template-columns: repeat(8, auto) 1fr;
    align-items: center;
    justify-content: start;
    column-gap: 16px;

    margin-left: 24px;
}

/* stelt kruimel link element in als grid + stijl van de broodkruimels */
.broodkruimel .kruimel a {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 8px;

    text-decoration: none;
    color: black;
    font-weight: bold;

    white-space: nowrap;
}

/* hoogte van de scheiding tussen de broodkruimels */
.broodkruimel .scheiding img {
    height: 109px;
}

/* stijl van de voortgangsbalk */
.broodkruimel .voortgangsBalk {
    height: 30px;
    width: 100%;
    background-color: #e3e3e3;
}

/* stijl van de voortgangsbalk */
.broodkruimel .voortgangsBalk .balk {
    height: 100%;
    width: 0%;
    background-color: #74B533;
}

/* Wanneer de 'voorgang1van4' klasse is toegevoegd aan het voortgangsBalk element, wordt de breedte van het balk element ingesteld op 25% */
.broodkruimel .voortgangsBalk.voorgang1van4 .balk {
    width: 25%;
}

/* Wanneer de 'voorgang2van4' klasse is toegevoegd aan het voortgangsBalk element, wordt de breedte van het balk element ingesteld op 50% */
.broodkruimel .voortgangsBalk.voorgang2van4 .balk {
    width: 50%;
}

/* Wanneer de 'voorgang3van4' klasse is toegevoegd aan het voortgangsBalk element, wordt de breedte van het balk element ingesteld op 75% */
.broodkruimel .voortgangsBalk.voorgang3van4 .balk {
    width: 75%;
}

/* Wanneer de 'voorgang4van4' klasse is toegevoegd aan het voortgangsBalk element, wordt de breedte van het balk element ingesteld op 95% */
.broodkruimel .voortgangsBalk.voorgang4van4 .balk {
    width: 95%;
}

/* wanneer de 'groen' klasse is toegevoegd aan het link element, wordt de tekst groen */
.groen a p {
    color: #74B533;
}

/* stijl van de stopknop */
.paginaNav .stopKnop {
    display: grid;
    grid-template-columns: auto auto;
    text-decoration: none;

    align-items: center;

    column-gap: 8px;
    margin-right: 24px;

    color: #E10000;
    font-weight: bold;
}




/* Woordenschat pagina */
/* Grid-layout van de woordenschat inleiding*/
.woordenschatInleiding {
    display: grid;
    grid-template-columns: 1fr 60% 1fr;
    grid-template-areas:
    ". vlak .";

    padding: 50px 0;
}

/* Grid-layout van de woordenschat inleiding vlak */
.inleidingVlak {
    grid-area: vlak;
    background-color: #FFFFFF;

    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-rows: auto 64px auto auto 64px auto;
    grid-template-areas: 
    "titel titel titel titel titel"
    ". . . . ."
    "stap1 pijl1 stap2 pijl2 stap3"
    "stap1tekst . stap2tekst . stap3tekst"
    ". . . . ."
    ". . start . .";

    padding: 24px;
}

/* specificeert waar .inleidingVlakTitel in grid-layout moet komen */
.inleidingVlakTitel {
    grid-area: titel;
    text-align: center;
}

/* stijl van de titel h1 */
.inleidingVlakTitel h1 {
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* stijl van de titel p (uitlegtekst) */
.inleidingVlakTitel p {
    font-size: 24px;
    font-weight: bold;
    color: #707070;
}

/* stijl/plaatsing van de stappen */
.inleidingStap {
    text-align: center;
    font-weight: bold;
}

/* stijl/plaatsing van de afbeeldingen van de stappen  */
.inleidingVlak img {
    height: 300px;
    justify-self: center;
}

/* stijl/plaatsing van de stappen tekst h2 */
.inleidingVlak h2 {
    font-weight: bold;
    text-align: center;
}

/* stijl/plaatsing van de pijlen */
.inleidingVlak .pijl {
    width: 100%;
    height: auto;
    align-self: center;
    rotate: 180deg;
}

/* specificeert waar .istartenKnop in grid-layout moet komen 
Stijl/plaatsing van de startknop*/
.startenKnop {
    grid-area: start;
    justify-self: center;
    background-color: #F39200;
    color: white;
    text-decoration: none;
    width: 100%;
    padding: 16px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;

    /* transition hover effect */
    transition: background-color 0.15s ease;
}

/* stijl van de startknop wanneer er met de muis overheen wordt gehoverd */
.startenKnop:hover {
    background-color: #E17F00;
}

/* specificeert waar stap 1 in grid-layout moet komen */
.inleidingVlak img.stap1 {
    grid-area: stap1;
}
.inleidingVlak h2.stap1 {
    grid-area: stap1tekst;
}

/* specificeert waar pijl 1 in grid-layout moet komen */
.inleidingVlak .pijl1 {
    grid-area: pijl1;
}

/* specificeert waar stap 2 in grid-layout moet komen */
.inleidingVlak img.stap2 {
    grid-area: stap2;
}
.inleidingVlak h2.stap2 {
    grid-area: stap2tekst;
}

/* specificeert waar pijl 2 in grid-layout moet komen */
.inleidingVlak .pijl2 {
    grid-area: pijl2;
}

/* specificeert waar stap 3 in grid-layout moet komen */
.inleidingVlak img.stap3 {
    grid-area: stap3;
}
.inleidingVlak h2.stap3 {
    grid-area: stap3tekst;
}






/* MAUD */

/* achtergrond kleur van het blok */
.container{
	margin: 50px 100px 50px 100px;
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
	justify-content: center;
	align-items: center;
}


/* de grote van de afbeelding in de tekst */
.afbeeldingTekst{
	width: 100%;
	height: auto;
}

/* info voor gehele tekst met titel en afbeelding (plaatsing en grote) */
.tekstWoorden{
	font-family: "Montserrat";
	height: auto;
	max-width: 90%;
	margin: 50px;
	display:block;
	justify-content: center;
	align-items: center;
}

/* titel van tekst (grote en ruimte tussen titel en afbeelding) */
.titelTekst { 
	font-size: 40pt;
    font-style:italic;
    font-weight: bold;
	margin-bottom: 20pt;
}

/* inleiding van tekst */
.inleidingTekst{
	font-weight: bold;
}

/* titels van de alinea's */
.alineaTitel{
	font-weight: bold;
	font-size: 30 pt;
}

/* alinea's met titel, grote en ruimte boven de alinea's */
.alinea{
	margin-top:20pt;
	font-size: 20pt;
}

/* bron verwijzing */
.bron{
	font-style: italic;
	margin-top: 20pt;
	margin-bottom: 20pt;
}


/* de woordjes die de kinderen moeten leren, (achtergrond) kleur van woordjes, hoe de tekst eruit ziet en grote en op welke volgorde het moet worden weergegeven */
.woordjes{
	background-color: #933D93;
    color: #ffffff;
    display: inline-block;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	/* Position the tooltip */
	z-index: 1;
}

/* de betekenis van de woordjes, (achtergrond) kleur, hoe de tekst eruit ziet en waar het staat */
.woordjes .betekenisWoord {
	visibility: hidden;
	width: 120px;
	background-color: #3C123C;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
  
/* de positie van de betekenis van de woorden */
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

/* zorgt ervoor dat de betekenis van het woord visible wordt met hover */
.woordjes:hover .betekenisWoord {
	visibility: visible;
}


/* THOMAS */


.inhoudContainer h1{
    font-family: "Montserrat-Bold";
    font-weight: bolder;
    font-size: 40pt;
    padding-bottom: 10px;
}

.woord li{
    margin: 5px 15px 5px 15px;
    text-decoration: none;
    font-family: "Montserrat";
}

.subKop{
    font-size: 21px;
}

.inhoudContainer{
    text-align: center;
    padding-bottom: 60px;
}

.woordenoverzicht{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
    text-align: center;
    padding-top: 70px;
}

.antwoorden {
    text-align: center;
}

/* Knop met leer woorden */
.nb-button{     
    font-family: "Montserrat";
    width: 400px;
    border: 0.5px solid gray;
    border-radius: 5px;
    background-color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 23px;
    color: #933D93;
    transition: ease-in 0.3s;
}

/* Knop met leerwoorden hover */
.nb-button:hover{
    transition: ease-out 0.3;
    color: white;
    background-color: #933D93;
    border: 0.5px solid #933D93;
    cursor: pointer;
}

/* Woord gecentreerd */
.woord {
    padding-bottom: 60px;
    margin: 0 auto;
    align-content: center;
}

/* Antwoord */
.response {
    width: 700px;
    margin-top: 0;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 23px;
    color: green;
    padding-bottom: 58px;
    
}




/* SAYA */

/*De scorenbalk op elke pagina*/
.scorenBalk img{
    display: block;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    }
    
    /*De container met de opdrachten en antwoorden (wit gekleurde vierkant)*/
    .containerOpdracht{
    margin: 50px 100px 50px 100px;
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    }

    
    /*De inhoud van de containeropdracht 1, container. Dus alle tekst en de knopjes*/
    .opdrachtInhoud{
    text-align: center;
    }
    
    /*De titel van elke opdracht, dus "OPDRACHT" met de nummer) */
    .opdrachtInhoud h1{
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 30px;
    text-align: left;
    font-family: "Montserrat-Bold";
    font-weight: bolder;  
    }
    
    /* CSS voor sub titel vraag, "klik op een antwoord" */
    .opdrachtInhoud h2{
    color:  grey;
    padding-left: 10px;
    padding-bottom: 15px;
    font-size: 20px;
    text-align: left;
    }
    
    /*CSS voor elke vraag*/
    .opdrachtInhoud p{
    text-align: left;
    padding-left: 10px;
    padding-bottom: 15px;
    font-size: 20px;
    }
    
    /* De css om de vragen in een lijst te zetten*/
    .opdrachtInhoud a{
    margin: 20px 10px 200px 10px;
    text-decoration: none;
    }
    
    .opdrachtInhoud li{
    margin: 5px 15px 5px 15px;
    }
    
    a{
    margin: 20px 10px 200px 10px;
    font-family: "Montserrat";
    text-decoration: none;
    }
    
    li{
    margin: 5px 15px 5px 15px;
    }
    
    /* De css voor de antwoorden bij elke vraag, hieronder de container*/
    .antwoorden {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: left;
    }
    
    .goedOffout{
    padding-top: 5px;
    padding-bottom: 5px;
    }
    
    /* De css voor de antwoorden, de tekst*/
    .goedOffout h3 {
    font-family: "Montserrat";
    font-size: 30px;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 20px;
    text-align: center;
    }
    
    .antwoorden a {
    color: black;
    font-size: 20px;
    text-transform: none;
    font-family: "Montserrat";
    text-align: center;
    }
    
    
    /* CSS voor wanneer een antwoord goed is */
    .goedAntwoord {
    background-color: #6DAA28;
    color: #FFFFFF;
    border: 0.5px solid gray;
    font-family: "Montserrat-Bold";
    margin: 10px;
    height: 80px;
    }
    
    /* CSS voor wanneer een antwoord fout is */
    .foutAntwoord {
    background-color: #E10000;
    color: #FFFFFF;
    border: 0.5px solid gray;
    font-family: "Montserrat-Bold";
    margin: 10px;
    height: 80px;
    }

    .antwoordButton {
    background-color: #FFFFFF;
    color: #E17F00;
    border: 0.5px solid gray;
    margin: 10px;
    height: 80px;
    }
    
    /*Hieronder de css voor de knop om naar de volgende opdracht te gaan*/
    .inhoudcontainer{
    align-items: center;
    }
             
    .oranjeKnop{
    margin-top: 200px;
    align-items: center;
    background-color: #F39100;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    font-size: 23px;
    }
        
        
    /*Dit is de css voor de hover van de "VOLGENDE OPDRACHT" knop*/
    .oranjeKnop:hover{
    background-color: #C57301;
    }




/* Antwoord display vanaf het begin niet zichtbaar */
.response p{
    display: none;
}

/* Responsive */
/* Kaya */
/* Wanneer het scherm kleiner is dan 768px */
@media screen and (max-width: 768px) {
    .dashboardTegels ul li {
        /* Verkleint de padding van de lijstitems in het dashboardTegels 
        element op schermen kleiner dan 768px breed */
        padding: 12px;
    }
}

/* Wanneer het scherm kleiner is dan 1024px */
@media screen and (max-width: 1024px) {
    .avatar {
        /* Verkleint de breedte van het avatar element op schermen 
        kleiner dan 1024px breed */
        width: 20%;
    }

    .dashboard,
    .woordenschatInleiding {
        /* Verkleint de grid-layout van de dashboard en woordenschatInleiding 
        elementen op schermen kleiner dan 1024px breed */
        grid-template-columns: 1fr 90% 1fr;
    }

    .dashboardTegelImage {
        /* Verkleint de padding van de dashboardTegelImage elementen op schermen 
        kleiner dan 1024px breed */
        padding: 24px;
    }

    .dashboardBeloningKnop {
        /* Plaatst het dashboardBeloningKnop element vast op de positie 16px vanaf 
        de onderkant en 16px vanaf de linkerkant van het scherm op schermen kleiner 
        dan 1024px breed */
        position: fixed;
        bottom: 16px;
        left: 16px;
        justify-items: start;
    }

    .inleidingVlak img {
        /* Verkleint de hoogte van de inleidingVlak afbeeldingen op schermen kleiner 
        dan 1024px breed */
        height: 200px;
    }
}

/* Wanneer het scherm kleiner is dan 1440px */
@media screen and (max-width: 1440px) {
    .avatar {
        /* Verkleint de breedte van het avatar element op schermen kleiner 
        dan 1440px breed */
        width: 20%;
    }

    .inleidingVlak img {
        /* Verkleint de hoogte van de inleidingVlak afbeeldingen op schermen 
        kleiner dan 1440px breed */
        height: 200px;
    }

    .dashboardTegelImage {
        /* Verkleint de padding van de dashboardTegelImage elementen op schermen 
        kleiner dan 1440px breed */
        padding: 24px;
    }
}



/* MELISSA */

h1{
    font-family: "Montserrat-Bold";
    font-size: 40pt;
}

p{
    margin: 15px;
    font-family: "montserrat";
}

a{
    margin: 20px 10px 200px 10px;
    font-family: "montserrat";
    text-decoration: none;
}

ul{
    list-style: none;
}

li{
    list-style: none;
    margin: 5px 15px 5px 15px;
}

.puntenTekst{
    font-size: x-large;
}

/*Afbeeldingen*/
.algemeenAfbeelding{
    width: 300px;
}

.containerGardarobe{
    margin: 50px 100px 50px 100px;
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    max-height: 600px;
}

.gardarobeIconen:hover{
    background-color: #C57301;
    width: 80px;
    height: 80px;
}

.gardarobeIconen:active{
    background-color: #74B533;
    width: 80px;
    height: 80px;
}

/*Grid van gardarobe catalogus*/
.containerGardarobe{
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

#introGardarobe{
    grid-column: 2/4;
    grid-row: 1/3;
}

#puntenGardarobe{
    grid-column: 1/2;
    grid-row: 2;
}

#gardarobeCatalogus{
    grid-column: 1/5;
    grid-row: 3;
}

#itemKopen{
    grid-column: 4/5;
    grid-row: 2;
}


/* item kopen grid */
#itemKopen{
    display: grid;
    justify-content: left;
    text-align: left;
    
    grid-template-columns: 1fr, 1fr;
    grid-template-rows: 2;
}

#spotlightAfbeelding{
    grid-column: 1;
    grid-row: 1;
}

#spotlightTekst{
    grid-column: 2;
    grid-row: 1;
}

#spotlightTekst p{
    padding-left: 10px;
}

#spotlightKnop{
    grid-column: 1/3;
    grid-row: 2;
}


/* gardarobe catalogus grid */
#gardarobeCatalogusGrid{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    justify-content: center;
    padding: 40px 100px 40px 100px;
    list-style: none;
}

.gardarobeIconen{
    width: 75px;
    height: 75px;
    background-color: #F39100;
    border-radius: 5px;
    object-fit: contain;
}

.gardarobeIconenSpotlight{
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
    background-color: #F39100;
    border-radius: 5px;
    object-fit: contain;
}


/*knop actief */
.gardarobeIconenActief{
    width: 75px;
    height: 75px;
    background-color: #74B533;
    border-radius: 5px;
    object-fit: contain;
}


/* QUERIES MAUD */

@media screen and (max-width: 1000px) {
	.titelTekst {
	  font-size: 30pt;
	}
  }

@media screen and (max-width: 800px) {
	.titelTekst {
	  font-size: 20pt;
	}
  }



@media screen and (max-width: 1000px) {
	.alineaTitel {
	  font-size: 20pt;
	}
  }

@media screen and (max-width: 800px) {
	.alineaTitel {
	  font-size: 10pt;
	}
  }



@media screen and (max-width: 1000px) {
	.alinea {
	  font-size: 20pt;
	}
  }

@media screen and (max-width: 800px) {
	.alinea {
	  font-size: 10pt;
	}
}


/* QUERIES THOMAS */

@media (min-width: 500px) {
    .woordenoverzicht { grid-template-columns: repeat(2, 1fr); }
  }
  
@media (min-width: 1075px) {
    .woordenoverzicht { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1500px) {
    .woordenoverzicht{ grid-template-columns: repeat(2, 1fr); }
  }

@media (min-width: 2000px) {
    .woordenoverzicht{ grid-template-columns: repeat(2, 1fr); }

}


  
/* QUERIES SAYA */

@media (max-width: 1400px) {
    body{
    background-color: #D7E9FB;
    }
          
    .container{
    margin: 50px 100px 50px 100px;
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    }
        
    .inhoudContainer{
    text-align: center;
    }
        
    /*Knoppen*/
    
    .oranjeKnop{
    margin-top: 200px;
    background-color: #F39100;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    font-size: 23px;
    }
        
    .oranjeKnop:hover{
    background-color: #C57301;
    }
        
    a{
    margin: 20px 10px 200px 10px;
    font-family: "montserrat";
    text-decoration: none;
    }
        
    li{
    margin: 5px 15px 5px 15px;
    }
    
        
    /*De container met de opdrachten en antwoorden (wit gekleurde vierkant)*/
    .containerOpdracht{
    margin: 50px 100px 50px 100px;
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    }
        
    /*De inhoud van de containeropdracht 1, container. Dus alle tekst en de knopjes*/
    .opdrachtInhoud{
    text-align: center;
    }
        
    /*De titel van elke opdracht, dus "OPDRACHT" met de nummer) */
    .opdrachtInhoud h1{  
    padding-left: 15px;
    font-size: 20px;
    text-align: left;
    }
    
    /* CSS voor sub titel vraag, "klik op een antwoord" */
    .opdrachtInhoud h2{
    font-family: "Montserrat";
    font-weight: 100px;
    color:  rgb(130, 111, 111);
    padding-left: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    text-align: left;
    }
        
    /*CSS voor elke vraag*/
    .opdrachtInhoud p{
     text-align: left;
    }
        
    /* De css voor de antwoorden bij elke vraag, hieronder de container*/
    .antwoorden {
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    row-gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    }
    
    .antwoorden a {
    color: black;
    font-size: 20px;
    text-transform: none;
    }
        
    .goedOffout h3 {
    font-family: "Montserrat";
    font-size: 20px;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 20px;
    text-align: center;
    }
    
    
    /* QUERIES MELISSA */

    @media (max-width: 1450px) {
        #gardarobeCatalogusGrid{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: 1fr, 1fr;
            justify-content: center;
            padding: 40px 100px 40px 100px;
            list-style: none;
        }
        
        .gardarobeIconen{
            width: 75px;
            height: 75px;
            background-color: #F39100;
            border-radius: 5px;
            object-fit: contain;
        }
        
        .gardarobeIconenSpotlight{
            width: 110px;
            height: 110px;
            margin-bottom: 20px;
            background-color: #F39100;
            border-radius: 5px;
            object-fit: contain;
        }
    
        .gardarobeIconen:hover{
            background-color: #C57301;
            width: 75px;
            height: 75px;
        }
        
        .gardarobeIconen:active{
            background-color: #74B533;
            width: 75px;
            height: 75px;
        }
    }
}