h1 {
  color: white;
}

body {
  background-image: radial-gradient(circle, #eeaeca 0%, #94bbe9 100%);
}

h2 {
  color: white;
  display: flex;
  justify-content: center;
}

.conteiner {
  display: flex;
  justify-content: center;
}

.section-1 {
  border: 2px white solid;
  display: flex;
  flex-wrap: wrap;
  height: 60vh;
  justify-content: space-evenly;
  width: 35vw;
}

.rose {
  display: flex;
  height: 200px;
  margin: 10px;
  width: 200px;
}

.blur {
  filter: blur(3px);
}

.brightness {
  filter: brightness(2);
}

.contrast {
  filter: contrast(3);
}

.box-shadow {
  box-shadow:
    white 10px 10px 15px,
    -10px -10px 15px white;
}

.section-3 {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}

.box-repeat {
  background-image: url('./assets/rosa-kawaii.jpg');
  background-repeat: repeat-x;
  border: white 2px solid;
  height: 300px;
  margin: 10px;
  width: 600px;
}

.no-repeat {
  background-image: url('./assets/rosa-kawaii.jpg');
  background-repeat: no-repeat;
  border: white 2px solid;
  height: 300px;
  margin: 10px;
  width: 600px;
}

.box-rose {
  background-color: white;
  border: white 2px solid;
  display: flex;
  height: 220px;
  margin: 10px;
  width: 480px;
}

.contain {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.position {
  object-fit: cover;
  object-position: bottom;
  width: 100%;
}

.fill {
  width: 100%;
}

.section-4 {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.first-block {
  align-items: center;
  background: linear-gradient(to right, white, black);
  background-color: white;
  display: flex;
  height: 90px;
  justify-content: center;
  margin: 10px;
  width: 95vw;
}

.second-block {
  align-items: center;
  background: linear-gradient(to right, black 0%, white 50%, black);
  background-color: white;
  display: flex;
  height: 90px;
  justify-content: center;
  margin: 10px;
  width: 95vw;
}

.font-size {
  font-size: x-large;
}

.third-block {
  align-items: center;
  background: radial-gradient(circle, blue, red);
  background-color: white;
  display: flex;
  height: 220px;
  justify-content: center;
  margin: 10px;
  width: 95vw;
}

.fourth-block {
  align-items: center;
  background: linear-gradient(10deg, purple, red, orange);
  background-color: white;
  display: flex;
  height: 220px;
  justify-content: center;
  margin: 10px;
  width: 95vw;
}

.logo-zinns {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.section-5 {
  display: flex;
  justify-content: center;
}

.cloud {
  animation: cloud 7s linear 1s infinite alternate forwards;
  fill-opacity: 0;
  stroke-dasharray: 52px;
  stroke-dashoffset: 52px;
}

@keyframes cloud {
  from {
    fill-opacity: 0;
    stroke-dashoffset: 52px;
  }

  to {
    fill-opacity: 1;
    stroke-dashoffset: 0%;
  }
}

.clip-1 {
  background-color: blueviolet;
  clip-path: circle(50%);
  height: 220px;
  width: 220px;
}

.clip-2 {
  background-color: yellow;
  clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
  height: 220px;
  width: 220px;
}

.clip-3 {
  background-color: coral;
  clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
  height: 220px;
  width: 220px;
}

.section-clip {
  display: flex;
}

.arrow {
  clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%);
  height: 220px;
  width: 220px;
}

.clip-one {
  animation: flechas-3 10s linear 1s infinite;
  background-color: yellowgreen;
  transform: translateX(-668px);
}

.clip-two {
  animation: flechas-2 10s linear 500ms infinite;
  background-color: orange;
  transform: translateX(-668px);
}

.clip-three {
  animation: flechas 10s linear infinite;
  background-color: yellow;
}

@keyframes flechas {
  0% {
    transform: translateX(-888px);
  }

  40% {
    transform: translateX(10vw);
  }

  60% {
    transform: translateX(10vw);
  }

  100% {
    transform: translateX(100vw);
  }
}

@keyframes flechas-2 {
  0% {
    transform: translateX(-888px);
  }

  40% {
    transform: translateX(18vw);
  }

  60% {
    transform: translateX(18vw);
  }

  100% {
    transform: translateX(100vw);
  }
}

@keyframes flechas-3 {
  0% {
    transform: translateX(-888px);
  }

  40% {
    transform: translateX(26vw);
  }

  60% {
    transform: translateX(26vw);
  }

  100% {
    transform: translateX(100vw);
  }
}