*, *::after, *::before {
    box-sizing:border-box;  
}

.teruglink {
    position: absolute;
    left: 0;
    top: 0;
    text-decoration: none;
    color: rgb(35, 35, 95);
    background-color: white;
    padding: .5rem;
}

.teruglink:hover {
    color: rgb(147, 147, 247);
    transition: .3s ease-in-out; 
}

html, body {
    height:100%;
    width:100%;
    margin:0;
    overflow: hidden;
}

:root {
    --wolkgradient: linear-gradient(white, #bbfff2);
  } 

.lente .lucht{
    width: 100%;
    height: 60%;
    background-image: linear-gradient(#b3edfe, #9cd0f9, #aad8ff, #93c6ef, 	#65a7de );
}
.zomer .lucht{
    width:100%;
    height:60%;
    background-image: linear-gradient(#01CBFE, #66E1FE, #B1FFFF, #FFCC1E, #FFFBBA, #009EDA );
}

.herfst .lucht{
    width:100%;
    height:60%;
    background-image: linear-gradient(#ae5c0e, #e4732d, #f9c364, #97baf1,	#599ed9, #599ed9  );
}

.winter .lucht{
    width:100%;
    height:60%;
    background-image: linear-gradient(#C9C9C9, #E3E3E3, #9AD3DE, #718EBB);
}

.wolkje1{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 280px;
    height: 90px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 24%;
    left: 27%;
    animation: wolk-beweging 67s linear infinite forwards;
  }

.wolkje2{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 150px;
    height: 80px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 40%;
    left: 50%;
    animation: wolk-beweging 40s linear infinite forwards;
  }

.wolkje3{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 300px;
    height: 100px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 12%;
    left: 73%;
    animation: wolk-beweging 57s linear infinite forwards;
  }

.wolkje4{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 180px;
    height: 100px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 25%;
    left: 60%;
    animation: wolk-beweging 100s linear infinite forwards;
  }

.wolkje5{
    clip-path: polygon(9% 67%, 9% 67%, 8% 66%, 8% 65%, 8% 64%, 8% 63%, 8% 61%, 8% 61%, 8% 60%, 9% 58%, 10% 57%, 11% 56%, 12% 56%, 14% 56%, 15% 56%, 16% 57%, 17% 58%, 17% 59%, 18% 60%, 18% 60%, 18% 60%, 19% 58%, 19% 57%, 19% 56%, 19% 55%, 19% 53%, 20% 51%, 21% 50%, 22% 49%, 24% 48%, 26% 48%, 26% 48%, 27% 48%, 28% 49%, 29% 50%, 30% 51%, 30% 52%, 30% 54%, 30% 54%, 31% 54%, 32% 53%, 33% 52%, 33% 51%, 34% 50%, 35% 48%, 36% 48%, 37% 47%, 38% 47%, 39% 47%, 40% 48%, 41% 49%, 42% 50%, 42% 51%, 42% 52%, 42% 52%, 42% 52%, 43% 51%, 44% 50%, 44% 49%, 45% 48%, 46% 47%, 48% 46%, 49% 46%, 51% 46%, 52% 47%, 53% 48%, 53% 49%, 54% 51%, 54% 53%, 54% 54%, 55% 54%, 56% 52%, 57% 51%, 59% 49%, 61% 49%, 62% 49%, 64% 49%, 65% 50%, 66% 51%, 66% 52%, 67% 56%, 67% 56%, 66% 57%, 66% 59%, 66% 59%, 65% 59%, 66% 61%, 67% 60%, 68% 59%, 69% 59%, 70% 59%, 71% 60%, 72% 60%, 72% 61%, 73% 63%, 73% 64%, 73% 66%, 72% 67%, 72% 68%, 71% 70%, 71% 71%, 68% 72%, 68% 72%, 66% 72%, 65% 72%, 64% 71%, 63% 71%, 63% 70%, 62% 70%, 61% 70%, 61% 71%, 60% 73%, 59% 74%, 58% 74%, 57% 75%, 55% 76%, 53% 76%, 52% 75%, 51% 75%, 50% 73%, 49% 72%, 48% 71%, 48% 71%, 48% 71%, 46% 73%, 45% 75%, 44% 76%, 43% 77%, 40% 78%, 38% 78%, 37% 78%, 35% 76%, 34% 75%, 33% 72%, 32% 71%, 32% 69%, 31% 69%, 30% 71%, 29% 73%, 27% 75%, 25% 76%, 23% 77%, 20% 77%, 19% 77%, 18% 76%, 17% 74%, 16% 73%, 16% 72%, 16% 72%, 15% 73%, 14% 74%, 12% 74%, 10% 69%, 10% 71%, 10% 72%, 10% 72%, 11% 73%, 12% 73%);
    width: 200px;
    height: 100px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 25%;
    left: 5%;
    animation: wolk-beweging 95s linear infinite forwards;
  }
  
.wolkje6{
    clip-path: polygon(15% 63%, 14% 63%, 13% 62%, 13% 62%, 13% 60%, 13% 59%, 13% 57%, 14% 56%, 14% 55%, 16% 54%, 17% 54%, 18% 54%, 19% 54%, 20% 55%, 21% 55%, 21% 56%, 22% 56%, 22% 55%, 22% 53%, 23% 52%, 24% 50%, 24% 50%, 25% 49%, 26% 48%, 26% 48%, 28% 48%, 29% 48%, 31% 48%, 32% 49%, 32% 50%, 32% 51%, 33% 52%, 33% 53%, 34% 52%, 34% 51%, 34% 50%, 35% 49%, 35% 48%, 36% 47%, 36% 46%, 36% 45%, 37% 44%, 38% 43%, 39% 42%, 41% 42%, 42% 42%, 43% 43%, 44% 44%, 45% 45%, 45% 47%, 45% 48%, 45% 50%, 45% 50%, 46% 48%, 46% 47%, 47% 46%, 48% 45%, 51% 44%, 52% 44%, 52% 45%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 51%, 55% 51%, 56% 50%, 57% 49%, 59% 48%, 60% 48%, 61% 48%, 63% 48%, 65% 48%, 66% 49%, 67% 50%, 68% 51%, 68% 53%, 68% 53%, 68% 54%, 67% 55%, 66% 57%, 66% 57%, 65% 58%, 65% 58%, 66% 58%, 66% 58%, 68% 58%, 71% 59%, 72% 59%, 72% 59%, 73% 60%, 73% 61%, 74% 62%, 74% 63%, 74% 63%, 74% 65%, 73% 66%, 73% 67%, 72% 68%, 71% 69%, 70% 69%, 70% 70%, 69% 70%, 67% 70%, 66% 70%, 65% 70%, 63% 69%, 62% 68%, 61% 67%, 61% 67%, 60% 69%, 59% 70%, 57% 71%, 56% 71%, 53% 71%, 51% 70%, 50% 68%, 50% 67%, 49% 65%, 49% 64%, 48% 65%, 48% 66%, 47% 68%, 44% 70%, 42% 71%, 41% 71%, 40% 71%, 37% 70%, 35% 67%, 35% 65%, 34% 63%, 34% 61%, 34% 61%, 33% 62%, 29% 66%, 28% 67%, 23% 68%, 22% 67%, 20% 67%, 18% 65%, 17% 64%, 16% 64%, 16% 63%);
    width: 250px;
    height: 100px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 30%;
    left: 15%;
    animation: wolk-beweging 75s linear infinite forwards;
}

.wolkje7{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 250px;
    height: 100px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 5%;
    left: 45%;
    animation: wolk-beweging 73s linear infinite forwards;
  }

.wolkje8{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 100px;
    height: 60px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 20%;
    left: 20%;
  
    animation: wolk-beweging 34s linear infinite forwards;
  }
  
.wolkje9{
    clip-path: polygon(18% 63%, 17% 62%, 17% 60%, 16% 59%, 16% 58%, 17% 56%, 17% 55%, 18% 53%, 20% 52%, 21% 51%, 22% 51%, 24% 51%, 26% 51%, 26% 51%, 27% 52%, 28% 53%, 28% 54%, 29% 54%, 29% 54%, 30% 52%, 30% 51%, 30% 50%, 31% 48%, 31% 48%, 33% 46%, 35% 45%, 36% 45%, 38% 44%, 39% 44%, 40% 45%, 41% 46%, 42% 48%, 42% 49%, 42% 49%, 43% 49%, 43% 47%, 44% 46%, 45% 45%, 47% 43%, 48% 43%, 49% 43%, 51% 43%, 52% 43%, 53% 45%, 54% 46%, 54% 48%, 54% 50%, 54% 50%, 54% 52%, 55% 51%, 56% 49%, 58% 48%, 59% 47%, 60% 46%, 62% 46%, 63% 46%, 64% 47%, 65% 48%, 66% 49%, 66% 51%, 66% 52%, 66% 53%, 65% 55%, 65% 55%, 65% 55%, 69% 54%, 70% 53%, 71% 53%, 73% 53%, 75% 54%, 76% 55%, 78% 57%, 78% 58%, 78% 59%, 78% 60%, 78% 62%, 78% 64%, 77% 65%, 76% 66%, 75% 67%, 74% 68%, 72% 68%, 70% 68%, 69% 68%, 68% 68%, 66% 66%, 66% 66%, 66% 67%, 65% 69%, 64% 70%, 64% 71%, 61% 72%, 60% 72%, 59% 72%, 57% 71%, 56% 69%, 55% 68%, 54% 66%, 54% 66%, 53% 67%, 53% 69%, 50% 71%, 49% 72%, 47% 73%, 45% 73%, 42% 71%, 42% 70%, 41% 68%, 41% 66%, 41% 65%, 40% 67%, 39% 68%, 38% 70%, 37% 71%, 34% 72%, 33% 72%, 32% 72%, 31% 71%, 30% 69%, 29% 67%, 29% 67%, 29% 66%, 29% 66%, 28% 67%, 27% 68%, 25% 69%, 24% 70%, 22% 69%, 21% 69%, 20% 68%, 19% 66%, 18% 65%, 18% 64%);
    width: 250px;
    height: 120px;
    position: absolute;
    background-image: var(--wolkgradient);
    top: 32%;
    left: 80%;
    animation: wolk-beweging 94s linear infinite forwards;
  }

  @keyframes wolk-beweging{
    0%{
      left: -10%;
    }
    
    100%{
      left: 100%;
    } 
  }  
.ondergrond{
    height: 40%;
    width:100%;
    background-color: #55c048;
}

.boom_container{
    position: absolute;
    width: 900px;
    height: 60%;
    left: calc(50% - 250px);
    top: 25%;
    transition: transform 1s;
    transform-origin: 25% 25%;
}

.salto{
    transform: rotate(360deg) translateY(-50%);
}

.beweging{
    animation: boombeweging 10s;
} 

@keyframes boombeweging{
    0%{
        transform: translateX(0%);
    }
    
    100%{
        transform: translateX(170%);
    }
}

.schudanimatie1{
    animation: schudden1 1s;
    animation-iteration-count: 2;
}

.schudanimatie2{
    animation: schudden2 1s;
    animation-iteration-count: 2;
}

.schudanimatie3{
    animation: schudden3 1s;
    animation-iteration-count: 2;
}

@keyframes schudden1{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(1%);
    }
    50%{
        transform: translateX(-1%);
    }
    100%{
        transform: translateX(1%);
    }
}

@keyframes schudden2{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(1%);
    }
    50%{
        transform: translateX(-1%);
    }
    100%{
        transform: translateX(1%);
    }
}

@keyframes schudden3{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(1%);
    }
    50%{
        transform: translateX(-1%);
    }
    100%{
        transform: translateX(1%);
    }
}
.boomstam{
    clip-path: polygon(16% 91%, 20% 88%, 29% 80%, 34% 70%, 36% 63%, 36% 45%, 39% 29%, 41% 21%, 43% 18%, 46% 15%, 50% 14%, 54% 17%, 55% 21%, 57% 28%, 59% 40%, 59% 46%, 60% 60%, 62% 71%, 65% 78%, 69% 85%, 74% 90%, 77% 93%, 77% 95%, 75% 97%, 71% 96%, 68% 94%, 66% 92%, 62% 91%, 60% 93%, 60% 95%, 58% 97%, 56% 97%, 54% 95%, 53% 93%, 53% 90%, 51% 89%, 48% 89%, 43% 91%, 39% 93%, 37% 94%, 35% 93%, 35% 92%, 38% 89%, 38% 87%, 34% 88%, 32% 89%, 28% 90%, 25% 91%, 21% 92%, 19% 92%, 17% 91%);
    background-color:#613B16 ;
    width: 500px;
    height: 100%;
    position: absolute;
}

.linkerarm{
    clip-path: polygon(56% 60%, 48% 58%, 43% 56%, 40% 52%, 37% 47%, 34% 44%, 34% 46%, 35% 49%, 31% 49%, 33% 51%, 35% 52%, 36% 54%, 38% 56%, 42% 58%, 46% 60%, 51% 61%, 58% 62%, 64% 62%, 64% 60%);
    position: absolute;
    background-color:#613B16 ;
    width: 500px;
    height: 600px;
    right: 60%;
}

.rechterarm{
    clip-path: polygon(17% 73%, 24% 72%, 29% 71%, 34% 68%, 38% 63%, 41% 58%, 43% 52%, 45% 48%, 45% 52%, 46% 53%, 49% 49%, 48% 53%, 47% 56%, 45% 57%, 44% 59%, 42% 62%, 40% 65%, 37% 68%, 34% 71%, 31% 73%, 27% 74%, 24% 76%, 20% 76%, 17% 76%);
    position: absolute;
    background-color:#613B16;
    width: 500px;
    height: 600px;
    left: 20%;
    bottom: 7%;
}

.rechteroog{
    clip-path: ellipse(25% 40% at 50% 50%);
    background-color:#eeeeee ;
    position: absolute;
    width: 65px;
    height: 100px;
    bottom: 40%;
    left: 46%;
    transition: 0.3s ease;
}

.dronken .rechteroog {
    transform: rotate(20deg);
}

.linkeroog{
    clip-path: ellipse(25% 40% at 50% 50%);
    background-color:#eeeeee ;
    position: absolute;
    width: 65px;
    height: 100px;
    bottom: 40%;
    left: 36%;  
    transition: 0.3s ease;
}

.dronken .linkeroog {
    transform: rotate(-15deg) translateY(-10px);
}

.rechterpupil{
    background-color: black;
    position: absolute;
    clip-path: circle(50% at 50% 50%);
    width: 30px;
    height: 30px;
    bottom: 35%;
    left: 26%;
    animation: bewegingpupil 6s ease-in-out infinite;
}
.linkerpupil{
    background-color: black;
    position: absolute;
    clip-path: circle(50% at 50% 50%);
    width: 30px;
    height: 30px;
    bottom: 35%;
    left: 26%;
    animation: bewegingpupil 6s ease-in-out infinite;
}

@keyframes bewegingpupil{
    0%, 10%{
        transform: translateX(0)
    }
    20% {
        transform: translateX(-20%)
    }
    30%, 80%{
        transform: translateX(0)
    }
    90% {
        transform: translateX(20%)
    }
    100% {
        transform: translateX(0)
    }
}

.neus{
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: hsl(31, 62%, 14%) ;
    left: 25%;
    bottom: 21%;
    clip-path: polygon(57% 41%, 49% 46%, 40% 48%, 34% 48%, 31% 53%, 32% 57%, 39% 60%, 48% 60%, 54% 63%, 57% 65%);
}

.mond{
    background-color:#ff726f;
    clip-path: ellipse(25% 15% at 50% 50%);
    width: 150px;
    height: 90px;
    position: absolute;
    bottom: 20%;
    left: 32%;
}



.tong{
    background-color:pink;
    clip-path: ellipse(25% 15% at 50% 50%);
    width: 150px;
    height: 90px;
    position: absolute;
    top: 20%;

}


/*!!!!!!!!!! ALLE APPELS !!!!!!!!!!*/


.appel1{
    transition: all 2s ease;
}

.zomer .appel1{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 40%;
    bottom: 50%;
}

.appel2{
    transition: all 2s ease;
}

.zomer .appel2{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 35%;
    bottom: 48%;
}

.appel3{
    transition: all 2s ease;
}

.zomer .appel3{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 28%;
    bottom: 42%;
}

.appel4{
    transition: all 2s ease;
}

.zomer .appel4{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 55%;
    bottom: 42%;
}

.appel5{
    transition: all 2s ease;
}

.zomer .appel5{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 44%;
    bottom: 42%;
}


.appel6{
    transition: all 2s ease;
}

.zomer .appel6{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 35%;
    bottom: 30%;
}

.appel7{
    transition: all 2s ease;
}

.zomer .appel7{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 48%;
    bottom: 28%;
}

.appel8{
    transition: all 2s ease;
}

.zomer .appel8{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 40%;
    bottom: 50%;
}

.appel9{
    transition: all 2s ease;
}

.zomer .appel9{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 30%;
    bottom: 40%;
}

.appel10{
    transition: all 2s ease;
}

.zomer .appel10{
    clip-path: polygon(42% 84%, 39% 84%, 37% 83%, 36% 82%, 34% 81%, 33% 78%, 31% 74%, 31% 71%, 32% 67%, 33% 65%, 36% 62%, 38% 61%, 41% 59%, 43% 55%, 43% 53%, 44% 49%, 44% 58%, 46% 59%, 49% 59%, 50% 62%, 53% 62%, 54% 63%, 55% 64%, 57% 66%, 57% 69%, 58% 71%, 58% 72%, 57% 75%, 57% 78%, 56% 80%, 54% 83%, 52% 84%, 50% 85%, 48% 85%, 46% 84%, 45% 83%);
    width: 60px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 25%;
    bottom: 28%;
}


/* !!!!!!!!!!!! BLADEREN EN ALLE KLEUREN !!!!!!!!!!! */


.bladeren1{
    clip-path: polygon(29% 82%, 28% 82%, 27% 81%, 27% 81%, 26% 80%, 25% 79%, 24% 78%, 24% 77%, 25% 76%, 24% 76%, 22% 75%, 22% 73%, 22% 71%, 23% 71%, 22% 70%, 22% 69%, 22% 68%, 23% 67%, 22% 65%, 22% 64%, 22% 63%, 23% 63%, 23% 61%, 23% 60%, 23% 60%, 24% 58%, 23% 56%, 23% 55%, 24% 55%, 24% 55%, 24% 53%, 24% 52%, 26% 52%, 26% 50%, 26% 49%, 27% 49%, 28% 49%, 29% 46%, 30% 46%, 30% 47%, 30% 46%, 31% 46%, 32% 44%, 32% 44%, 33% 45%, 34% 43%, 34% 43%, 35% 42%, 35% 43%, 36% 40%, 37% 40%, 37% 41%, 38% 39%, 39% 40%, 40% 39%, 41% 38%, 42% 39%, 42% 40%, 43% 39%, 44% 40%, 45% 40%, 46% 40%, 46% 41%, 47% 41%, 47% 42%, 49% 41%, 49% 43%, 50% 42%, 50% 44%, 54% 43%, 53% 44%, 54% 44%, 52% 45%, 52% 44%, 51% 44%, 52% 44%, 53% 45%, 54% 45%, 55% 46%, 56% 46%, 56% 46%, 57% 46%, 57% 48%, 58% 48%, 58% 49%, 58% 50%, 59% 50%, 59% 50%, 60% 52%, 60% 52%, 61% 53%, 62% 54%, 64% 54%, 63% 55%, 64% 55%, 64% 56%, 64% 57%, 65% 57%, 65% 58%, 66% 58%, 66% 59%, 65% 60%, 66% 61%, 65% 62%, 65% 63%, 66% 64%, 65% 64%, 66% 65%, 65% 66%, 66% 68%, 64% 67%, 65% 69%, 64% 68%, 64% 69%, 63% 70%, 63% 70%, 62% 71%, 62% 72%, 61% 72%, 61% 73%, 61% 73%, 60% 74%, 60% 75%, 58% 74%, 59% 75%, 58% 75%, 58% 76%, 57% 77%, 57% 77%, 56% 77%, 56% 79%, 54% 80%, 54% 80%, 54% 79%, 53% 81%, 52% 80%, 52% 81%, 51% 81%, 50% 81%, 50% 82%, 50% 82%, 49% 82%, 49% 83%, 47% 83%, 47% 83%, 46% 83%, 45% 84%, 45% 83%, 44% 85%, 43% 84%, 42% 84%, 42% 84%, 40% 84%, 40% 84%, 38% 84%, 38% 83%, 37% 84%, 36% 84%, 35% 84%, 34% 83%, 33% 83%, 31% 84%, 31% 83%, 30% 83%, 30% 82%);
    background-color: #5a7739;
    width: 900px;
    height: 900px;
    position: absolute;
    bottom: 25%;
    right: 16%;
    
    transition: all 2s ease;
}

.herfst .bladeren1 {
    background-color: transparent;
}

.winter .bladeren1 {
    background-color: transparent;
}

.zomer .bladeren1 {
    background-color:#708965;
}

.lente .bladeren1 {
    background-color: #5e8d5a;
}
.bladeren2{
    clip-path: polygon(29% 82%, 28% 82%, 27% 81%, 27% 81%, 26% 80%, 25% 79%, 24% 78%, 24% 77%, 25% 76%, 24% 76%, 22% 75%, 22% 73%, 22% 71%, 23% 71%, 22% 70%, 22% 69%, 22% 68%, 23% 67%, 22% 65%, 22% 64%, 22% 63%, 23% 63%, 23% 61%, 23% 60%, 23% 60%, 24% 58%, 23% 56%, 23% 55%, 24% 55%, 24% 55%, 24% 53%, 24% 52%, 26% 52%, 26% 50%, 26% 49%, 27% 49%, 28% 49%, 29% 46%, 30% 46%, 30% 47%, 30% 46%, 31% 46%, 32% 44%, 32% 44%, 33% 45%, 34% 43%, 34% 43%, 35% 42%, 35% 43%, 36% 40%, 37% 40%, 37% 41%, 38% 39%, 39% 40%, 40% 39%, 41% 38%, 42% 39%, 42% 40%, 43% 39%, 44% 40%, 45% 40%, 46% 40%, 46% 41%, 47% 41%, 47% 42%, 49% 41%, 49% 43%, 50% 42%, 50% 44%, 54% 43%, 53% 44%, 54% 44%, 52% 45%, 52% 44%, 51% 44%, 52% 44%, 53% 45%, 54% 45%, 55% 46%, 56% 46%, 56% 46%, 57% 46%, 57% 48%, 58% 48%, 58% 49%, 58% 50%, 59% 50%, 59% 50%, 60% 52%, 60% 52%, 61% 53%, 62% 54%, 64% 54%, 63% 55%, 64% 55%, 64% 56%, 64% 57%, 65% 57%, 65% 58%, 66% 58%, 66% 59%, 65% 60%, 66% 61%, 65% 62%, 65% 63%, 66% 64%, 65% 64%, 66% 65%, 65% 66%, 66% 68%, 64% 67%, 65% 69%, 64% 68%, 64% 69%, 63% 70%, 63% 70%, 62% 71%, 62% 72%, 61% 72%, 61% 73%, 61% 73%, 60% 74%, 60% 75%, 58% 74%, 59% 75%, 58% 75%, 58% 76%, 57% 77%, 57% 77%, 56% 77%, 56% 79%, 54% 80%, 54% 80%, 54% 79%, 53% 81%, 52% 80%, 52% 81%, 51% 81%, 50% 81%, 50% 82%, 50% 82%, 49% 82%, 49% 83%, 47% 83%, 47% 83%, 46% 83%, 45% 84%, 45% 83%, 44% 85%, 43% 84%, 42% 84%, 42% 84%, 40% 84%, 40% 84%, 38% 84%, 38% 83%, 37% 84%, 36% 84%, 35% 84%, 34% 83%, 33% 83%, 31% 84%, 31% 83%, 30% 83%, 30% 82%);
    background-color: #708965;
    width: 600px;
    height: 600px;
    position: absolute;
    bottom: 40%;
    transition: all 2s ease;
    
}

.herfst .bladeren2 {
    background-color: #c95202;
}

.winter .bladeren2 {
    background-color: transparent;
}

.zomer .bladeren2 {
    background-color:#708965;
}

.lente .bladeren2 {
    background-color: #5e8d5a;
}

.buttons {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.button {
    width: 100px;
    height: 50px;
    margin: 16px;
    border: none;
    background: lightgrey;
    color: #333;
    cursor: pointer;
    transition: 0.3s ease;
    font-weight: bold;
    border-radius: 8px;
}

.button:hover {
    background: saddlebrown;
    color: #fff;
    transform: translateY(-8px)
}

/* !!!!!!!!!!! TEKSTWOLKJE BIJ WINTER !!!!!!!!!!!! */

.winter .tekstwolkwinter{
    width: 300px;
    height: 300px;
    clip-path: polygon(81% 92%, 71% 90%, 64% 85%, 59% 77%, 44% 76%, 36% 76%, 27% 70%, 22% 59%, 31% 48%, 46% 43%, 59% 44%, 79% 46%, 90% 55%, 91% 68%, 85% 73%, 72% 77%, 74% 83%, 79% 88%);
    position: absolute;
    right: 90%; 
    bottom: 30%;
    background-color: white;
}

.herfst .tekstwolkwinter{
    color: transparent;
}

.winter .tekstwinter{
    color: black;
    position: absolute;
    left: 45%;
    bottom: 35%;
}

.lente .tekstwolkwinter{
    color: transparent;
}

.zomer .tekstwolkwinter{
    color: transparent;
}

/* !!!!!!!!!TEKSTWOLKEN BIJ PRIKKEN!!!!!!!!!!! */

.schudtekst1 .tekstwolkprik1{
    width: 300px;
    height: 300px;
    clip-path: polygon(81% 92%, 71% 90%, 64% 85%, 59% 77%, 44% 76%, 36% 76%, 27% 70%, 22% 59%, 31% 48%, 46% 43%, 59% 44%, 79% 46%, 90% 55%, 91% 68%, 85% 73%, 72% 77%, 74% 83%, 79% 88%);
    position: absolute;
    left: 25%; 
    bottom: 30%;
    background-color: white;
}

.schudtekst1 .tekstprik1{
    color: black;
    position: absolute;
    left: 32%;
    bottom:35%;
}

.schudtekst2 .tekstwolkprik2{
    width: 300px;
    height: 300px;
    clip-path: polygon(81% 92%, 71% 90%, 64% 85%, 59% 77%, 44% 76%, 36% 76%, 27% 70%, 22% 59%, 31% 48%, 46% 43%, 59% 44%, 79% 46%, 90% 55%, 91% 68%, 85% 73%, 72% 77%, 74% 83%, 79% 88%);
    position: absolute;
    left: 25%; 
    bottom: 30%;
    background-color: white;
}

.schudtekst2 .tekstprik2{
    color: black;
    position: absolute;
    left: 40%;
    bottom:35%;
}

.schudtekst3 .tekstwolkprik3{
    width: 300px;
    height: 300px;
    clip-path: polygon(81% 92%, 71% 90%, 64% 85%, 59% 77%, 44% 76%, 36% 76%, 27% 70%, 22% 59%, 31% 48%, 46% 43%, 59% 44%, 79% 46%, 90% 55%, 91% 68%, 85% 73%, 72% 77%, 74% 83%, 79% 88%);
    position: absolute;
    left: 25%; 
    bottom: 30%;
    background-color: white;
}

.schudtekst3 .tekstprik3{
    color: black;
    position: absolute;
    left: 34%;
    bottom:32%;
}
/* !!!!!!!!!!!!!! ALLE PLANTJES !!!!!!!!!!!!!! */

.ondergrond > div{
    transition: all 3s ease;
}

.lente .plantje1{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: white;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 10%;
    bottom: 15%;
    transition: all 2s ease;
}

.lente .plantje2{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: #e06377;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 60%;

}

.lente .plantje3{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: #5b9aa0;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 75%;
    bottom: 19%;
}

.lente .plantje4{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: #622569;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 39%;
    bottom: 14%;
}

.lente .plantje5{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: #b8a9c9;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 45%;
    bottom: 12%;
}

.lente .plantje6{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: #f9d5e5;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 50%;
    bottom: 10%;
}

.lente .plantje7{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: rgb(245, 241, 7);
    height: 80px;
    width: 80px;
    position: absolute;
    left: 10%;
    bottom: 15%;
}

.lente .plantje8{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: rgb(194, 121, 26);
    height: 80px;
    width: 80px;
    position: absolute;
    left: 80%;

}

.lente .plantje9{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: rgb(128, 16, 16);
    height: 80px;
    width: 80px;
    position: absolute;
    left: 60%;
    bottom: 15%;
}

.lente .plantje10{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: rgb(12, 91, 182);
    height: 80px;
    width: 80px;
    position: absolute;
    left: 22%;
    bottom: 18%;
}

.lente .plantje11{
    clip-path: polygon(42% 92%, 42% 87%, 42% 82%, 42% 78%, 41% 74%, 41% 69%, 38% 68%, 34% 69%, 32% 68%, 33% 64%, 31% 62%, 29% 59%, 33% 58%, 35% 56%, 33% 53%, 36% 52%, 38% 54%, 39% 52%, 42% 49%, 44% 54%, 45% 53%, 47% 50%, 50% 52%, 48% 55%, 52% 56%, 51% 59%, 50% 59%, 53% 62%, 51% 64%, 49% 64%, 50% 67%, 49% 69%, 47% 69%, 46% 71%, 44% 75%, 44% 80%, 45% 85%, 45% 90%, 45% 93%);
    background-color: rgb(187, 236, 6);
    height: 80px;
    width: 80px;
    position: absolute;
    left: 20%;
    bottom: 10%;
}

.boomstrook{
    width: 100%;
    height: 1.5%;
    background-color: #613B16;
    position: absolute;
    bottom: 40%;
}

.groenstrook{
    transition: all 2s ease;
}

.lente .groenstrook{
    height: 110%;
    width: 100%;
    background-color: #5e8d5a;
    position: absolute;
    bottom: 70%;
}

.zomer .groenstrook{
    height: 110%;
    width: 100%;
    background-color: #708965;
    position: absolute;
    bottom: 70%;
}

.winter .groenstrook{
    height: 110%;
    width: 100%;
    background-color: transparent;
    position: absolute;
    bottom: 70%;
}

.herfst .groenstrook{
    height: 50%;
    width: 100%;
    background-color: #c95202;
    position: absolute;
    bottom: 70%;
}

.seizoenstekst{
    color: white;
    position: absolute;
    left: 26%;
    bottom: 35%;
    font-size: 13px;
}

.locatie_seizoen{
    width: 340px;
    height: 400px;
    background-image: linear-gradient(to right, black , #482218, #482218, #5a382f, #5a382f, #482218);
    position: absolute;
    left: 1%;
    bottom: 1%;
    clip-path: polygon(39% 91%, 39% 87%, 39% 83%, 39% 78%, 39% 76%, 39% 73%, 39% 70%, 36% 69%, 32% 69%, 29% 69%, 26% 69%, 22% 67%, 23% 64%, 22% 60%, 22% 56%, 22% 53%, 24% 51%, 28% 49%, 32% 49%, 38% 50%, 42% 49%, 48% 49%, 54% 49%, 59% 50%, 63% 50%, 67% 50%, 67% 56%, 66% 61%, 66% 65%, 65% 68%, 62% 69%, 57% 69%, 53% 70%, 48% 71%, 45% 71%, 43% 71%, 42% 92%);
}