/* <!-- command,2 --> second page
<!-- command,n --> new page  */
:root {
  --color-1: rgb(75, 196, 64);
  --color-2: yellow;
  --color-3: red;
  --color-4: violet;
}
body {
  cursor: grab;
}
@import "_flex-container";

/* ändern */
.flex-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: bisque;
  overflow: hidden;
}
/* STYLES FOR VISUALS */
#visuals {
  width: calc(100%-120px);
  min-height: 100%;
  position: relative;
}
/* DONT TOUCH THIS */
.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);
}
.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;
  text-align: center;
  cursor: pointer;
}
/* STYLES FOR VISUAL 1 */

#visual-1 .visual-color-1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 960px;
  top: 150px;
}
#visual-1 .visual-color-2 {
  width: 100px;
  height: 150px;
  position: absolute;
  left: 1200px;
  top: 450px;
  rotate: 30deg;
}
#visual-1 .visual-color-3 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 450px;
  border-radius: 100%;
}
#visual-1 .visual-color-4 {
  width: 10px;
  height: 1200px;
  position: absolute;
  top: -100px;
  left: 770px;
  rotate: -65deg;
}
/* 2.VERSUCH */
.container2 {
  background-color: yellow;
  height: 100vh;
  width: calc(100vw - 120px);
  overflow: hidden;
  position: relative;
}
#visual-2 .visual-color-1 {
  width: 200px;
  height: 200px;
  position: relative;
  left: 960px;
  top: 200px;
  animation-name: rotation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  rotate: 0deg;
}
#visual-2 .visual-color-2 {
  width: 100px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  left: 1200px;
  top: 200px;
  rotate: 30deg;
}

#visual-2 .visual-color-3 {
  width: 200px;
  height: 200px;
  position: relative;
  left: 500px;
  border-radius: 100%;
  animation-name: circle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
/* ändern */
#visual-2 .visual-color-4 {
  width: 10px;
  height: 5000px;
  position: relative;
  top: -930px;
  left: 470px;
  animation-name: rotation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  rotate: 0deg;
}
#visual-2 .box2 {
  background: aqua;
  width: 10px;
  height: 7000px;
  position: absolute;
  top: -100px;
  left: 200px;
  animation-name: rotation;
  transform-origin: center;
  animation-duration: 4s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  rotate: 90deg;
}
@keyframes rotation {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes circle {
  from {
    top: -100px;
    left: 50px;
    background-color: var(--color-1);
  }
  33.3% {
    top: -100px;
    left: 500px;
    background-color: var(--color-2);
  }
  50% {
    top: 100px;
    left: 500px;
    background-color: var(--color-3);
  }
  75% {
    top: 100px;
    left: 50px;
    background-color: var(--color-4);
  }
  to {
    top: -100px;
    left: 50px;
    background-color: var(--color-1);
  }
}

/* 3.VERSUCH */

.container3 {
  height: 100vh;
  width: calc(100vw - 120px);
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
  background-color: var(--color-1);
  animation: gradient 10s infinite;
}
/* #visual-3 {
  transform-origin: center; */
/* } */

.drehung {
  height: 50%;
  aspect-ratio: 1/1;
  /* transform-origin: center; */
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: gradient 10s 1s infinite;
  animation: rotation 5s infinite;
  background-color: var(--color-1);
}
.square {
  height: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  justify-content: center;
  align-items: center;
  animation: rotation 5s reverse infinite;
  background-color: var(--color-4);
  /* animation: gradient 10s 3s infinite; */
  /* transform-origin: center; */
}

@keyframes gradient {
  from {
    background-color: var(--color-1);
  }
  25% {
    background-color: var(--color-2);
  }
  50% {
    background-color: var(--color-3);
  }
  75% {
    background-color: var(--color-4);
  }
  to {
    background-color: var(--color-1);
  }
}
@keyframes gradientletters {
  from {
    color: var(--color-1);
    top: 10%;
  }
  25% {
    color: var(--color-2);
    top: 30%;
  }
  50% {
    color: var(--color-3);
    top: 70%;
  }
  75% {
    color: var(--color-4);
    top: 30%;
  }
  to {
    color: var(--color-1);
    top: 10%;
  }
}
/* 4.VERSUCH */
.svg-face {
  fill: var(--color-1);
  height: 50%;
}
.face-wrapper {
  background: var(--color-2);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
/* 5.VERSUCH */
.landschafstwrapper {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  border-bottom: 2px black;
  background: linear-gradient(
    -0deg,
    var(--color-1),
    var(--color-2),
    var(--color-3),
    var(--color-4),
    var(--color-1)
  );
  background-size: 400% 400%;
  height: 100vh;
  width: 100%;
  animation: Daytime 10s alternate linear infinite;
}
.animated-sky {
  width: 100%;
  background-size: 400% 400%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;

  /* animation: Daytime 2s linear infinite alternate; */
}
.Ebene_2 {
  fill: var(--color-2);
  position: relative;
  top: 300px;
  width: calc(100% - 120px);
}
@keyframes Daytime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 50% 0%;
  }
}

/* 4.VERSUCH */

#bilder {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}
.color1,
.color2,
.color3,
.color4 {
  flex-basis: 50%;
  height: 50%;
  background-position: center;
  background-size: cover;
  background-blend-mode: difference;
  background-image: url(kartenbild2.jpg);
}
.color1 {
  background-color: var(--color-1);
  animation: gradient 3s infinite;
}
.color2 {
  background-color: var(--color-2);
  animation: gradient 4s 3s infinite;
}
.color3 {
  background-color: var(--color-3);
  animation: gradient 5s 6s infinite;
}
.color4 {
  background-color: var(--color-4);
  animation: gradient 6s 9s infinite;
}
/* 7.VERSUCH */
.hello {
  width: calc(100vw - 120px);
  height: 100vh;
  position: relative;
  background-color: aqua;
}
.h {
  position: absolute;
  animation: gradientletters 10s 12s infinite linear;
  left: 100px;
  filter: blur(3px);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 200px;
}
.e {
  position: absolute;
  animation: gradientletters 10s 9s infinite linear;
  left: 350px;
  filter: blur(10px);
  font-family: monospace;
  font-size: 200px;
}
.l1 {
  position: absolute;
  animation: gradientletters 10s 6s infinite linear;
  left: 700px;
  filter: blur(2px);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 200px;
}

.l2 {
  position: absolute;
  left: 1000px;
  filter: blur(10px);
  animation: gradientletters 10s 3s infinite linear;
  font-family: "Times New Roman", Times, serif;
  font-size: 200px;
}
.o {
  position: absolute;
  animation: gradientletters 10s infinite linear;
  filter: blur(2px);
  left: 1300px;
  font-size: 200px;
  font-family: fantasy;
}
/* 8.VERSUCH */
.container-8 {
  position: relative;
  background-color: var(--color-4);
  height: 100vh;
  width: calc(100vw - 120px);
  overflow: hidden;
}
.b1 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  animation: lenght 3s infinite linear;
}
.b2 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(85px);
  animation: lenght 5s 2s infinite linear;
}
.b3 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(2 * 85px);
  animation: lenght 6s 6s infinite linear;
}
.b4 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(3 * 85px);
  animation: lenght 2s infinite linear;
}
.b5 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(4 * 85px);
  animation: lenght 4s 3s infinite linear;
}
.b6 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(5 * 85px);
  animation: lenght 10s infinite linear;
}
.b7 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(6 * 85px);
  animation: lenght 4s infinite linear;
}
.b8 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(7 * 85px);
  animation: lenght 5s infinite linear;
}
.b9 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(8 * 85px);
  animation: lenght 2s 2s infinite linear;
}
.b10 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(9 * 85px);
  animation: lenght 5s 10s infinite linear;
}
.b11 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(10 * 85px);
  animation: lenght 1s 2s infinite linear;
}
.b12 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(11 * 85px);
  animation: lenght 3s 3s infinite linear;
}
.b13 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(12 * 85px);
  animation: lenght 7s 5s infinite linear;
}
.b14 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(13 * 85px);
  animation: lenght 3s 7s infinite linear;
}
.b15 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(14 * 85px);
  animation: lenght 2s 5s infinite linear;
}
.b16 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(15 * 85px);
  animation: lenght 10s infinite linear;
}
.b17 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(16 * 85px);
  animation: lenght 7s 3s infinite linear;
}
.b18 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(17 * 85px);
  animation: lenght 2s infinite linear;
}
.b19 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(18 * 85px);
  animation: lenght 5s 1s infinite linear;
}
.b20 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-3);
  left: calc(19 * 85px);
  animation: lenght 5s 2s infinite linear;
}
.b21 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-1);
  left: calc(20 * 85px);
  animation: lenght 5s infinite linear;
}
.b22 {
  position: absolute;
  bottom: 0;
  width: 85px;
  height: 85px;
  background-color: var(--color-2);
  left: calc(21 * 85px);
  animation: lenght 4s infinite linear;
}
/* 9.Versuch */
.container-9 {
  background-color: antiquewhite;
  height: 100vh;
  width: 100vw;
}
.hiddenrotation {
  /* background-color: aquamarine; */
  height: 600px;
  width: 600px;
  position: relative;
  left: calc(50% - 300px);
  top: calc(50% - 300px);
  animation: rotation 2s infinite linear;
}
.k1 {
  position: absolute;
  top: 0;
  left: 0;
  animation: gradient 5s infinite;
  height: 250px;
  width: 250px;
  border-radius: 100%;
}

@keyframes lenght {
  from {
    height: 85px;
  }
  25% {
    height: 25%;
  }
  50% {
    height: 75%;
  }
  60% {
    height: 90%;
  }
  75% {
    height: 50%;
  }
  90% {
    height: 20%;
  }
  to {
    height: 85px;
  }
}
/* STYLES FOR COLOR CHOOSER */
#color-chooser {
  position: fixed;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: black;
}
#palette {
  padding: 10px;
}
#palette.color {
  margin-bottom: 1em;
  text-align: center;
}
input[type="color"] {
  border: 0;
  outline: 0;
  padding: 0;
  box-shadow: 0;
  background-color: inherit;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}
/* 10.VERSUCH */
.container-10 {
  position: relative;
  width: calc(100vw - 120px);
  height: 100vh;
  background-color: aquamarine;
}
#Ebene_2 {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 100px;
  left: 250px;
}

.cls-1 {
  fill: #9f9e95;
}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17 {
  stroke: #1d1d1b;
  stroke-miterlimit: 10;
}

.cls-2 {
  fill: var(--color-1);
}

.cls-3 {
  fill: var(--color-2);
}

.cls-4 {
  fill: var(--color-3);
}

.cls-5 {
  fill: var(--color-4);
}

.cls-6 {
  fill: var(--color-1);
}

.cls-7 {
  fill: var(--color-2);
}

.cls-8 {
  fill: var(--color-3);
}

.cls-9 {
  fill: var(--color-4);
}

.cls-10 {
  fill: var(--color-1);
}

.cls-11 {
  fill: var(--color-2);
}

.cls-12 {
  fill: var(--color-3);
}

.cls-13 {
  fill: var(--color-4);
}

.cls-14 {
  fill: var(--color-1);
}

.cls-15 {
  fill: var(--color-2);
}

.cls-16 {
  fill: var(--color-3);
}

.cls-17 {
  fill: var(--color-4);
}

/* .pfad-1 {
  fill: var(--color-1);
}
.cls-1 {
    fill: #81bd5a;
  } */
/* 11.VERSUCH */

.container-11 {
  width: calc(100vw - 120px);
  height: 100vh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
/* .circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
} */
.circle {
  mix-blend-mode: screen;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  position: absolute;
}
.kreis1 {
  /* height: 600px;
  width: 600px;
  position: absolute; */
  background: var(--color-2);
  /* border-radius: 100%; */
  top: 30px;
  left: 350px;
  /* filter: blur(5px);
  background-blend-mode: difference;
  opacity: 50%; */
}
.kreis2 {
  /* height: 600px;
  width: 600px;
  position: absolute; */
  background: var(--color-3);
  /* border-radius: 100%; */
  top: 30px;
  left: 700px;
  /* filter: blur(5px);
  background-blend-mode: difference;
  opacity: 50%; */
}
.kreis3 {
  /* height: 600px;
  width: 600px;
  position: absolute; */
  background: var(--color-4);
  /* border-radius: 100%; */
  top: 330px;
  left: 525px;
  /* filter: blur(5px);
  background-blend-mode: difference;
  opacity: 50%; */
}