/* CSS Document */
*, *::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);
  --vogelkleur: white;
  --luchtkleur: linear-gradient(#4aa5d2, #e1eed2);
  --zandrondje: #fbf33e;
} 

html {
  font-size: var(---base-size);
}

h1 {
  color:crimson;
}

/* Hier begint de lucht als container, en haar elementen */

.lucht{
  width:100%;
  height:65%;
  background-image: var(--luchtkleur);
}

.vogel1{
  clip-path: polygon(36% 33%, 46% 54%, 85% 74%, 40% 61%, 25% 61%, 35% 50%, 28% 28%, 22% 20%);
  background-color: var(--vogelkleur);
  width: 28px;
  height: 28px;
  top: 20%;
  position: absolute;
  left: 38%;
  animation: 1s ease-in 1.1s infinite reverse flap;
}

/*Animatie voor de vogels*/

@keyframes flap {
  0% {
    clip-path: polygon(14% 89%, 32% 71%, 40% 67%, 46% 71%, 57% 88%, 72% 90%, 69% 81%, 48% 60%, 40% 55%, 28% 64%, 7% 83%, 7% 91%);
  }

  50% {
    clip-path: polygon(84% 27%, 73% 47%, 59% 57%, 50% 60%, 39% 53%, 31% 45%, 24% 26%, 40% 40%, 44% 45%, 51% 48%, 57% 46%, 68% 38%);
  }

  100% {
    clip-path: polygon(14% 89%, 32% 71%, 40% 67%, 46% 71%, 57% 88%, 72% 90%, 69% 81%, 48% 60%, 40% 55%, 28% 64%, 7% 83%, 7% 91%);
  }
}

.vogel2{
  clip-path: polygon(57% 50%, 64% 42%, 82% 38%, 56% 59%, 42% 50%, 25% 55%, 34% 43%, 46% 44%);
  background-color: var(--vogelkleur);
  width: 28px;
  height: 28px;
  top: 10%;
  position: absolute;
  left: 45%;
  animation: 2s ease-in 0.5s infinite reverse flap;
}
.vogel3{
  clip-path: polygon(57% 50%, 64% 42%, 82% 38%, 56% 59%, 42% 46%, 23% 46%, 36% 40%, 48% 41%);
  background-color: var(--vogelkleur);
  width:28px;
  height:28px;
  top:12%;
  position: absolute;
  left: 55%;
  animation: 1s ease-in 1s infinite reverse flap;
}
.vogel4{
  clip-path: polygon(64% 46%, 95% 33%, 100% 56%, 90% 45%, 64% 54%, 51% 46%, 36% 32%, 64% 43%);
  background-color: var(--vogelkleur);
  width:28px;
  height:28px;
  top:24%;
  position: absolute;
  left: 65%;
  animation: 1s ease-in 0.7s infinite reverse flap;
}

.vogel5{
  clip-path: polygon(56% 49%, 73% 35%, 94% 26%, 60% 56%, 37% 40%, 16% 44%, 36% 32%, 48% 41%);
  background-color: var(--vogelkleur);
  width:28px;
  height:28px;
  top:30%;
  position: absolute;
  left: 70%;
  animation: 1s ease-in 0.8s infinite reverse flap;
}

.wolk1{
  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;
}

.wolk2{
  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;
}

.wolk3{
  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;
}

.wolk4{
  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;
}

.wolk5{
  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;
}

.wolk6{
  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;
}

.wolk7{
  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;
}

.wolk8{
  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;
}

.wolk9{
  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;
}

/* animatie voor de wolken */

@keyframes wolk-beweging{
  0%{
    left: -20%;
  }
  
  100%{
    left: 100%;
  } 
}
/* Hier begint het zand met haar duinen. De zandstroken zijn gespecificeerd als duinen. */

.zand{
  width:100%;
  height:35%;
  background-image: linear-gradient(#fbed2c, #f7a803);
}

.zandstrook{
  clip-path: polygon(0% 55%, 76% 52%, 100% 43%, 100% 78%, 76% 72%, 0% 63%);
  height:20%;
  width:100%;
  position: absolute;
  top: 53.5%;
  background-image: linear-gradient(to right,#fbe981 , #fec842);
}

.zandstrook1{
  clip-path: polygon(0% 63%, 2% 63%, 6% 64%, 8% 64%, 10% 64%, 13% 63%, 15% 61%, 17% 59%, 20% 57%, 22% 56%, 24% 56%, 26% 57%, 28% 60%, 30% 63%, 32% 66%, 34% 68%, 36% 70%, 40% 73%, 44% 75%, 50% 76%, 53% 77%, 55% 78%, 59% 78%, 63% 79%, 67% 79%, 71% 78%, 75% 77%, 77% 75%, 80% 73%, 83% 70%, 85% 68%, 87% 65%, 89% 62%, 92% 61%, 95% 60%, 98% 62%, 99% 65%, 100% 67%, 100% 100%, 0% 100%);
  height: 20%;
  width:100%;
  position: absolute;
  top: 80%;
  background-image: linear-gradient(#ffa202, #ac5c06);
}

.zandstrook2{
  clip-path: polygon(0% 54%, 5% 55%, 9% 55%, 13% 55%, 16% 56%, 20% 57%, 24% 58%, 27% 58%, 29% 59%, 34% 60%, 38% 61%, 43% 60%, 47% 60%, 51% 60%, 54% 61%, 57% 60%, 61% 59%, 66% 59%, 69% 60%, 73% 60%, 77% 59%, 81% 58%, 86% 59%, 91% 62%, 96% 64%, 99% 62%, 100% 63%, 100% 100%, 0% 100%);
  height: 25%;
  width: 100%;
  position: absolute;
  top: 72%;
  background-image: linear-gradient(#fdd31f 50%, #e29606);
}

.zandstrook3{
  clip-path: polygon(0% 51%, 3% 52%, 6% 53%, 8% 54%, 11% 56%, 13% 56%, 17% 57%, 21% 56%, 25% 56%, 28% 56%, 31% 56%, 34% 57%, 37% 59%, 38% 60%, 40% 61%, 42% 63%, 44% 63%, 47% 64%, 49% 64%, 51% 64%, 54% 63%, 57% 63%, 60% 63%, 63% 63%, 66% 64%, 70% 64%, 74% 65%, 78% 65%, 82% 65%, 85% 64%, 87% 65%, 90% 65%, 94% 67%, 96% 68%, 98% 69%, 100% 70%, 100% 72%, 100% 100%, 0% 100%);
  background-color: #fef54e;
  height: 20%;
  width:100%;
  position: absolute;
  top:73.2%;
}

.zandstrook4{
  clip-path: polygon(0% 61%, 2% 59%, 4% 57%, 6% 54%, 8% 52%, 10% 49%, 12% 48%, 15% 47%, 17% 47%, 19% 47%, 22% 49%, 23% 50%, 26% 52%, 28% 54%, 30% 55%, 33% 57%, 35% 57%, 38% 59%, 42% 60%, 44% 61%, 47% 63%, 49% 63%, 52% 63%, 55% 64%, 57% 64%, 61% 65%, 65% 65%, 68% 66%, 70% 66%, 74% 66%, 75% 67%, 78% 69%, 80% 70%, 83% 72%, 87% 73%, 90% 73%, 94% 74%, 97% 72%, 99% 71%, 100% 70%, 100% 100%, 0% 100%);
  height: 30%;
  width:100%;
  position: absolute;
  top:60.0%;
  background-image: linear-gradient(#fdd31f 50%, #e29606);
}

.zandstrook5{
  clip-path: polygon(0% 61%, 2% 59%, 4% 57%, 6% 54%, 8% 52%, 10% 49%, 12% 48%, 15% 47%, 17% 47%, 19% 47%, 22% 49%, 23% 50%, 26% 52%, 28% 54%, 30% 55%, 33% 57%, 35% 57%, 38% 59%, 42% 60%, 44% 61%, 47% 63%, 49% 63%, 52% 63%, 55% 64%, 57% 64%, 61% 65%, 65% 65%, 68% 66%, 70% 66%, 74% 66%, 75% 67%, 78% 69%, 80% 70%, 83% 72%, 87% 73%, 90% 73%, 94% 74%, 97% 72%, 99% 71%, 100% 70%, 100% 100%, 0% 100%);
  height: 50%;
  width:100%;
  position: absolute;
  top: 48.5%;
  background-color: #fef54e;
} 

.zandstrook6{
  clip-path: polygon(100% 57%, 99% 59%, 98% 59%, 96% 59%, 95% 59%, 94% 60%, 93% 60%, 92% 60%, 91% 61%, 89% 61%, 87% 62%, 85% 63%, 82% 63%, 80% 63%, 78% 63%, 76% 64%, 73% 66%, 71% 68%, 68% 70%, 64% 73%, 58% 76%, 51% 79%, 40% 82%, 26% 85%, 7% 88%, 0% 88%, 0% 100%, 100% 100%);
  height: 50%;
  width: 100%;
  position:absolute;
  top: 50%;
  background-color: #fef54e;
}

.zandstrook7{
  clip-path: polygon(100% 38%, 98% 37%, 97% 37%, 95% 37%, 94% 37%, 92% 36%, 92% 36%, 90% 35%, 88% 35%, 87% 35%, 85% 36%, 82% 37%, 80% 39%, 77% 41%, 74% 43%, 71% 45%, 67% 49%, 64% 52%, 61% 54%, 58% 56%, 56% 57%, 53% 58%, 50% 59%, 49% 59%, 46% 59%, 44% 60%, 42% 60%, 40% 62%, 37% 63%, 35% 64%, 33% 65%, 32% 66%, 29% 68%, 0% 89%, 0% 100%, 100% 100%);
  height: 50%;
  width: 100%;
  position:absolute;
  top: 45.1%;
  transform: rotate(3deg);
  background-image: linear-gradient(#fec818 50%, #f7a803);
}

/* Kleine eclipses in het zand */

.eclipse1{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:10px; 
  width: 15px;
  background-color: var(--zandrondje);
  top: 70%;
  left: 56%;
}

.eclipse2{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:6px; 
  width: 12px;
  background-color: var(--zandrondje);
  top: 75%;
  left: 73%;
}

.eclipse3{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:18px; 
  width: 38px;
  background-color: var(--zandrondje);
  top: 70%;
  left: 52%;
}

.eclipse4{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:24px; 
  width: 45px;
  background-color: var(--zandrondje);
  top: 70%;
  left: 70%;
}

.eclipse5{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:20px; 
  width: 40px;
  background-color: var(--zandrondje);
  top: 68%;
  left: 60%;
}

.eclipse6{
  clip-path: ellipse(45% 19% at 50% 50%);
  position: absolute;
  height:20px; 
  width: 40px;
  background-color: var(--zandrondje);
  top: 66%;
  left: 45%;
}

/* Hier beginnen de zandstenen vorm te krijgen, deze zijn geplaatst in een container. */

.zandsteen_container{
  height: 55px;
  width: 80px;
  position: absolute;
  left: 90%;
  bottom:6%;
  filter: drop-shadow(5px 10px 10px rgba(0,0,0,.5));
}

.zandsteen1_onderdeel1{
  clip-path: polygon(74% 17%, 100% 38%, 28% 56%, 2% 30%);
  background-color:#ad6d16 ;
  height: 40px;
  width: 80px;
  position: absolute;
  top: 0%;
  left: 0%;
  background-image: linear-gradient(to right, #d09022 ,#a36212 );
}

.zandsteen1_onderdeel2{
  clip-path: polygon(14% 36%, 13% 5%, 61% 74%, 51% 95%);
  background-color: #9b5c10;
  height: 35px;
  width: 30px;
  top: 1.2%;
  left: 1%;
  position: absolute;
  transform: rotate(-33.3deg);
  background-image:linear-gradient(to bottom right,#bd7d15, #9d5e0e);
  
}

.zandsteen1_onderdeel3{
  clip-path: polygon(11% 91%, 12% 77%, 95% 44%, 93% 64%);
  background-color: #9b5a0c;
  height: 55px;
  width: 60px;
  bottom: 26.5%;
  left: 25%;
  position: absolute;
  transform: rotate(12.5deg);
  
}

.zandsteen2_container{
  
  width: 200px;
  height: 100px;
  position: absolute;
  left: 87%;
  top: 82%;
  filter: drop-shadow(5px 10px 10px rgba(0,0,0,.5));
}
.zandsteen2_onderdeel1{
  clip-path: polygon(0 90%, 87% 61%, 100% 100%, 0% 100%);
  background-color: brown;
  position: absolute;
  height: 120px;
  width: 150px;
  left: 10%;
  bottom: 23%;
  background-image: linear-gradient(to right, #9a570d , #9a5a10);
  
  
}
.zandsteen2_onderdeel2{
  clip-path: polygon(0 90%, 69% 74%, 85% 76%, 11% 94%);
  background-color: brown;
  position: absolute;
  height: 200px;
  width: 175px;
  bottom: 22.2%;
  left: 2%;
  transform: rotate(0.3deg);
  background-image: linear-gradient(to right, #e2a42d , #c88510);
}
.zandsteen2_onderdeel3{
  clip-path: polygon(0 90%, 0 85%, 14% 87%, 14% 93%);
  background-color: brown;
  position: absolute;
  width: 150px;
  height: 200px;
  left: 6.2%;
  bottom: 0.7%;
  transform:rotate(9.4deg);
  background-image: linear-gradient(to right, #be8018 , #a36c16);
}

.zandsteen3_container{
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: 18%;
  left: 4%;
  filter: drop-shadow(5px 10px 10px rgba(0,0,0,.5));
}

.zandsteen3_onderdeel1{
  clip-path: polygon(34% 73%, 3% 73%, 41% 53%, 80% 52%);
  background-color:brown;
  width: 160px;
  height: 110px;
  position: absolute;
  bottom: 20%;
  transform: rotate(-3deg);
  left: 1%;
  background-image: linear-gradient(to right, #dfa527 , #d79d25);
}

.zandsteen3_onderdeel2{
  clip-path: polygon(25% 74%, 25% 91%, 79% 71%, 80% 52%);
  background-color:white;
  width: 150px;
  height: 80px;
  position: absolute;
  bottom: 30.9%;
  transform: rotate(-8deg);
  left: 6%;
  background-image: linear-gradient(to right, #9c5a14 , #d09625);
}

.zandsteen3_onderdeel3{
  clip-path: polygon(25% 74%, 25% 91%, 61% 91%, 62% 73%);
  background-color:brown;
  width: 120px;
  height: 80px;
  position: absolute;
  bottom:28%;
  right: 0%;
  background-image: linear-gradient(to right, #9a5e15 , #d19223);
}

.zandsteen4_container{
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: 17%;
  left: 5%;
  filter: drop-shadow(5px 10px 10px rgba(0,0,0,.5));
}

.zandsteen4_onderdeel1{
  clip-path: polygon(48% 92%, 48% 100%, 65% 100%, 65% 87%);
  background-color: brown;
  position: absolute;
  width:105px;
  height: 90px;
  bottom: 32%;
  background-image: linear-gradient(to right, #dc9d2c , #ecb02b);
}

.zandsteen4_onderdeel2{
  clip-path: polygon(48% 92%, 7% 74%, 43% 72%, 65% 87%);
  background-color: brown;
  position: absolute;
  width:80px;
  height: 90px;
  bottom: 31%;
  left: 17%;
  transform: rotate(-2deg);
  background-image: linear-gradient(to right, #d08f23 , #9d6804);
}

.zandsteen4_onderdeel3{
  clip-path: polygon(0 90%, 7% 74%, 57% 89%, 57% 98%);
  background-color: brown;
  position: absolute;
  width:60px;
  height: 90px;
  left: 20%;
  bottom: 30%;
  background-image: linear-gradient(to right, #c7861f , #9f5d13);
}

/* Hier beginnen de piramides, deze hebben ook een container waarin ze zijn gepositioneerd */

.piramide_container{
  width: 600px;
  height: 300px;
  z-index: 999;
  position:absolute;
  bottom: 30%;
  left: calc(50% - 600px / 2);
}

.positie1{
  position: absolute;
  top:23%;
}

.voorste_piramide{
  background-color: gold;
  width: 320px;
  height:240px;
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  position: absolute;
  background-image: 
    radial-gradient(
      circle at top, 
      transparent 80% , 
      #eeae2b 22%),
    radial-gradient(
      circle at top left, 
      #ffd75e 40%, 
      #f5a528);
  box-shadow: 20px 10px 8px #e69724;
}

.schaduw1{
  background-color: #9a5a10;
  width:100%;
  height: 100%;
  clip-path: polygon(50% 0%, 0 100%, 21% 100%);
  position: absolute;
  background-image: linear-gradient(to bottom left, #9a5a10, #cb8a22);
}

.positie2 {
 position: absolute;
 left: calc(50% - 380px/2);
}

.tweede_piramide{ 
  background-color: gold;
  width: 380px;
  height:300px;
  clip-path: polygon(47% 0, 0% 100%, 100% 100%);
  position: absolute;
  background-image:
  radial-gradient(
      circle at top , 
      transparent 82% , 
      #eeae2b 80%),
   radial-gradient(
      circle at top left,
    #fae276 60%, 
    #f5a528);
}

.schaduw2{
  background-color: #9a5a10;
  width:180px;
  height: 300px;
  clip-path:polygon(100% 0, 0% 100%, 42% 100%);
  position: absolute;
  background-image: linear-gradient(to bottom left, #9a5a10, #cb8a22);
}

.positie3 {
 position: absolute;
 top: 15%;
 left: 35%;
}

.achterste_piramide{ 
  background-color: Red;
  width: 380px;
  height:250px;
  clip-path: polygon(47% 0, 0% 100%, 100% 100%);
  position: absolute;
  background-image: radial-gradient(circle at top left, #f9f093 10%, #f6a82d );
}

.schaduw3{
  background-color: #9a5a10;
  width:180px;
  height: 250px;
  clip-path:polygon(100% 0, 0% 100%, 42% 100%);
  position: absolute;
  background-image: linear-gradient(to bottom left, #9a5a10, #cb8a22);
}

.positieklein{
  position:absolute;
  top: 63.8%;
  left: 10%;
}

.kleine_piramide{ 
  background-color: Red;
  width: 50px;
  height:30px;
  clip-path: polygon(47% 0, 0% 100%, 100% 100%);
  position: absolute;
  background-image: 
  radial-gradient(
    circle at top left, 
    #f9f093 40%, 
    #f8a928),
  radial-gradient(
    circle at top left, 
    #fae276 , 
    #f5a528);
}

.schaduw4{
  background-color: #9a5a10;
  width: 100%;
  height: 100%;
  clip-path:polygon(47% 0, 0% 100%, 28% 100%);
  position: absolute;
  background-image: linear-gradient(to bottom left, #9a5a10, #cb8a22);
}