body, html{
    font-family: "mendl-sans-dawn", sans-serif;
    font-size: 18px;
    font-weight: 800;
    
}
html{
    background-image: url(../images/achtergrond-portfolio.png);
    background-repeat: no-repeat;
    background-position: center top;

}

h1{
    font-size: 15rem;
    font-weight: 800;
    margin-bottom: 2vh;
    padding-top: 500 px;
    text-align: right;
}
h2{
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 2vh;
    margin: auto;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 4rem;
}

.hero h2{
    text-align: right;
}
.hero h3{
    text-align: right;
    color: #0CAB59;
}
h3{
    margin: 1rem 0rem;
    font-size: 2rem;
    font-weight: bold   ;
}
a {
    color: yellow;
    text-decoration: none;
    
}
span{
    font-size: 5rem;
    font-weight: bold;
}
p{
      text-align: center;
}
#button {
    display: inline-block;
    padding: 1.5rem;
    background-color: black;
    text-decoration: none;
    color: white;
    border-radius: 10px;
}



.divmain-desktop{
   justify-content: center;
}
.element{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 123px;
    align-content: center;
    text-align: center;
    padding: 1vw;
}
.element p{
    text-wrap: wrap;
    width: 550px;
}
.element h2{
    text-wrap: wrap;
    width: 550px;
}

.hero {
    height: 650px;
    align-content: center;
    width: 60vw;
   justify-content: center;
}

.slide-in-links {
  animation-duration: 2s;
  animation-name: slide-in-links;
}

@keyframes slide-in-links {
  from {
    translate: -150vw 0;
  }

  to {
    translate: 0 0;
  }
}
.slide-in-rechts {
  animation-duration: 2s;
  animation-name: slide-in-rechts;
}

@keyframes slide-in-rechts {
  from {
    translate: 150vw 0;
  }

  to {
    translate: 0 0;
  }
}





header{
    width: 90vw;
    margin: 2vh auto;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
header ul{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    font-size: 2rem;
}
header ul li a{
    color: black;
    text-decoration: none;
    font-weight: bold;

}






@media screen and (max-width: 768px) {

    footer{
        flex-direction: column-reverse;
        align-items: center;
    }
    footer img{
        width: 40vw;
    }
    footer ul  {
        padding: 2rem 0rem;
    }
}

html {
      cursor: none; 
    }
    body     {
      cursor: none; 
    }
    a   {
        cursor: none;
    }
    #custom-cursor {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: grey; 
      border-width: 4px;
      border-color: #0CAB59;
      border-style: solid;
      border-radius: 50%;
      pointer-events: none; 
      opacity: 60%;
    }

     .divmain-mobile{
            display: none;
        }
        img:hover{
            width: 600px;
        }

    @media screen and (max-width: 768px) {

        .divmain-desktop{
            display: none;
        }
        .divmain-mobile{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .element{
            flex-direction: column;
            
        }
        img{
            width: 80%;
            height: auto;
            align-self: center;
        }
        img:hover{
            width: 90%;
        }

}