/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
  box-sizing:border-box;
  margin: 0%;
  padding: 0%;  
}


/****************/
/* JOUW STYLING */
/****************/

/* jouw code */

/* code eerste section */

main section:nth-of-type(1) h1, main section:nth-of-type(1) h2{
    color: var(--color-background);
    font-size: 2em;
}

main section:nth-of-type(1){
    position: relative;
}

main section:nth-of-type(1) button{
    width: 5em;
    position: absolute;
    left: 10em;
    bottom: 15em;
    
}

main section:nth-of-type(1) h1{
    position: absolute;
    top: 6.5em;
    left: 2.8em;
}

main section:nth-of-type(1) h2{
    position: absolute;
    top: 4.5em;
    left:2.8em;
}

main section:nth-of-type(2) h2{
    font-weight: lighter;
}

video{
    width: 100;
    height: 100;
}

main section article h2{
    font-size: 1.8em;
}

main section:nth-of-type(3) h2:nth-of-type(2){
    font-size: 5em;
}




/* code tweede section */

main section:nth-of-type(2){
    margin-left: 3em;
    margin-bottom: 5em;
}

main section:nth-of-type(2) article{
    display: flex;
    flex-direction: column;
}

main section:nth-of-type(2) ul{
    display: flex;
}

main section:nth-of-type(2) h2:nth-of-type(2), main section:nth-of-type(2) h3{
    order: 2;
 
}

main section:nth-of-type(2) a{
    order: 3;
}

main section:nth-of-type(2) h2{
    font-size: 1.7em;
    letter-spacing: var(--letterspacingh2);
    margin-top: 2em; 
}

main section:nth-of-type(2) h2:nth-of-type(2){
    font-size: 2.5em;
    letter-spacing: var(--letterspacingh2);
}

main section:nth-of-type(2) h3{
    font-size: 1.3em;
    margin-top: 0.3em;
}

main section:nth-of-type(2) a{
    display: inline-block;
    width: 20em;
    padding: 1.5em;
    background-color: var(--color-background);
    font-size: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 1em;
    /* font-family: 'Roboto-Regular'; */
}

main section:nth-of-type(2) img{
    width: 100%;
    height: 100%;
    padding: 3em;
}

main section:nth-of-type(2) a:hover, main section:nth-of-type(3) a:hover {
    background-color: var(--color-text);
    color: var(--color-background);
    transition-duration: 700ms;
}

main section:nth-of-type(2) a:is(:active, :focus-visible), main section:nth-of-type(3) a:is(:active, :focus-visible){
    background-color: var(--active);
    padding: 1em;
}

.section ul {
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-behavior: smooth;
  }
  
  .section img {
    display: block;
    width: 40%;
  }
  
  .section {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .section ul:nth-of-type(1) {
    display: flex;
    overflow: hidden;
  }
  
  .section > ul li {
    width: 100%;
    flex-shrink: 0;
  }
  
  .section nav ul {
    display: flex;
    gap: 0.5em;
    justify-content: space-around;
  }
  
  /* .section nav li {
    width: 10em;
  } */
  
  .section nav li a {
    display: block;
    border-radius: 50%;
  }
  
  .section nav li a img {
    border-radius: inherit;
  }

  .section nav li a img {
    border-radius: inherit;
  }
  
  .section nav li a img {
    border-radius: inherit;
  }



/* code derde section */
main section:nth-of-type(3) article:nth-of-type(1) h3, main section:nth-of-type(3) article:nth-of-type(1) p:nth-of-type(2){
    display: none;
}

main section:nth-of-type(3){
    margin-left: 3em;
}

main section:nth-of-type(3) article:nth-of-type(1) img{
    min-width: 80%;
    max-width: 80%;
}

main section:nth-of-type(3) article:nth-of-type(2) img, main section:nth-of-type(3) article:nth-of-type(3) img{
    min-width:  60%;
    max-width:  60%;
}

main section:nth-of-type(3) article:nth-of-type(1) img, main section:nth-of-type(3) article:nth-of-type(2) img, main section:nth-of-type(3) article:nth-of-type(3) img{
    margin-bottom: 3%;
    margin-top: 3%;
}

p time{
    font-family: 'Roboto';
    color: var(--colortext);
}

main section:nth-of-type(3) article:nth-of-type(1) p time{
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: 0.14rem;
    text-transform: uppercase;

}

main section:nth-of-type(3) article:nth-of-type(2) p time, main section:nth-of-type(3) article:nth-of-type(3) p time{
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.14rem;
}

main section:nth-of-type(3) article:nth-of-type(2), main section:nth-of-type(3) article:nth-of-type(3) {
    display: flex;
    flex-direction: column;
}

main section:nth-of-type(3) article:nth-of-type(2) p{
    order: 1;
}

main section:nth-of-type(3) article:nth-of-type(2) a{
    order: 2;
}

main section:nth-of-type(3) article:nth-of-type(2) h3{
    order: 3;
}

main section:nth-of-type(3) article:nth-of-type(2) h3, main section:nth-of-type(3) article:nth-of-type(3) h3{
    font-family: 'Robotobold';
    font-size: 1.6rem;
    letter-spacing: 0.056rem;
    line-height: 1;
    margin-top: 0.5em;
}

main section:nth-of-type(3) article:nth-of-type(3) h3{
    order: 2;
} 

main section:nth-of-type(3) article:nth-of-type(1) a, main section:nth-of-type(3) article:nth-of-type(2) a, main section:nth-of-type(3) article:nth-of-type(3) a{
    padding: 0.5em; 
    font-size: 0.8em;
    width: 8em; 
    text-align: center;
}

main section:nth-of-type(3) article:nth-of-type(1) a{
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 1em;
}


main section:nth-of-type(3) article:nth-of-type(1) a:is(:active, :focus-visible){
    background-color: var(--active);
    padding: 1em;
}


/* media tag regels algemeen*/

@media (max-width: 1024px){
    nav{
        display: none;
        }
    }

@media (min-width: 1029px){
    main section article h3{
        font-size: 6rem;
    }
}




/* media tag eerste section*/

@media (min-width: 1025px){
    main section:nth-of-type(1) h1, main section:nth-of-type(1) h2{
        font-size: 4em;
    }
}

@media (max-width: 800px){
    main section:nth-of-type(1) h1, main section:nth-of-type(1) h2{
        font-size: 1em;
    }
}

@media (min-width: 150px){
    video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 320px){
    video{
        width: 100%;
        height: 30em;
        object-fit: cover;
    }
}


@media (min-width: 700px){
    video{
        width: 100%;
        height: 50em;
    }
}

@media (min-width: 320px){
    main section:nth-of-type(1) h1{
       position: absolute;
       top: 15em;
    }
}

@media (min-width: 320px){
    main section:nth-of-type(1) h2{
       position: absolute;
       top: 17em;
    }
}

@media (min-width: 700px){
    main section:nth-of-type(1) h1{
       position: absolute;
       top: 15em;
       font-size: 1.5em;
    }
}


@media (min-width: 700px){
    main section:nth-of-type(1) h2{
       position: absolute;
       top: 18em;
       font-size: 1.5em;
    }
}

@media (min-width: 1000px){
    main section:nth-of-type(1) h1{
       position: absolute;
       top: 12em;
       font-size: 2em;
    }
}


@media (min-width: 1000px){
    main section:nth-of-type(1) h2{
       position: absolute;
       top: 15em;
       font-size: 2em;
    }
}


@media (min-width: 990px){
main section:nth-of-type(3) article:nth-of-type(2){
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
}


/* media tag tweede section*/

@media (max-width: 320px){
    main section:nth-of-type(2) a{
    display: inline-block;
    width: 12em;
    }
}

@media (min-width: 990px){
    main section:nth-of-type(2) img{
        width: 50em;
    }
}

@media (min-width: 320px){
    main section:nth-of-type(2) img{
        width: 20em;
    }
} 

@media (max-width: 320px){
    main section:nth-of-type(2) ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    }
}


/* media tag derde section*/


@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(1) h3{
    display: block;
    font-size: 1.8rem;
    margin-top: 0.5em;
    }
}

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(1) p:nth-of-type(2){
    display: block;
    font-size: 1rem;
    margin-top: 0.5em;
    }
}

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2), main section:nth-of-type(3) article:nth-of-type(3){
        display: grid;
        grid-template-columns: 1fr 1fr;

    }
}

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) a, main section:nth-of-type(3) article:nth-of-type(3) a{
        grid-column-start: 2;
        grid-column-end: -1;

    }
}
 @media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) h3, main section:nth-of-type(3) article:nth-of-type(3) h3{
        grid-column-start: 2;
        grid-column-end: -1;

    }
} 

/* @media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) img, main section:nth-of-type(3) article:nth-of-type(3) img{
        min-width:  70%;
        max-width:  70%;
    }
} */

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2),  main section:nth-of-type(3) article:nth-of-type(3){
        position: relative;
    }
}  

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) p time,  main section:nth-of-type(3) article:nth-of-type(3) p time{
        position: absolute;
        top: 1.4em; 
        margin-top: 2em;
        
    }
} 

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) a,  main section:nth-of-type(3) article:nth-of-type(3) a{
        position: absolute;
        bottom: 15em; 
        
    }
}  

@media (min-width: 990px){
    main section:nth-of-type(3) article:nth-of-type(2) h3,  main section:nth-of-type(3) article:nth-of-type(3) h3{
        position: absolute;
        top: 3em; 
    }
}

@media (max-width: 320px){
    main section:nth-of-type(3) a span{
    display: inline-block;
    width: 12em;
    }
}

@media (max-width: 320px){
    main section:nth-of-type(3) article:nth-of-type(1) h3{
    display: block;
    font-size: 2em;
    }
}

@media (min-width: 400px){
    main section:nth-of-type(3) article:nth-of-type(1) h3{
    display: block;
    font-size: 2em;
    }
}

@media (min-width: 321px){
    main section:nth-of-type(3) article:nth-of-type(1) h3{
    display: block;
    font-size: 2em;
    }
}

@media (min-width: 600px){
    main section:nth-of-type(3) article:nth-of-type(1) h3{
    display: block;
    font-size: 5em;
    }
}

@media (max-width: 320px){
    main section:nth-of-type(3) article:nth-of-type(1) a{
    display: inline-block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    }
}

@media (max-width: 320px){
    main section:nth-of-type(3) p time{
    margin-top: 1.5em;
    
    }
}

@media (max-width: 320px){
    main section:nth-of-type(3) article:nth-of-type(2) h3, main section:nth-of-type(3) article:nth-of-type(3) h3{
    margin-top: 1em;
    margin-bottom: 1em;
    }
}


/* media tag Darkmode*/


@media (prefers-color-scheme:light){
    body{
      background-color: var(--lightmode);
    }
    h1, h2, h3, h4, a{
      color: var(--darkmode);
    }
  }
  
  @media (prefers-color-scheme:dark){
    body{
      background-color: var(--darkmode);
    }
    main section a{
        background-color: var(--lightmode);
    }
    main section a{
        color: var(--darkmode);
    }
     h1, h2, h3, h4, p, p time{
      color: var(--lightmode);
    }
  }