@charset "UTF-8";
html {
margin: 0px; 
background-size: cover;
background-repeat: no-repeat;   
background-color: #161617; 
scroll-behavior: smooth;

} 


#grid-container { 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4,25vh); 
}


ul { 
    text-align: center; 
    list-style: none;    
 
} 

a{  
    color: white; 
    text-decoration: none; 
    font-family: 'Roboto', sans-serif;    
   margin:10px;   
   cursor: pointer;

}  

li { 
    margin:10px; 
    padding:10px; 
    text-align: center; 
    display: inline-block; 
    float:right;
}

.test {  
    height:100px;
    width: 200px; 
    border-radius: 4%; 
    float:left; 
    
} 


@keyframes color-rotate { 
    from { 
        filter: hue-rotate(0deg) ;
    } 
    to { 
        filter: hue-rotate(360deg)
    }
} 

.test:hover { 
animation: color-rotate 1s; 
animation-iteration-count: infinite;
animation-direction: alternate;
}   





.teskt2  { 
    text-align: left; 
    display: grid ; 
    grid-column-start:2; 
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:2;  
    margin-left:4vw;
} 

.teskt2 p { 
    color:white; 
    font-family: 'Roboto', sans-serif;   
    font-size: 16px; 
    width:400px; 
    text-align: left;

}  



.teskt { 
    margin:0 auto; 
    text-align: center;  
}   	

.mijnhoofd {     
    display: block; 
    margin-right: auto; 
    margin-left:auto; 
    margin-top:20vh;
    height:200px; 
    width: 200px; 
    border-radius: 50%;   
    
}   

  .wave { 
      padding:10px; 
  }

.teskt  p { 
    color:white; 
    font-family: 'Roboto', sans-serif;   
    font-size: 30px; 
    width:400px; 
    text-align: left; 
    margin: 0 auto;

}  



.titel23 { 
     color:white; 
     font-family: 'Roboto', sans-serif;   
     font-size: 30px;  
     text-align: center;
}

.logomyself {  
width: 450px;
border-radius: 2%;  
display:grid;  
grid-column-start:2; 
grid-column-end:1;
grid-row-start:1;
grid-row-end:4;   
margin-top:15vh !important; 
margin-left:4vw !important;
}  

.test2 { 
height:100px;
width: 200px; 
border-radius: 4%; 
display: grid; 
grid-column-start:1; 
grid-column-end:1;
grid-row-start:1;
grid-row-end:1;
justify-self: start;
align-self: start;  

}
.fade-in-bottom
{animation:fade-in-bottom .8s ease-in-out both 

} 


 @keyframes fade-in-bottom{0%{transform:translateY(50px);opacity:0}100%{transform:translateY(0);opacity:1}}

 span.wave {
    animation-name: wave-animation;    
    animation-duration: 2.5s;          
    animation-iteration-count: infinite;   
    transform-origin: 70% 70%;        
    display: inline-block;  
    font-size:50px; 
  }
  
  @keyframes wave-animation {
      0% { transform: rotate(  0.0deg) }
     10% { transform: rotate(-10.0deg) }    
     20% { transform: rotate( 12.0deg) }
     30% { transform: rotate(-10.0deg) }
     40% { transform: rotate(  9.0deg) }
     50% { transform: rotate(  0.0deg) }    
    100% { transform: rotate(  0.0deg) }
  } 
 

  /* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
  width: 100%; 
  background-color: #161617; 
  border: black 2px solid;    
  margin: 1;   
  display: grid;  
  align-self: start;   
  justify-self: stretch;
}  

.skills {
  text-align: right; 
  padding-top: 8px;
  padding-bottom: 8px; 
  color: black;    
  display: grid;
  justify-self: stretch; 
  align-self: start;  

}  
a:hover { 
color:#5623E2;
}

.okedan p { 
color:white; 
font-family: 'Roboto', sans-serif;      
 
}
.okedan{ 
    display: grid; 
    grid-column-start:4; 
    grid-column-end:4;
    grid-row-start:2;
    grid-row-end:2; 
    justify-self: stretch; 
    align-self: start; 
}
.html {
width: 90%; 
background-color: #B43387; 
font-family: 'Roboto', sans-serif; 
} 
.css {
width: 90%; 
background-color: #F16D61; 
font-family: 'Roboto', sans-serif; 
} 
.js {
width: 70%; 
background-color: #B43387; 
font-family: 'Roboto', sans-serif; 
}
.php {
width: 75%; 
background-color: #F16D61; 
font-family: 'Roboto', sans-serif; 
}  

.adobe { 
    width: 70%; 
background-color: #B43387; 
font-family: 'Roboto', sans-serif; 
}
.titel { 
    font-size:25px;  
    font-family: 'Roboto', sans-serif;      
    color:white; 

}   
.rulethemall article {
    display:inline-block; 
    text-align: center; 
     padding:10px;
} 
.rulethemall img {
width:325px;
height:325px; 
border-radius: 5%;  

}   
.rulethemall p { 
color:white; 
font-family: 'Roboto', sans-serif;     
font-size: 20px; 
} 
.rulethemall { 
text-align: center;
}    

.titelvanpriject { 
font-size: 30px; 
font-family: 'Roboto', sans-serif;      
color:white;     
margin-left:44vw;
}   




.cool2 { 
    height:475px;
     width: 450px; 
     border:1px solid #5623E2; 
     border-radius: 10px;  
     display: block;
     margin-right:auto; 
     margin-left:auto; 
     margin-top:8vh;

}    
.cool2 p { 
    color:#B43387;  
    font-size: 20px; 
   font-family: 'Roboto', sans-serif;      
   text-align: center; 

}  
.forms2 { 
    width: 300px; 
   font-size:1.2rem; 
   padding:0.6em; 
    margin-left:1vw;  
    background-color: #161617; 
    color: white; 
    border:1px solid #F16D61 ; 
}  

::placeholder { 
    color:white; 
    background-color: black;
}  

.iets { 
border: 1px solid #F16D61 ;  
color: #B43387; 
}  

.girdmeni  { 
float:right;
} 



 


















@media only screen and (max-width: 360px),(max-width: 375px),(max-width: 414px) {   
 
#item-navigatie { 
    display:none;
} 
.test {  
     float:left;
    width: auto; 
    height: 75px;  
    border-radius: 10px;  
    padding:3px; 
} 

.mijnhoofd { 
border-radius: 50%;
display: block;
height:150px;
width:150px;    
margin: 0 auto; 
text-align: center;  
margin-top:20vh;
} 
.teskt { 
text-align: center;
margin: 0 auto;  
width: auto;
} 
.teskt p { 
    color:white; 
    font-family: 'Roboto', sans-serif;   
    font-size: 18px;  
    text-align: center; 
    width: auto;
}  

span.wave{ 
    display:none;
} 

body { 
    padding:0; 
    margin: 0; 
} 

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px; 
  }
  
  .sidenav a {
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size: 30px;
    color: #f48b4d;
    display: block;
    transition: 0.3s;  
    
  }
  
  .sidenav a:hover {
    color: #ffff00;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 20px;}
.menuknop { 
   float:right;
   font-size:45px; 
    cursor:pointer;
    color:#5424e3;   
    margin-right:2vw; 
    display:grid; 
    grid-column-start:1; 
    grid-column-end:1;
    grid-row-start:1;
    grid-row-end:1;
    justify-self: end;  
}

.logomyself { 
    display:none;
} 
.teskt2 { 
    display:none; 
}  

.okedan { 
    display:none;
} 

#grid-container { 
display:none;
} 

#grid-mobile {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5,22vh);
    } 

    .teskt25 { 
   display: grid; 
   grid-column-start:1; 
   grid-column-end:1;
   grid-row-start:3;
   grid-row-end:3;  
   justify-self: center;
    } 
    .teskt25 p { 
    color:white; 
    font-family: 'Roboto', sans-serif;   
    font-size: 13px;  
    text-align: left; 
    width: auto;
    } 
    .mijnhoofd2 { 
border-radius: 50%;
display: block;
height:150px;
width:150px;    
margin: 0 auto; 
text-align: center;  
display: grid; 
grid-column-start:1; 
   grid-column-end:1;
   grid-row-start:2;
   grid-row-end:2; 
    }   
.skill23 { 
display: grid; 
grid-column-start:1; 
grid-column-end:1;
grid-row-start:4;
grid-row-end:4;  
width:220px;
height:220px; 
justify-self: center;
} 
.rulethemall img { 
    height:200px;  
    width:200px; 
    margin:0 auto;
}   

.titelvanpriject { 
    text-align: center;
    font-size:20px;   
    display: block;
    margin: 0 auto;  
    margin-top:10vh;
} 
.cool2 {  
height:450px;
     width: 300px; 
     border:1px solid #5623E2; 
     border-radius: 10px;  
     display: block;
     margin-right:auto; 
     margin-left:auto; 
     margin-top:14vh; 
}  

.forms2 { 
    width: 200px; 
    height:45px; 
    margin-left:1vw;  
    background-color: #161617; 
    color: white; 
    border:1px solid #F16D61 ; 
}   

.voordingen { 
    display: grid; 
    grid-column-start:1; 
       grid-column-end:1;
       grid-row-start:1;
       grid-row-end:1;
       justify-self: start; 
}  

.test2{ 
    display:none;
} 
} 



@media  only screen and (min-width: 1080px) {  
 #grid-mobile { 
display:none;
 } 

 #mySidenav { 
     display:none;
 } 
 .mijnhoofd2 { 
     display:none;
 } 
 .skill23 { 
     display:none; 

 }  

 .teskt25 { 
     display:none;
 } 

 .voordingen { 
     padding:4px;
 } 

 .menuknop { 
     display:none;
 }  

.test { 
    display:none; 
}
}  


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px; 
  }
  
  .sidenav a {
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size: 30px;
    color: #f48b4d;
    display: block;
    transition: 0.3s;  
    
  } 


  
@media  only screen and (min-width: 834px) { 
  .sidenav a:hover {
    color: #ffff00;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 20px;}
.menuknop { 
   float:right;
   font-size:45px; 
    cursor:pointer;
    color:#5424e3;   
    margin-right:2vw; 
    display:grid; 
    grid-column-start:1; 
    grid-column-end:1;
    grid-row-start:1;
    grid-row-end:1;
    justify-self: end;   
    display:none;
} 
}

@media  only screen and (min-width: 415px) {   
.mijnhoofd2 { 
    display:none;
} 
.skill23 { 
    display:none;
} 
.test { 
    display:none;
} 

.teskt25 { 
    display:none;
}   
}

@media  only screen and (min-width: 414px) { 
    .test { 
        display:block; 
    } 
} 
 

@media  only screen and (min-width: 360px) and (max-width:1080px) { 
.test2 { 
    display:none;  
} 

}  
@media  only screen and (min-width: 415px) and (max-width:1080px) { 

.menuknop{ 
    display:none;
} 
}