@font-face {
  font-family: Helvetica, sans-serif;
  src: url() format();
}

:root {
  /*wie ein absatzformat, template */
  --color-1: rgb(80, 149, 50);
  --color-2: rgba(55, 50, 149, 0.678);
  --color-3: rgb(199, 184, 25);
  --color-4: rgb(98, 25, 154);
}
body {
  font-family: Helvetica, sans-serif;
  background: rgb(35, 35, 35);
}
h1 {
  font-family: Helvetica, sans-serif;
  font-weight: lighter;
  color: white;
  font-size: 3em;
  padding-top: 20px;
  padding-left: 20px;
}
h2 {
  font-family: Helvetica, sans-serif;
  font-weight: 500;
  color: white;
  font-size: 1em;
}

.container {
  width: 100vw;
  height: 100vh;
}

/* styles for chooser */

#color-chooser {
  position: fixed;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  border-left: 1px solid white;
}
#palette {
  padding: 10px;
}
#palette .color {
  text-align: center;
}

input[type="color"] {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  border: 0;
  outline: 0;
  padding: 0;
  box-shadow: 0;
  background-color: inherit;
}

/* color saver */

.save-colors-wrapper {
  margin: 10px;
  color: white;
}
#btn-save-colors {
  text-align: center;
  border: solid 0.5px;
  padding: 0.35em 0.5em 0.25em;
  margin-bottom: 10px;
  cursor: pointer;
}
#saved-colors div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
#saved-colors span {
  aspect-ratio: 1/1;
  background: red;
  margin-bottom: 0.5em;
}
#saved-colors i {
  aspect-ratio: 1/1;
}
/* styles for visuals */

.visual-color-1 {
  background: var(--color-1);
}
.visual-color-2 {
  background: var(--color-2);
}
.visual-color-3 {
  background: var(--color-3);
}
.visual-color-4 {
  background: var(--color-4);
}

#visuals {
  width: 92vw;
  z-index: 1;
}

/* spacing section */

#visuals-1 {
  padding-bottom: 100px;
}
#visuals-2 {
  padding-bottom: 100px;
  border-bottom: 1px solid white;
}
#visuals-3 {
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid white;
}
#visuals-4 {
  height: 200px;
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid white;
}
#visuals-6 {
  margin-top: 10px;
}
#visuals-8 {
  margin-top: 40px;
  margin-bottom: 50px;
  border-top: 1px solid white;
}

#visuals-9 {
  margin-top: 1vh;
  border-bottom: 1px solid white;
}

.manna {
  padding: 20px;
  margin-topv: 70px;
}

/* 1. Teil */
#visuals-1 {
  display: flex;
}
#visuals-1 .visual-color-1 {
  width: 100%;
  height: 10px;
}
#visuals-1 .visual-color-2 {
  width: 100%;
  height: 10px;
}
#visuals-1 .visual-color-3 {
  width: 100%;
  height: 10px;
}
#visuals-1 .visual-color-4 {
  width: 100%;
  height: 10px;
}

/* 2. teil */

#visuals-2 .visual-color-1 {
  width: 50px;
  height: 50px;
  margin: auto;
}
#visuals-2 .visual-color-2 {
  width: 50px;
  height: 50px;
  margin: auto;
}
#visuals-2 .visual-color-3 {
  width: 50px;
  height: 50px;
  margin: auto;
}
#visuals-2 .visual-color-4 {
  width: 50px;
  height: 50px;
  margin: auto;
}

#visuals-2 .visual-color-1:hover {
  transform: scale(1.5);
}
#visuals-2 .visual-color-2:hover {
  transform: scale(1.5);
}
#visuals-2 .visual-color-3:hover {
  transform: scale(1.5);
}
#visuals-2 .visual-color-4:hover {
  transform: scale(1.5);
}

/* 3. teil */

#visuals-3 .visual-color-1 {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: visual-3-1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#visuals-3 .visual-color-2 {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: visual-3-2;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#visuals-3 .visual-color-3 {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: visual-3-3;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#visuals-3 .visual-color-4 {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: visual-3-4;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes visual-3-1 {
  0% {
    left: 0%;
  }
  100% {
    left: 25%;
  }
}
@keyframes visual-3-2 {
  0% {
    /* background-color: var(--color-2); */
    left: 10%;
  }
  100% {
    /* background-color: var(--color-3); */
    left: 50%;
  }
}
@keyframes visual-3-3 {
  0% {
    left: 50%;
  }
  100% {
    left: 75%;
  }
}
@keyframes visual-3-4 {
  0% {
    left: 75%;
  }
  100% {
    left: 100%;
  }
}

/* 4. teil */

#svg-blume {
  width: 50px;
}
#svg-blume .blume {
  fill: var(--color-1);
}
#svg-viereck {
  width: 50px;
}
#svg-viereck .viereck {
  fill: var(--color-2);
}
#svg-punkte {
  width: 50px;
}
#svg-punkte .punkte {
  fill: var(--color-3);
}
#svg-stern {
  width: 50px;
}
#svg-stern .stern {
  fill: var(--color-4);
}

#visuals-4 .visual-color-1 {
  transition-timing-function: linear;
  offset-path: path(
    "M89.66,.48c-35.35,11.29,67.75,42.22,129.61,31.42,61.86-10.8,41.24-25.53-2.95-23.57S-7.06,48.59,36.64,63.81s188.03,33.38,184.59,10.8-56.46-47.8-101.62-31.76-83.95,52.38-52.04,59.74,150.72,22.58,163.48,0-44.43-46.34-85.91-35.35c-41.49,10.99-178.21,27.98-136.97,55.48s270.51,34.86,276.4,5.4-200.73-25.86-219.94-9.33"
  );
  animation: move 100s linear infinite;
  width: 50%;
  height: 50%;
  background: none;
  animation-direction: alternate;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#visuals-4 .visual-color-2 {
  offset-path: path(
    "M17.17,152.54c-2.43-23.04-8.11-45.55-11.56-68.43-1.68-11.17-2.8-22.47-2.59-33.78,.2-10.79,1.45-22.01,5.08-32.23C10.94,10.1,17.07,1.43,26.75,3.19c4.89,.89,9.13,3.91,12.67,7.26,3.71,3.52,6.82,7.63,9.79,11.78,11.99,16.76,20.46,35.72,26.84,55.24,6.48,19.83,10.92,40.25,15.07,60.68,.5,2.46,.99,4.91,1.48,7.37,.33,1.67,2.98,1.28,2.95-.4-.44-19.84,1.12-39.79,5.57-59.16s11.61-37.53,22.44-53.87c5.37-8.09,11.51-16.03,19.65-21.52,7.58-5.1,17.19-7.81,25.57-2.9,7.3,4.28,11.21,12.59,13.87,20.27,3.57,10.29,6.07,21.04,8.48,31.65,5.11,22.49,8.73,45.29,12.18,68.09,.43,2.87,.87,5.74,1.3,8.61,.29,1.9,3.18,1.09,2.89-.8-3.55-23.6-7.1-47.22-12.12-70.57-2.46-11.43-5.19-22.85-8.61-34.03-2.5-8.19-5.88-16.89-12.37-22.78-7.03-6.38-16.66-7.57-25.36-4.06-9.35,3.78-16.7,11.13-22.73,19.02-12.26,16.03-20.74,34.7-26.08,54.1s-7.69,40.15-7.76,60.52c0,2.47,.02,4.94,.07,7.42l2.95-.4c-4.21-20.98-8.51-41.99-14.79-62.47-6.18-20.15-14.33-39.88-26.08-57.45-2.93-4.38-6.04-8.72-9.5-12.71s-7.42-7.62-12.13-9.92C28.62,.03,23.6-.77,18.93,.89c-4.16,1.49-7.4,4.56-9.79,8.21-2.54,3.86-4.14,8.31-5.32,12.75-1.49,5.64-2.5,11.39-3.11,17.19C-.5,50.51-.05,62.09,1.22,73.53c2.62,23.62,8.58,46.71,11.88,70.23,.41,2.92,.77,5.85,1.08,8.79,.2,1.9,3.2,1.92,3,0h0Z"
  );
  animation: move 7s linear infinite;
  width: 50px;
  height: 50px;
  background: none;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#visuals-4 .visual-color-3 {
  offset-path: path(
    "M.14,73.66C224.49,10.34,388.29-13.5,392.42,8.52s-64.69,6.52-60.56,18.4,96.35-4.64,96.35,10.5-6.88,154.16-45.42,100.48S199.72,25.04,108.87,49.81"
  );
  width: 50px;
  height: 50px;
  animation: move 10s linear infinite;
  background: none;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#visuals-4 .visual-color-4 {
  offset-path: path(
    "M388.78,157.67c13.53-24.8-183.16-80.03-310.53-29.87s-64.25-9.02-45.65-9.58,80.03,16.91,100.88,5.64,33.81-86.23,14.65-86.23-97.5-63.68-5.07-24.23,115.53,93.55,133.57,77.21,25.92-122.3,69.32-79.46-71.01,72.7-40.01,82.28,36.63-38.89,62.56-18.6"
  );
  animation: move 10s linear infinite;
  width: 50px;
  height: 50px;
  background: none;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.blume {
  color: var(--color-2);
}

/* 5.teil */

/* 6.teil */

.svg-mark {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* 7.Teil */

.cls-1 {
  fill: var(--color-1);
}
.cls-2 {
  fill: var(--color-2);
}
.cls-3 {
  fill: var(--color-3);
}
.cls-4 {
  fill: var(--color-4);
}
.manna {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  font-weight: 400;
  font-style: italic;
  color: var(--color-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#visuals-9 {
  background: radial-gradient(
    var(--color-1),
    var(--color-2),
    var(--color-3),
    var(--color-4),
    var(--color-1)
  );
  height: 80vh;
  width: 100%;
  background-size: 400% 10%;
  animation: gradient 5s linear forwards infinite;
  height: 100vh;
  width: 100%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#visuals-8 {
  display: flex;
}
.gradient-2 {
  background: radial-gradient(
    var(--color-2),
    var(--color-3),
    var(--color-1),
    var(--color-4)
  );
  height: 10vh;
  width: 10vh;
}
.gradients {
  font-family: "Franklin Gothic Medium";
  font-size: 40px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-2);
  margin: auto;
}

.gradient-3 {
  background: radial-gradient(
    var(--color-1),
    var(--color-4),
    var(--color-3),
    var(--color-2)
  );
  height: 10vh;
  width: 10vh;
}
.visuals-10 {
  background: var(--color-1);
  height: 5vh;
  width: auto;
  animation: visuals-10 1s linear normal infinite;
}

@keyframes visuals-10 {
  0% {
    background: var(--color-1);
  }
  25% {
    background: var(--color-2);
  }
  30% {
    background: black;
  }
  50% {
    background: var(--color-3);
  }
  75% {
    background: var(--color-4);
  }
  80% {
    background: black;
  }
  100% {
    background: var(--color-1);
  }
}
.visuals-11 {
  background: var(--color-1);
  height: 5vh;
  width: auto;
  animation: visuals-11 3s linear normal infinite;
}

@keyframes visuals-11 {
  0% {
    background: var(--color-2);
  }
  25% {
    background: var(--color-3);
  }
  50% {
    background: var(--color-4);
  }
  75% {
    background: var(--color-1);
  }
  100% {
    background: var(--color-2);
  }
}
.visuals-12 {
  background: var(--color-1);
  height: 5vh;
  width: auto;
  animation: visuals-12 1s linear normal infinite;
}

@keyframes visuals-12 {
  0% {
    background: var(--color-3);
  }
  25% {
    background: var(--color-4);
  }
  50% {
    background: var(--color-1);
  }
  75% {
    background: var(--color-2);
  }
  100% {
    background: var(--color-3);
  }
}
#visuals-14 {
  display: flex;
  flex-wrap: wrap;
  width: 50vw;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 100px;
}
.visual-color-14-1,
.visual-color-14-2,
.visual-color-14-3,
.visual-color-14-4 {
  flex-basis: 50%;
  height: 50%;
  width: 50%;
  background-image: url(../img/sause.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: difference;
}
.visual-color-14-1 {
  background-color: var(--color-1);
}
.visual-color-14-2 {
  background-color: var(--color-2);
}
.visual-color-14-3 {
  background-color: var(--color-3);
}
.visual-color-14-4 {
  background-color: var(--color-4);
}

#visuals-0 {
  position: absolute;
  width: calc(92vw);
  height: 3000px;
  z-index: 999;
  user-select: none;
}
#visuals-0 .visual-color-2 {
  offset-path: path(
    "M57.74,144.33c-15.15-89.1,214.7,58.55,221.2,84.58s-155.44,482.14-110.6,637.58c46.25,160.32,485.55,323.83,455.41,487.94-18.66,101.59-307.25,100.77-370.84,182.17s-78.84,315.43-91.08,422.88c-12.52,109.9-69.48,351.47-6.51,442.4,76.74,110.81,409.92,275.2,507.46,182.17,76.32-72.8-104-299.74-123.61-403.37-7.89-41.67-41.42-137.66-13.01-169.15,41.41-45.91,204.08,37.78,247.22-6.51,47.66-48.94,47.75-224.4,0-273.25-50.22-51.37-255.24,57.8-287.27-6.51-25.02-50.23,81.19-156.58,131.13-182.17,26.06-13.35,95.16,19.38,117.11,0,19.66-17.36,8.2-78.31,13.01-104.09s8.11-84.12,26.02-104.09c25.1-27.99,125.16-18.03,141.07-52.09,6.83-14.62-8.52-51.48-21.7-60.77-41.69-29.38-162.64,29.82-204.02,0-22.27-16.05-38.47-76.98-34.73-104.18,5.54-40.25,58-111.08,91.16-134.57,17.4-12.33,80.76-.45,82.48-21.7,2.58-31.96-92.69-31.42-117.2-52.09-23.93-20.18-73.09-73.09-69.45-104.18,7.58-64.83,198.29-113.12,191-177.98-10.37-92.3-298.33-96.65-321.23-186.66-15.97-62.77,70.57-211.45,134.57-221.39,88.17-13.69,187.93,271.37,269.14,234.41,70.4-32.04,50.98-251.21,0-309.38-47.62-54.33-249.03,23.88-286.5-37.9-13.18-21.72,13.92-80.93,34.73-95.5,16.89-11.83,67.9-14.58,82.48,0,28.39,28.39-9.74,121.66,0,160.61,8.95,35.8,73.92,93.6,69.45,130.23-3.54,28.99-54.92,69.1-78.14,86.82-55.69,42.51-213.6,66.25-250.37,125.89-14.24,23.09-19.18,89.34,0,108.52,28.91,28.91,147.9-37.77,163.55,0,27.02,65.22-130.05,188.01-199.68,199.68-46.43,7.78-148.5-40.24-169.3-82.48-19.09-38.76,54.27-130.76,34.73-169.3-12.96-25.55-100.43-19.35-104.18-47.75-8.69-65.71,226.52-106.95,204.02-169.3-32.05-88.81-329.35,81.12-377.66,0-30.32-50.9,71.33-166.12,112.86-208.36,34.06-34.65,120.71-96.59,169.3-95.5,30.71,.69,91.91,36.96,104.18,65.11,105.53,242.13-132.81,781.95-199.68,1037.48-15.64,59.76-110.43,181.75-78.14,234.41,11.47,18.71,76.64-6.42,86.82,13.02,36.46,69.66-147.13,203.97-138.91,282.16,13.57,129.12,302.79,279.53,321.23,408.05,20.26,141.23-103.52,1164.18-242.36,1197.03-73.32,17.35-155.19-419.98-169.81-493.89-12.43-62.85,32.23-569.41,86.6-603.3,55.26-34.44,197.38-16.19,260.45,0,109.14,28.01,291.02,260.41,395.02,217.05,43.75-18.24,14.78-153.08,52.09-182.32,23.08-18.09,96.09-24.69,117.2-4.34,138.32,133.29,66.5,588.14,0,768.34s-376.43,440.57-501.91,587.42c-21.03,24.61-54.71,84.89-84.11,98.44-23.65,10.9-80.27,10.33-104.18,0-23.26-10.05-64.38-48.97-69.45-73.8-11.34-55.5,31.68-180.28,78.14-212.7,34.71-24.22,127.45-6.34,169.3,0,65.16,9.88,217.09,22.1,251.77,78.14,24.88,40.2,5.14,155.47-30.39,186.66-25.85,22.69-104.18,12.84-137.5,4.34-18.69-4.77-56.12-22.83-66.52-39.07-11.77-18.37-9.8-65.03-8.68-86.82,2.22-43.15,17.29-129.77,34.73-169.3,29.79-67.52,148.94-169.2,173.64-238.75,20.36-57.35,51.25-195.73,13.02-243.09-73.18-90.65-361.78-136.23-460.14-73.8-56.26,35.71-64.48,190.13-73.8,256.11-21.39,151.51-101.77,497.8,0,612.07,131.52,147.66,633.1,216.92,785.71,91.16,76.44-62.99,81.85-310.4,30.39-395.02-80.86-132.95-539.53-91.13-573-243.09-33.39-151.57,479.65-318.26,416.73-460.14-45.76-103.17-368.66,76.7-451.45,0C-244.53,2156.9,162.04,757.59,57.74,144.33Z"
  );
  animation: move 127s linear infinite;
  width: 50px;
  height: 50px;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#visuals-0 .visual-color-3 {
  offset-path: path(
    "M57.74,144.33c-15.15-89.1,214.7,58.55,221.2,84.58s-155.44,482.14-110.6,637.58c46.25,160.32,485.55,323.83,455.41,487.94-18.66,101.59-307.25,100.77-370.84,182.17s-78.84,315.43-91.08,422.88c-12.52,109.9-69.48,351.47-6.51,442.4,76.74,110.81,409.92,275.2,507.46,182.17,76.32-72.8-104-299.74-123.61-403.37-7.89-41.67-41.42-137.66-13.01-169.15,41.41-45.91,204.08,37.78,247.22-6.51,47.66-48.94,47.75-224.4,0-273.25-50.22-51.37-255.24,57.8-287.27-6.51-25.02-50.23,81.19-156.58,131.13-182.17,26.06-13.35,95.16,19.38,117.11,0,19.66-17.36,8.2-78.31,13.01-104.09s8.11-84.12,26.02-104.09c25.1-27.99,125.16-18.03,141.07-52.09,6.83-14.62-8.52-51.48-21.7-60.77-41.69-29.38-162.64,29.82-204.02,0-22.27-16.05-38.47-76.98-34.73-104.18,5.54-40.25,58-111.08,91.16-134.57,17.4-12.33,80.76-.45,82.48-21.7,2.58-31.96-92.69-31.42-117.2-52.09-23.93-20.18-73.09-73.09-69.45-104.18,7.58-64.83,198.29-113.12,191-177.98-10.37-92.3-298.33-96.65-321.23-186.66-15.97-62.77,70.57-211.45,134.57-221.39,88.17-13.69,187.93,271.37,269.14,234.41,70.4-32.04,50.98-251.21,0-309.38-47.62-54.33-249.03,23.88-286.5-37.9-13.18-21.72,13.92-80.93,34.73-95.5,16.89-11.83,67.9-14.58,82.48,0,28.39,28.39-9.74,121.66,0,160.61,8.95,35.8,73.92,93.6,69.45,130.23-3.54,28.99-54.92,69.1-78.14,86.82-55.69,42.51-213.6,66.25-250.37,125.89-14.24,23.09-19.18,89.34,0,108.52,28.91,28.91,147.9-37.77,163.55,0,27.02,65.22-130.05,188.01-199.68,199.68-46.43,7.78-148.5-40.24-169.3-82.48-19.09-38.76,54.27-130.76,34.73-169.3-12.96-25.55-100.43-19.35-104.18-47.75-8.69-65.71,226.52-106.95,204.02-169.3-32.05-88.81-329.35,81.12-377.66,0-30.32-50.9,71.33-166.12,112.86-208.36,34.06-34.65,120.71-96.59,169.3-95.5,30.71,.69,91.91,36.96,104.18,65.11,105.53,242.13-132.81,781.95-199.68,1037.48-15.64,59.76-110.43,181.75-78.14,234.41,11.47,18.71,76.64-6.42,86.82,13.02,36.46,69.66-147.13,203.97-138.91,282.16,13.57,129.12,302.79,279.53,321.23,408.05,20.26,141.23-103.52,1164.18-242.36,1197.03-73.32,17.35-155.19-419.98-169.81-493.89-12.43-62.85,32.23-569.41,86.6-603.3,55.26-34.44,197.38-16.19,260.45,0,109.14,28.01,291.02,260.41,395.02,217.05,43.75-18.24,14.78-153.08,52.09-182.32,23.08-18.09,96.09-24.69,117.2-4.34,138.32,133.29,66.5,588.14,0,768.34s-376.43,440.57-501.91,587.42c-21.03,24.61-54.71,84.89-84.11,98.44-23.65,10.9-80.27,10.33-104.18,0-23.26-10.05-64.38-48.97-69.45-73.8-11.34-55.5,31.68-180.28,78.14-212.7,34.71-24.22,127.45-6.34,169.3,0,65.16,9.88,217.09,22.1,251.77,78.14,24.88,40.2,5.14,155.47-30.39,186.66-25.85,22.69-104.18,12.84-137.5,4.34-18.69-4.77-56.12-22.83-66.52-39.07-11.77-18.37-9.8-65.03-8.68-86.82,2.22-43.15,17.29-129.77,34.73-169.3,29.79-67.52,148.94-169.2,173.64-238.75,20.36-57.35,51.25-195.73,13.02-243.09-73.18-90.65-361.78-136.23-460.14-73.8-56.26,35.71-64.48,190.13-73.8,256.11-21.39,151.51-101.77,497.8,0,612.07,131.52,147.66,633.1,216.92,785.71,91.16,76.44-62.99,81.85-310.4,30.39-395.02-80.86-132.95-539.53-91.13-573-243.09-33.39-151.57,479.65-318.26,416.73-460.14-45.76-103.17-368.66,76.7-451.45,0C-244.53,2156.9,162.04,757.59,57.74,144.33Z"
  );
  width: 50px;
  height: 50px;
  animation: move 122s linear infinite;
  background: none;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

#visuals-0 .visual-color-4 {
  offset-path: path(
    "M57.74,144.33c-15.15-89.1,214.7,58.55,221.2,84.58s-155.44,482.14-110.6,637.58c46.25,160.32,485.55,323.83,455.41,487.94-18.66,101.59-307.25,100.77-370.84,182.17s-78.84,315.43-91.08,422.88c-12.52,109.9-69.48,351.47-6.51,442.4,76.74,110.81,409.92,275.2,507.46,182.17,76.32-72.8-104-299.74-123.61-403.37-7.89-41.67-41.42-137.66-13.01-169.15,41.41-45.91,204.08,37.78,247.22-6.51,47.66-48.94,47.75-224.4,0-273.25-50.22-51.37-255.24,57.8-287.27-6.51-25.02-50.23,81.19-156.58,131.13-182.17,26.06-13.35,95.16,19.38,117.11,0,19.66-17.36,8.2-78.31,13.01-104.09s8.11-84.12,26.02-104.09c25.1-27.99,125.16-18.03,141.07-52.09,6.83-14.62-8.52-51.48-21.7-60.77-41.69-29.38-162.64,29.82-204.02,0-22.27-16.05-38.47-76.98-34.73-104.18,5.54-40.25,58-111.08,91.16-134.57,17.4-12.33,80.76-.45,82.48-21.7,2.58-31.96-92.69-31.42-117.2-52.09-23.93-20.18-73.09-73.09-69.45-104.18,7.58-64.83,198.29-113.12,191-177.98-10.37-92.3-298.33-96.65-321.23-186.66-15.97-62.77,70.57-211.45,134.57-221.39,88.17-13.69,187.93,271.37,269.14,234.41,70.4-32.04,50.98-251.21,0-309.38-47.62-54.33-249.03,23.88-286.5-37.9-13.18-21.72,13.92-80.93,34.73-95.5,16.89-11.83,67.9-14.58,82.48,0,28.39,28.39-9.74,121.66,0,160.61,8.95,35.8,73.92,93.6,69.45,130.23-3.54,28.99-54.92,69.1-78.14,86.82-55.69,42.51-213.6,66.25-250.37,125.89-14.24,23.09-19.18,89.34,0,108.52,28.91,28.91,147.9-37.77,163.55,0,27.02,65.22-130.05,188.01-199.68,199.68-46.43,7.78-148.5-40.24-169.3-82.48-19.09-38.76,54.27-130.76,34.73-169.3-12.96-25.55-100.43-19.35-104.18-47.75-8.69-65.71,226.52-106.95,204.02-169.3-32.05-88.81-329.35,81.12-377.66,0-30.32-50.9,71.33-166.12,112.86-208.36,34.06-34.65,120.71-96.59,169.3-95.5,30.71,.69,91.91,36.96,104.18,65.11,105.53,242.13-132.81,781.95-199.68,1037.48-15.64,59.76-110.43,181.75-78.14,234.41,11.47,18.71,76.64-6.42,86.82,13.02,36.46,69.66-147.13,203.97-138.91,282.16,13.57,129.12,302.79,279.53,321.23,408.05,20.26,141.23-103.52,1164.18-242.36,1197.03-73.32,17.35-155.19-419.98-169.81-493.89-12.43-62.85,32.23-569.41,86.6-603.3,55.26-34.44,197.38-16.19,260.45,0,109.14,28.01,291.02,260.41,395.02,217.05,43.75-18.24,14.78-153.08,52.09-182.32,23.08-18.09,96.09-24.69,117.2-4.34,138.32,133.29,66.5,588.14,0,768.34s-376.43,440.57-501.91,587.42c-21.03,24.61-54.71,84.89-84.11,98.44-23.65,10.9-80.27,10.33-104.18,0-23.26-10.05-64.38-48.97-69.45-73.8-11.34-55.5,31.68-180.28,78.14-212.7,34.71-24.22,127.45-6.34,169.3,0,65.16,9.88,217.09,22.1,251.77,78.14,24.88,40.2,5.14,155.47-30.39,186.66-25.85,22.69-104.18,12.84-137.5,4.34-18.69-4.77-56.12-22.83-66.52-39.07-11.77-18.37-9.8-65.03-8.68-86.82,2.22-43.15,17.29-129.77,34.73-169.3,29.79-67.52,148.94-169.2,173.64-238.75,20.36-57.35,51.25-195.73,13.02-243.09-73.18-90.65-361.78-136.23-460.14-73.8-56.26,35.71-64.48,190.13-73.8,256.11-21.39,151.51-101.77,497.8,0,612.07,131.52,147.66,633.1,216.92,785.71,91.16,76.44-62.99,81.85-310.4,30.39-395.02-80.86-132.95-539.53-91.13-573-243.09-33.39-151.57,479.65-318.26,416.73-460.14-45.76-103.17-368.66,76.7-451.45,0C-244.53,2156.9,162.04,757.59,57.74,144.33Z"
  );
  animation: move 120s linear infinite;
  width: 50px;
  height: 50px;
  background: none;
  animation-direction: alternate;
}
#svg-blume {
  width: 50px;
}
#svg-blume .blume {
  fill: var(--color-1);
}
#svg-viereck {
  width: 50px;
}
#svg-viereck .viereck {
  fill: var(--color-2);
}
#svg-punkte {
  width: 50px;
}
#svg-punkte .punkte {
  fill: var(--color-3);
}
#svg-stern {
  width: 50px;
}
#svg-stern .stern {
  fill: var(--color-4);
}

.containertoggle {
  /* border: 1px solid lime; */
  overflow: hidden;
  position: relative;
  /* the container's height will determine the height of its slider  */
  /* height: 350px; */
}
#toggle {
  margin-left: auto;
  margin-right: auto;
  color: var(--color-4);
}
button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-3);
}

.slider {
  overflow-y: scroll;
  /* complete liquid height based on the parent's height!! */
  height: 100%;

  /* only transition on transform properties which are hardware accelerated = way better performances */
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition: -moz-transform 0.3s ease;
  -ms-transition: -ms-transform 0.3s ease;
  transition: transform 0.3s ease;
}

.slider.opened {
  /* visible */
  -webkit-transform: translate(0, 0%);
  -moz-transform: translate(0, 0%);
  -ms-transform: translate(0, 0%);
  transform: translate(0, 0%);
}
.slider.closed {
  /* completely offscreen */
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

/* -------- not interesting styles ----------- */

.slider {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  padding: 20px;
  background: var(--color-1);
}
.toggle-inhalt {
  display: flex;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 270px;
  width: 100%;
  height: auto;
}

html {
  cursor: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="100" width="100"><text y="28" font-size="32">🌚</text><path d="M0,2 L0,0 L2,0" fill="red" /></svg>'),
    auto;
}