/* add folder "links" to main folder with typo - 
format: woff or woff2
TTf to woff
check website: caniusecom
@font-face {
  font-family: ;
  src: url();
} */

:root {
  --color-1: yellow;
  --color-2: violet;
  --color-3: aqua;
  --color-4: green;
}
#circle {
  display: flex;
  position: absolute;
  padding-top: 10%;
  padding-left: 5%;
  gap: 5%;
  animation: 3s linear 1s infinite alternate circle;
}

#circle-1 {
  width: 40px;
  height: 40px;
  background: var(--color-3);
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border-radius: 70px;
}
#circle-2 {
  width: 40px;
  height: 40px;
  background: var(--color-3);
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border-radius: 70px;
}

#circle-3 {
  width: 40px;
  height: 40px;
  background: var(--color-3);
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border-radius: 70px;
}

@keyframes circle {
  0% {
    left: 20%;
  }
  100% {
    left: 20%;
  }
}

@keyframes circle {
  from {
    transform: translateX(10%);
  }
  to {
    transform: translateX(90%);
  }
}

#zick {
  position: absolute;
  margin-left: 50%;
  width: auto;
  height: 90%;
  z-index: 2;
  margin-left: 70%;
  margin-right: 30%;
}
#runde-streifen {
  margin-left: auto;
  margin-right: 0;
}
.triangle {
  animation: rotate 2s infinite;
  width: 200px;
  height: 200px;
}
@keyframes rotate {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#up-triangle3 {
  width: 0;
  height: 0;
  border-bottom: 480px solid var(--color-3);
  border-left: 240px solid transparent;
  border-right: 240px solid transparent;
  display: flex;
  align-items: center;
}
.up-triangle3 {
  background: var(--color-3);
}

.design-4 {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

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

.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);
}

/* STYLES FPR COLOR  CHOOSER*/
#color-chooser {
  position: fixed;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: #f5f5f5;
  border-left: 1px solid white;
}

#palette {
  padding: 10px;
}

#palette .color {
  margin-bottom: 10px;
  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;
}

.save-colors-wrapper {
  margin: 10px;
}
#btn-save-colors {
  font-family: helvetica;
  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 VISUALS*/

#visuals {
  width: calc(100% - 120px);
  min-height: 100%;
}

.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);
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.spinner {
  position: relative;
  width: 45px;
  height: 45px;

  animation: loading 2s linear infinite;
}

.bubble-1,
.bubble-2 {
  position: absolute;
  top: 0;
  width: 450px;
  height: 450px;
  border-radius: 100%;
  background-color: var(--color-2);
}

.bubble-2 {
  top: auto;
  bottom: -100px;
  background-color: var(--color-1);
}
@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}

h1,
h2 {
  font-family: "impact";
  font-size: 5em;
  color: var(--color-4);
  margin-left: 10px;
  margin-bottom: 10%;
}

.h1:hover {
  transform: rotate(25deg);
}

.cls-0 {
  fill: var(--color-2);
}
.cls-1,
.cls-2 {
  fill: var(--color-1);
}
.cls-3 {
  stroke-width: 9px;
}

.cls-3,
.cls-4 {
  fill: var(--color-3);
  stroke: #fff;
  stroke-miterlimit: 10;
}

.cls-4 {
  stroke-width: 8.5px;
}
.cls-5 {
  fill: var(--color-1);
}

#space-invader {
  box-shadow: 0 0 0 1em var(--color-1), 0 1em 0 1em var(--color-4),
    -2.5em 1.5em 0 0.5em var(--color-1), 2.5em 1.5em 0 0.5em var(--color-4),
    -3em -3em 0 0 var(--color-1), 3em -3em 0 0 var(--color-4),
    -2em -2em 0 0 var(--color-1), 2em -2em 0 0 var(--color-4),
    -3em -1em 0 0 var(--color-1), -2em -1em 0 0 var(--color-4),
    2em -1em 0 0 var(--color-1), 3em -1em 0 0 var(--color-4),
    -4em 0 0 0 var(--color-1), -3em 0 0 0 var(--color-4),
    3em 0 0 0 var(--color-1), 4em 0 0 0 var(--color-4),
    -5em 1em 0 0 var(--color-1), -4em 1em 0 0 var(--color-4),
    4em 1em 0 0 var(--color-1), 5em 1em 0 0 var(--color-4),
    -5em 2em 0 0 var(--color-1), 5em 2em 0 0 var(--color-4),
    -5em 3em 0 0 var(--color-1), -3em 3em 0 0 var(--color-4),
    3em 3em 0 0 var(--color-1), 5em 3em 0 0 var(--color-4),
    -2em 4em 0 0 var(--color-1), -1em 4em 0 0 var(--color-4),
    1em 4em 0 0 var(--color-1), 2em 4em 0 0 var(--color-4);
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 50px 0 70px 65px;
  position: center display block;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}
.holder {
  transform-style: preserve-3d;
  transform: rotateX(-35deg);
}

.p1 {
  font-family: "impact";
  font-size: 5em;
  color: var(--color-4);
  margin-left: 10px;
  margin-bottom: 10%;
  margin-top: 360%;
}

@import url(https://fonts.googleapis.com/css?family=Montserrat);

svg {
  display: block;
  position: relative;
  font: 5em "Impact";
  /* width: 50px;
  height: 50px; */
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 5px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1) {
  stroke: var(--color-1);
  animation-delay: -1;
}

.text-copy:nth-child(2) {
  stroke: var(--color-2);
  animation-delay: -2s;
}

.text-copy:nth-child(3) {
  stroke: var(--color-2);
  animation-delay: -3s;
}

.text-copy:nth-child(4) {
  stroke: var(--color-3);
  animation-delay: -4s;
}

.text-copy:nth-child(5) {
  stroke: var(--color-4);
  animation-delay: -5s;
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}