:root {
    /*ACHTERGROND & TEXT-KLEUR*/
    --eerste-kleur: white;
    /*NAVBAR & TEXT-KLEUR*/
    --tweede-kleur: #D2122E;
    /* FONT-TEXT */
    --fonttext: Tahoma, sans-serif;
}


/*DARK THEME*/
.dark-theme {
    /*ACHTERGROND*/
    --eerste-kleur: #000033;
}


/*SCROLLBAR*/
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #ab936b; 
    border-radius: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px silver; 
    border-radius: 10px;
}


body {
    background-color: var(--eerste-kleur);
}


/*HEADER*/
header {
    background-color: var(--tweede-kleur);
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

header nav ul {
    display: flex;
    align-items: center;
}

header nav img {
    width: 3em;
    padding-right: 0.5em;
}

header nav ul p {
    color: var(--eerste-kleur);
    font-family: var(--fonttext);
    padding-right: 1.5em;
}

header nav ul button {
    border: 2px solid #000033;
    border-radius: 0.8em;
    box-shadow: 0 4px lightcoral;
}

header nav ul button:active {
    background-color: #ab936b;
    color: white;
    box-shadow: 0 2px #000033;
    transform: translateY(4px);
}

header nav li {
    list-style-type: none;
    padding-right: 1.2em;
}

header nav li a{
    text-decoration: none;
    color: var(--eerste-kleur);
    font-family:var(--fonttext);
}


/*MAIN SECTION 1*/
Main.home section:nth-of-type(1) {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    background-color: var(--tweede-kleur);
    margin-top: 1em;
}

main.home section:nth-of-type(1) article:nth-of-type(1) h1{
    color: var(--eerste-kleur);
    font-family:var(--fonttext);
    text-align: center;
}

main.home section:nth-of-type(1) article:nth-of-type(1) p{
    text-align: center;
    color: var(--eerste-kleur);
    font-family:var(--fonttext);
    padding-left: 0.5em;
    padding-right: 0.5em;
}

main.home section:nth-of-type(1) article:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

main.home section:nth-of-type(1) article:nth-of-type(2) img {
    width: auto;
    height: 10em;
    padding-top: 1em;
}


/*MAIN SECTION 2*/
main.home section:nth-of-type(2) {
    display: grid;
    text-align: center;
    grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
    padding-top: 1em;
}

main.home section:nth-of-type(2) article ul {
    list-style: none;
    padding:0;
}

main.home section:nth-of-type(2) article:nth-of-type(1n+0) {
    color: var(--tweede-kleur);
    font-family: var(--fonttext);
}

main.home section:nth-of-type(2) article ul li:nth-of-type(4) img {
    padding-top: 0.5em;
    width: 2em;
}


/*MAIN SECTION 3*/
main.home section:nth-of-type(3) {
    display: grid;
    text-align: center;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    background-color: var(--tweede-kleur);
    color: var(--eerste-kleur);
    font-family: var(--fonttext);
    margin-top: 1em;
    padding-bottom: 1em;
}

main.home section:nth-of-type(3) img:hover {
    animation-name: battle;
    animation-duration:1s;
    animation-iteration-count: infinite;
}

/*MAIN SECTION 3 ANIMATIONS*/
@keyframes battle {
  0% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.7);
  }
  100% {
    transform:scale(1);
  }
}


/*MAIN SECTION 4*/
main.home section:nth-of-type(4) {
    display: grid;
    color: var(--tweede-kleur);
    font-family: var(--fonttext);
}

main.home section:nth-of-type(4) p {
    column-count: 2;
}


/*MAIN SECTION 5*/
main.home section:nth-of-type(5) {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    gap: 1em;
}

main.home section:nth-of-type(5) iframe {
    width: 100%;
    aspect-ratio: 4/3;
    border: none;
}


/*FOOTER*/
footer section {
    display: grid;
    text-align: center;
    grid-template-columns:repeat(auto-fit, minmax(12em, 1fr));
    background-color: var(--tweede-kleur);
    margin-top: 1em;
}

footer h3 {
    color: var(--eerste-kleur);
    font-family: var(--fonttext);
}

footer section ul {
    padding-left: 0;
}

footer section li {
    list-style-type: none;
    padding: 0.5em;
}

footer section li a {
    text-decoration: none;
    color: var(--eerste-kleur);
    font-family: var(--fonttext);
}

footer article:nth-of-type(4) ul li img {
    padding-bottom: 0.5em;
    height: 3em;
}


/*SHOP-PAGINA*/
header nav ul li:nth-of-type(3) img {
    width: 2em;
}


/*MAIN SECTION 1*/
main.shop section:nth-of-type(1) {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    text-align: center;
    gap: 2em;
    padding-top: 5em;
    padding-bottom: 5em;
}

main.shop section:nth-of-type(1) img {
    width: auto;
    height: 10em;
    padding-bottom: 1em;
}

main.shop section:nth-of-type(1) p {
    font-family: var(--fonttext);
    color: var(--tweede-kleur);
}

main.shop section:nth-of-type(1) article img:hover{
    transform: scale(1.5);
}


/*MAIN SECTION 2*/
main.shop section:nth-of-type(2) {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    text-align: center;
    gap: 2em;
    padding-top: 1em;
}

main.shop section:nth-of-type(2) article:nth-of-type(1){
    background-color: lightcoral;
    height: 15em;
    border-radius: 1em;
}

main.shop section:nth-of-type(2) article:nth-of-type(1) p {
    font-family: var(--fonttext);
    color: var(--eerste-kleur);
    font-size: 2em;
    padding-top: 1em;
}

main.shop section:nth-of-type(2) article:nth-of-type(1) p:nth-of-type(2) {
    font-family: var(--fonttext);
    color: var(--eerste-kleur);
    font-size: 1em;
}

main.shop section:nth-of-type(2) article:nth-of-type(2){
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    padding-bottom: 1em;
}

main.shop section:nth-of-type(2) article:nth-of-type(2) a img{
    width: 12em;

}


/*MAIN SECTION 3*/
main.shop section:nth-of-type(3) {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(16em, 1fr));
    text-align: center;
    gap: 2em;
    padding-top: 5em;
    padding-bottom: 5em;
}

main.shop section:nth-of-type(3) img {
    width: auto;
    height: 10em;
    padding-bottom: 1em;
}

main.shop section:nth-of-type(3) p {
    font-family: var(--fonttext);
    color: var(--tweede-kleur);
}

main.shop section:nth-of-type(3) article img:hover{
    transform: scale(1.5);
}


/*MAIN SECTION 4*/
main.shop section:nth-of-type(4) {
    display:flex;
    justify-content: center;
    gap: 2em;
}

main.shop section:nth-of-type(4) article:nth-of-type(1) p {
    border-bottom: 2px solid var(--tweede-kleur);
    padding-bottom: 0.5em;
}

main.shop section:nth-of-type(4) p {
    font-family: var(--fonttext);
    color: var(--tweede-kleur);
}

main.shop section:nth-of-type(4) a{
    text-decoration: none;
}