*{

    box-sizing: border-box;

    font-family: 'League Spartan';

    scroll-behavior: smooth;



    

}







header {

    background-color:rgb( 141 ,201 ,255);

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 10;

    padding-top: 0.35rem;

    

    

}



header .headerinfo{

    display: inline-block;

    vertical-align: top;

    position: fixed;

    right: 0;

    color: white;

    margin: 0;

    



}



header .headerlogo  {

    display: inline-block;

      

}



header .headerlogo img {

    height: 4.4rem;

    padding-bottom: 0.4rem;

    padding-top: 0.4rem;

    margin-left: 1rem;

}





header .headerinfo ul li  {

    display: inline-block;

    padding:1rem;

    font-weight: bold;

    font-size: 1.4rem;

    font-family: 'League Spartan';

    padding-bottom: 1.5rem;

    padding-top: 1.5rem;

    background-color: transparent;

    margin-right: 0.4rem;

    border-radius: 25px;



   

}



header .headerinfo ul {

    margin: 0;

}



.aboutme  {

    margin-top: 10rem;

    margin-left: 4rem;

    margin-right: 4rem;



}



.aboutme  h1  {



  



}



.aboutme   p {

    font-size: 2rem;

}



.headerinfo a {

    

    color:white;

    text-decoration: none;



}







a:hover {

    color: darkblue;

    text-decoration: underline;

}



.projectenlijst a {

    color:darkblue;

}



.projectenlijst a:hover {

    color:rgb( 141 ,201 ,255) ;

    text-decoration: underline;

}

    





.ankerblack {

    font-family: 'League Spartan';

    color:black;

    text-decoration: none;

    font-weight: bold;

    font-size: 3rem;

    text-decoration: underline solid black;



}







.welkom {

    font-size: 7rem;

    box-sizing: border-box;

    font-family: 'League Spartan';

    color:white;

    text-decoration: none;

    font-weight: bold;

    text-align: center;

    padding-top: 20rem;

    z-index: 2;

    opacity: 100%;

    

}



.welkomtext {

    font-family: 'League Spartan';

    color:white;

    text-decoration: none;

    font-size: 4rem;

    text-align: center;

    box-sizing: border-box;

    margin-bottom: 22rem;

    font-weight: lighter;

    z-index: 2;

    opacity: 100%;



}



.landingspage {

    background-image: url(./backbluestraight.svg);

    width: 100%;

    height: 100vh;

    background-position: bottom;

    background-size: cover;

    border: #8dc9ff 5px solid;

}





.bottom-page {

    background-image: url(./footerbluestraight.svg);

    width: 100%;

    height: 30vh;

    background-position: bottom;

    background-size: cover;

    position: relative;

    background-repeat: no-repeat;

    

    

    

    

}



.bottom-text{

    color: white;

    font-size: 2rem;

    text-align: center;

    position: absolute;     

    bottom: 0;

    margin-left: 1rem;

    

    

}





body {

    margin: 0;

}



.projectenlijst {

    display: inline-table;

    width: 600px;

    padding: 1rem;

    /* color: white; */

    /* background-color: rgb(192, 163, 147); */

    border-radius: 25px;

    margin-left: 3rem;

    margin-right: 3rem;

    padding-bottom: 6rem;

    padding-right: 3rem;

    padding-left: 3rem;







}



.projecttitel{

    text-align: left;

    font-size: 3rem;

    /* color: white;  */

    background-color: rgba( 141 ,201 ,255,0.4) ;

    font-size: 3rem;

    font-weight: bold;

    padding: 2rem;

    width: 700px;

}



.projecteninfo{

    font-size: 2rem;

    list-style-type: none;

    text-align: left;  

    margin-top: 0; 

}



.projecteninfo li {

    padding-top: 20px;

}



.projectencontainer{

    text-align: center;

    

    

}



.projectinfo{

    font-size: 2rem;

    font-weight: normal;

    padding-top: 2rem;

}



#down {



    padding-top:6rem;





   }



#hidden1 {

    display: none;

}


#show {

    

}



.arrow {

    font-size: 2rem; 

    margin: 0; 

    margin-top: 0.4rem;

    opacity: 70%;

    display: inline-block;

}



#pythondown{

    padding-top:6rem;



}



#pythonup{

    padding-top:0rem;



}



.info-kolom {

    font-family: 'League Spartan';

    color:black;

    text-decoration: none;



    font-size: 2rem;



    



}





#steam-icon:hover {

    color: rgb(81, 95, 107) ;

}







body {

      margin: 0;

      overflow-x: hidden;

    }



.wave-animation {

  position: relative;

  width: 100%;

  height: 150px;

  overflow: hidden;

  z-index: 1;

}



.wave-animation svg {

  display: block;

  width: 200%;

  height: 100%;

  animation: wave-move 8s linear infinite;

  background-color: #8dc9ff;

  border:none;



}



.wave-animation-bottom {

  position: relative;

  width: 100%;

  height: 150px;

  overflow: hidden;

  z-index: 1;

}



.wave-animation-bottom svg {

  display: block;

  width: 200%;

  height: 100%;

  animation: wave-move 8s linear infinite;

  background-color: white;

  border:none;



}



@keyframes wave-move {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-37%);

  }

}





.pybutton{

    text-align: center;

    list-style-type: none;

    font-size: 2rem;

    padding:2rem;

    margin-top:2.5rem;

    border-radius: 15px;

    background-color: rgb(28, 146, 254) ;

    color: white;

    border: 5px solid rgba( 141 ,201 ,255,0.4);

}

.pylist{

    padding-left: 18rem;

    padding-right: 18rem;

    margin-top:3rem;

}





.oefeningenlijst {

    display: none;

    text-align: center;

    margin-top: 2rem;

}



.oefeningenlijst li {

    display: inline-block;

    width: 17rem;

    padding: 1.2rem;

    vertical-align: top;

}





.pythontitel{

    color: white;

    text-decoration: underline;

    font-size: 1.5rem;

    display: block;

    text-align: left;

}



.pythontekst{

    display: blok;

    text-align: left;

    font-size: 1.3rem;

    margin-top: 0.7rem;

}