.animation-wrapper{
  position: relative;
}
.canvas-holder{
    width:100%;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56%;

}

.holder{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    display: block;
}


.bovenopAnim{
  position: absolute;
  max-width: 50vw;
}


.sloganblok {
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%) rotate(-2deg);
  background-color: #b2f2e9; 
  padding: 3rem 2rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #123c3c;
  max-width: 50%;
  
}

.sloganblok::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 30%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 30px solid #b2f2e9;
}


@media (max-width: 768px) {
  .pause-button {
    position: static;
    margin: 1rem auto;
    display: flex;
    transform: translateX(0);
    
  }

  .pause-button:hover{
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     transform: translateX(0) translateY(-2px);
    }
  
  .animatie-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sloganblok {
    position: static;
    margin: 1rem auto; /* Boven/onder 1rem ruimte, links/rechts automatisch */
    display: block; /* Zorgt ervoor dat margin: auto werkt */
    transform:rotate(-2deg);
    margin-top: 3rem;
  }
}