@font-face {
  font-family: "Roboto";
  src: url("https://assets.codepen.io/907368/Roboto-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: "Roboto";
  src: url("https://assets.codepen.io/907368/Roboto-Regular.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "Roboto";
  src: url("https://assets.codepen.io/907368/Roboto-Light.ttf");
  font-weight: 300;
}
body,
html {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #0c1016;
  font-size: 20px;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "Roboto";
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.image-animation {
  width: 80vw;
  height: 80vh;
  display: flex;
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
  background-color: rgba(255, 255, 255, 0.02);
}
.image-animation .image-cut {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("./images/Bild1.jpeg") no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  background-color: #00fff1;
  -webkit-animation: moveUp 1000ms ease-in-out forwards;
          animation: moveUp 1000ms ease-in-out forwards;
  opacity: 0;
}
.image-animation .image-cut-1 {
  -webkit-clip-path: inset(0 95% 0 -0.1%);
          clip-path: inset(0 95% 0 -0.1%);
  -webkit-animation-delay: 40ms;
          animation-delay: 40ms;
  z-index: 9;
}
.image-animation .image-cut-2 {
  -webkit-clip-path: inset(0 90% 0 4.9%);
          clip-path: inset(0 90% 0 4.9%);
  -webkit-animation-delay: 80ms;
          animation-delay: 80ms;
  z-index: 8;
}
.image-animation .image-cut-3 {
  -webkit-clip-path: inset(0 85% 0 9.9%);
          clip-path: inset(0 85% 0 9.9%);
  -webkit-animation-delay: 120ms;
          animation-delay: 120ms;
  z-index: 7;
}
.image-animation .image-cut-4 {
  -webkit-clip-path: inset(0 80% 0 14.9%);
          clip-path: inset(0 80% 0 14.9%);
  -webkit-animation-delay: 160ms;
          animation-delay: 160ms;
  z-index: 6;
}
.image-animation .image-cut-5 {
  -webkit-clip-path: inset(0 75% 0 19.9%);
          clip-path: inset(0 75% 0 19.9%);
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  z-index: 5;
}
.image-animation .image-cut-6 {
  -webkit-clip-path: inset(0 70% 0 24.9%);
          clip-path: inset(0 70% 0 24.9%);
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
  z-index: 4;
}
.image-animation .image-cut-7 {
  -webkit-clip-path: inset(0 65% 0 29.9%);
          clip-path: inset(0 65% 0 29.9%);
  -webkit-animation-delay: 280ms;
          animation-delay: 280ms;
  z-index: 3;
}
.image-animation .image-cut-8 {
  -webkit-clip-path: inset(0 60% 0 34.9%);
          clip-path: inset(0 60% 0 34.9%);
  -webkit-animation-delay: 320ms;
          animation-delay: 320ms;
  z-index: 2;
}
.image-animation .image-cut-9 {
  -webkit-clip-path: inset(0 55% 0 39.9%);
          clip-path: inset(0 55% 0 39.9%);
  -webkit-animation-delay: 360ms;
          animation-delay: 360ms;
  z-index: 1;
}
.image-animation .image-cut-10 {
  -webkit-clip-path: inset(0 50% 0 44.9%);
          clip-path: inset(0 50% 0 44.9%);
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
  z-index: 0;
}
.image-animation .image-cut-11 {
  -webkit-clip-path: inset(0 45% 0 49.9%);
          clip-path: inset(0 45% 0 49.9%);
  -webkit-animation-delay: 440ms;
          animation-delay: 440ms;
  z-index: 0;
}
.image-animation .image-cut-12 {
  -webkit-clip-path: inset(0 40% 0 54.9%);
          clip-path: inset(0 40% 0 54.9%);
  -webkit-animation-delay: 480ms;
          animation-delay: 480ms;
  z-index: 0;
}
.image-animation .image-cut-13 {
  -webkit-clip-path: inset(0 35% 0 59.9%);
          clip-path: inset(0 35% 0 59.9%);
  -webkit-animation-delay: 520ms;
          animation-delay: 520ms;
  z-index: 0;
}
.image-animation .image-cut-14 {
  -webkit-clip-path: inset(0 30% 0 64.9%);
          clip-path: inset(0 30% 0 64.9%);
  -webkit-animation-delay: 560ms;
          animation-delay: 560ms;
  z-index: 0;
}
.image-animation .image-cut-15 {
  -webkit-clip-path: inset(0 25% 0 69.9%);
          clip-path: inset(0 25% 0 69.9%);
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
  z-index: 0;
}
.image-animation .image-cut-16 {
  -webkit-clip-path: inset(0 20% 0 74.9%);
          clip-path: inset(0 20% 0 74.9%);
  -webkit-animation-delay: 640ms;
          animation-delay: 640ms;
  z-index: 0;
}
.image-animation .image-cut-17 {
  -webkit-clip-path: inset(0 15% 0 79.9%);
          clip-path: inset(0 15% 0 79.9%);
  -webkit-animation-delay: 680ms;
          animation-delay: 680ms;
  z-index: 0;
}
.image-animation .image-cut-18 {
  -webkit-clip-path: inset(0 10% 0 84.9%);
          clip-path: inset(0 10% 0 84.9%);
  -webkit-animation-delay: 720ms;
          animation-delay: 720ms;
  z-index: 0;
}
.image-animation .image-cut-19 {
  -webkit-clip-path: inset(0 5% 0 89.9%);
          clip-path: inset(0 5% 0 89.9%);
  -webkit-animation-delay: 760ms;
          animation-delay: 760ms;
  z-index: 0;
}
.image-animation .image-cut-20 {
  -webkit-clip-path: inset(0 0% 0 94.9%);
          clip-path: inset(0 0% 0 94.9%);
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
  z-index: 0;
}

@-webkit-keyframes moveUp {
  0% {
    transform: translate(0, -100vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes moveUp {
  0% {
    transform: translate(0vh, 100vh) scale(-2);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}