/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
    box-sizing:border-box;
    margin: 0%;
    padding: 0%;  
  }
  
  
  /****************/
  /* JOUW STYLING */
  /****************/
  
  /* jouw code */
  
  
  
  main section{
    overflow-x: hidden;
}

  main section a{
    display: inline-block;
    border: solid 1px var(--active);
    width: 18em;
    padding: 1.2em;
    background-color: white;
    font-size: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Roboto-Regular';
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
  }

main section a:hover{
    background-color: var(--color-text);
    color: var(--color-background);
    transition-duration: 700ms;
}
  
a{
    text-decoration: none;
  }

  
  
  /* code eerste section */

  main section:nth-of-type(1) h2{
    color: var(--color-text);
  }

  main section:nth-of-type(1) img{
    width: 100%;
    height: 18em;
  }

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

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

  main section:nth-of-type(1) h2{
    color: var(--textcolorhf);
    position: absolute;
    top: 8em;
    left: 2em;
  }



  /* code tweede section */

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

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


/*code vijfde section */
main section:nth-of-type(5){
  position:relative;
	overflow:hidden;
}

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

main section:nth-of-type(5) img{
   width: 100%;
   transition:.3s ease-in-out;
} 

main section:nth-of-type(5) article:nth-of-type(1):hover img, main section:nth-of-type(5) article:nth-of-type(2):hover img{
	scale:1.2;
} 



main section:nth-of-type(5) h2, h3{
    color: var(--textcolorhf);
    color: var(--lightmode);
    position:absolute;
    font-size:15vw;
    z-index:1;
} 

main section:nth-of-type(5) h3{
   font-size: 1.4em;
}


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


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

 main section:nth-of-type(5) article:nth-of-type(1) h2{
    position: absolute;
    top: 3em;
    left: 1em;
 }


 main section:nth-of-type(5) article:nth-of-type(1) h3{
    color: var(--textcolorhf);
    position: absolute;
    top: 3em;
    left: 2em;
 }

 main section:nth-of-type(5) article:nth-of-type(2) h2{
    position: absolute;
    bottom: 3em;
    left: 0.5em; 
 } 


 main section:nth-of-type(5) article:nth-of-type(2) h3{
    color: var(--textcolorhf);
    position: absolute;
    bottom: 8em;
    left: 1.5em;
 }  
  

  /* media tag regels eerste section */

@media (min-width: 600px){
        main section a{
        width: 35em;
            }
            }
    
@media (min-width: 1000px){
        main section a{
        width: 60em;
            }
            }

@media (min-width: 450px){
        main section:nth-of-type(1) img{
         width: 100%;
         height: 20em;
        }
        }

@media (min-width: 1000px){
        main section:nth-of-type(1) img{
        width: 100%;
        height: 25em;    
        }
        } 
        
@media (min-width: 1080px){
        main section:nth-of-type(1) img{
        width: 100%;
        height: 30em;    
        }
        }  

@media (min-width: 1080px){
        main section:nth-of-type(1) h1{
        position: absolute;   
        left: 5em;
        color: var(--textcolorhf);
        }
        } 

@media (min-width: 1080px){
        main section:nth-of-type(1) h2{
        color: var(--textcolorhf);
        }
        }
        
@media (min-width: 1000px){
        main section:nth-of-type(1) h1{
        position: absolute;   
        left: 5em;
        color: var(--textcolorhf);
        }
        } 
        
@media (min-width: 1000px){
        main section:nth-of-type(1) h2{
        color: var(--textcolorhf);
        }
        }  
        


  /* media tag regels tweede section */
@media (min-width: 1000px){
    main section:nth-of-type(2) img, main section:nth-of-type(3) img, main section:nth-of-type(4) img{
    width: 60em;
        }
        }

@media (min-width: 1000px){
    main section:nth-of-type(2) ul li:nth-of-type(2) img, main section:nth-of-type(3) ul li:nth-of-type(2) img, main section:nth-of-type(4) ul li:nth-of-type(2) img{
    width: 20em;
        }
        }

@media (min-width: 1080px){
    main section:nth-of-type(2) article, main section:nth-of-type(3) article{
        display: flex;
        flex-direction: column;
        position: relative;
        }
        }

@media (min-width: 1080px){
    main section:nth-of-type(2) article ul, main section:nth-of-type(3) article ul, main section:nth-of-type(4) article ul{
        display: flex;
        justify-content: space-between;
        }
        }

@media (min-width: 1080px){
    main section:nth-of-type(2) article p, main section:nth-of-type(3) article p{
        margin-left: 35em;
        position: absolute;
        top: 5em;
        }
        }

@media (min-width: 1080px){
    main section:nth-of-type(4) article p{
        margin-left: 35em;
        position: absolute;
        top: 90em;
        }
        }  

@media (min-width: 1080px){
    main section:nth-of-type(2) img, main section:nth-of-type(3) img, main section:nth-of-type(4) img{
     width: 30em;
        }
        }

@media (min-width: 1080px){
    main section:nth-of-type(2) a, main section:nth-of-type(3) a, main section:nth-of-type(4) a{
        display: inline-block;
        order: 1;
        width: 10em;
        margin-left: 35em;
        }
        } 

@media (min-width: 1080px){
    main section:nth-of-type(2) ul li:nth-child(2) img, main section:nth-of-type(2) p, main section:nth-of-type(3) ul li:nth-child(2) img, main section:nth-of-type(2) p{
        margin-right: 1.5em;
        }
        } 

@media (min-width: 1080px){
    main section:nth-of-type(4) ul li:nth-child(2) img, main section:nth-of-type(2) p{
        margin-right: 1.5em;
        }
        } 

/* media tag regels vijfde section */


 @media (min-width: 700px){
    main section:nth-of-type(5){
        display: flex;
        flex-direction: row;
         }
         }
        
        
@media (min-width: 700px){
    main section:nth-of-type(5)  article:nth-of-type(2) h2{
        position: absolute;
        top: 3em;
        left: 10em;
        }
        }
        
        
@media (min-width: 700px){
    main section:nth-of-type(5)  article:nth-of-type(2) h3{
        position: absolute;
        top: 3em;
        left: 20em;
        }
        }


@media (min-width: 790px){
    main section:nth-of-type(5)  article:nth-of-type(2) h2{
        position: absolute;
        top: 3em;
        left: 12em;
        }
        }
                    
                    
@media (min-width: 790px){
    main section:nth-of-type(5)  article:nth-of-type(2) h3{
        position: absolute;
        top: 3em;
        left: 22em;
        }
        }

@media (min-width: 945px){
    main section:nth-of-type(5)  article:nth-of-type(2) h2{
        position: absolute;
        top: 3em;
        left: 13em;
        }
        }
                                
                                
@media (min-width: 945px){
    main section:nth-of-type(5)  article:nth-of-type(2) h3{
        position: absolute;
        top: 3em;
        left: 24em;
        }
        }

@media (min-width: 1033px){
    main section:nth-of-type(5)  article:nth-of-type(2) h2{
        position: absolute;
        top: 3em;
        left: 17em;
        }
        }
                                            
                                            
 @media (min-width: 1033px){
    main section:nth-of-type(5)  article:nth-of-type(2) h3{
        position: absolute;
        top: 3em;
        left: 30em;
        }
        }



/* 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, main section a{
      background-color: var(--darkmode);
    }
     h1, h2, h3, h4, p, a, p time, img{
      color: var(--lightmode);
    }
     img{
        background-color: var(--lightmode);
      }
  }