/* styles.css */
* {
    box-sizing: border-box; /* Zorgt ervoor dat padding en margin de breedte van elementen niet beïnvloeden */
    margin: 0; /* Verwijdert standaard marges */
    padding: 0; /* Verwijdert standaard padding */
}


input, head,header,footer,main,h1,h2,h3,h4,h5,h6,h7 {
    caret-color: transparent; /* Verbergt de text cursor */
}



/* Algemene stijlen voor knoppen 

vraag: hoe maak ik een knop met ronde afronding

*/
.btn {
    background-color: #2A5FAF; 
    color: rgb(255, 255, 255); 
    height: auto;
    padding: 15px 32px; /* Padding boven/onder en links/rechts */
    text-align: center; /* Centreer tekst */
    text-decoration: none; /* Geen onderstreping */
    display: inline-block; /* Zorg ervoor dat ze inline zijn */
    font-size: 24px; /* Lettergrootte */
    margin: 10px; /* Ruimte tussen knoppen */
    margin-right: 50px;
    width: 200px;
    cursor: pointer; /* Handcursor bij hover */
    border: 50px; /* rand van 50px */
    border-radius: 50px; /* Ronde hoeken hoe meer pixel hoe meer rond */
    transition: background-color 0.3s; /* Animatie bij hover animatie duurt 0,3 seconde  */


}
   
    
    
/* Hover-effecqt maakt de knop donker als je erover heen  gaat */

/* .btn:hover {
    background-color: #1e4a8a; 
}

.drink-button:hover span {
    background-color:#f3c108; 
    border-radius: 8px; 
    transition: background-color 0.3s; 
}

.drink-button.active span {
    background-color: #2A5FAF; 
    border-radius: 8px; 
}


.drink-button {
    cursor: pointer; 
} */


/* Algemene stijlen voor knoppen en hover-effecten */
.drink-button {
    display: inline-block;
    cursor: pointer; /* Handcursor bij hover */
    text-align: center; /* Center de tekst onder de afbeelding */
    margin: 10px; /* Voeg wat marge toe tussen de knoppen */
}

.drink-button input[type="radio"] {
    display: none; /* Verberg de standaard radiobutton */
}

.drink-button span {
    border: 2px solid transparent; /* Initieel geen rand */
    border-radius: 8px; /* Hoekjes afronden */
    padding: 10px; /* Ruimte rond de inhoud */
    transition: border-color 0.3s; /* Voor een mooie overgang */
}

.drink-button:hover span /*img*/ {
    background-color: #2aaf71; /* Verander achtergrondkleur van het span element op hover */
}

.drink-button.active span {
    background-color:#f3c108; /* Houd dezelfde achtergrondkleur als bij hover */
}

.drink-button input[type="radio"]:checked + span {
    border-color: #6200ea; /* Kleur van de rand als geselecteerd */
}



body, html {
    height: auto; 
    width: auto;
    font-family: Arial, sans-serif; /* Standaard lettertype */
    display: flex; /* Flexbox voor body om elementen te centreren */
    flex-direction: column; /* Zorgt ervoor dat elementen verticaal worden gestapeld */
    /* transform: scale(1); */
    height: 100vh;
    margin: 0;
    /* overflow: hidden; */
   
} 

    /* Header background color and styling */
header {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    background-color: #2a5faf; /* Set background color */
    padding: 0px; /* Add some padding to the header */
    color: white; /* Set text color to white for better contrast */
    text-align: center; /* Center the header text */
}
nav {
    display: flex; /* Gebruik flexbox voor de navigatieknoppen */
    flex-wrap: wrap; /* Zorg ervoor dat knoppen goed worden verdeeld */
    justify-content: space-between;
    gap: 5px; 
    justify-content: center;
    width: 100%; 
    /* max-width: 100vw; */
    
}

nav span {
    display: inline-block; /* Zorg ervoor dat de spans inline zijn */
     text-align: center;
     
}

h1, h2, nav {
    margin: 0 10px; /* ruimte tussen logo en nav */
    padding: 5px 0; /* Add some space between elements */
    
}

/* Main Section Styling */
main, h3{
    flex: 1; /* Laat de main content het resterende deel van de pagina innemen */
    display: flex; /* Gebruik flexbox voor de main sectie */
    /* height: 900px; */
    flex-direction: column; /* Stapel de inhoud verticaal */
    justify-content: center; /* Centreer inhoud verticaal */
    align-items: center; /* Centreer inhoud horizontaal */
    background-color: #f3c108; /* Achtergrondkleur */
    overflow: auto;
    padding: 9px; /* Voeg padding toe voor ademruimte */
    margin: 0; /* Verwijdert marges */
    width: 100%; /* Zorgt ervoor dat de breedte 100% van de beschikbare ruimte is */
    max-width: 100vw; /* Maximaliseert de breedte tot de viewport breedte */
}


/* img {
    max-width: 100%;
    height: auto;
} */


 
/* Name Row Styling zorgt voor goede center bij de logos/naam*/
.name-row {
    max-width: 100%;
    max-width: 100vw;
    text-align: center;
}

.name-row {
    display: flex;
    justify-content: space-around; 
    margin: 15px 0; 
    width: 100%;
}

.name-item {
    text-align: center; 
}


footer {
    background-color: #a349a4;
    color: white;
    padding: 0px;
    text-align: center;
    position: relative; 
    width: 100%;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.darkmode-container {
    display: flex; 
    align-items: center; 
    margin-left: auto; 
}

.footer-container {
    display: flex; 
    justify-content: space-between;
    /* align-items: center; */
    width: 100%; 
    margin: 0 auto; 
}


.footer-BrewCounterlogo{ 
    width: 450px;
    height: auto;
    align-items: center;
    margin: 0 auto;
    margin-top: 20px;

}

.footer-info {
    display: flex; /* Flexbox voor logo en darkmode-knop */
    align-items: center; /* Centreert iqtems verticaal */
}

.footer-logo {
    width: 250px;
    height: auto; 
    margin-left: 50px;
    /* margin-right: 00px; Ruimte tussen het logo en de darkmode-knop */
}



.footer-buttons {
    display: flex; /* Flexbox voor de knoppen */
    flex-direction: column; /* Zorgt ervoor dat de knoppen onder elkaar staan */
    align-items: flex-start; /* Links uitlijnen */
}


.btn:hover {
    background-color: #1e4a8a; /* Donkerder blauw bij hover */
}
















 /* footer img {
 
    height: auto;
}


footer .logo {
    width: 500px; 
} 

footer .darkmode-btn {
    height: 100px; 
} 

footer .game-log-btn {
    width: 100px; 
}

 */


/* Footer Styling 
vraag: hoe maak ik een footer 
*/
/* /* footer {
    background-color: #a349a4;
    color: white;
    padding: 15px;
    text-align: center;
    position: relative;
    width: 100%;
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    bottom: 0;
} 
 


/* Voor de nav in de footer

footer nav/footer top/ footer p
vraag; zorg ervoor dat het logo en
 darkmode knop naast elkaar komen en 
 de rest van de knoppen 
in een lijstje onder elkaar ernaast 

*/

/* footer nav {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: center; 
    gap: 10px; 
    margin: 10px 0; 
    width: 100%; 
} */

/* .footer-top {
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 10px; 
}

 */


/* Footer tekst */
/* footer p {
    text-align: center; 
    margin: 5px 0; 
}
 */


/* footer .buttons {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
} */

/*  footer img {
 
    height: auto;
}


footer .logo {
    width: 500px; 
} 

footer .darkmode-btn {
    height: 100px; 
} 

footer .game-log-btn {
    width: 100px; 
} */

/* Footer tekst */
/* footer p {
    text-align: center; 
    margin: 5px 0; 
}
 */