/* https://colorhunt.co/palette/1a120b3c2a21d5cea3e5e5cb */

body {
  background-color: #1a120b;
  display: flex;
  text-align: center;
  margin: auto;
  max-width: 1000px;
  justify-content: center;
  align-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #e5e5cb;
  /* color: #3c2a21; */
  font-size: 1.1rem;
  gap: 1.5rem;
}

.outer {
  border: 2px dashed #e5e5cb7a;
  width: 400px;
  min-height: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 1;
  /* background-color: cornsilk; */
  transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.5s ease;
}

button {
  cursor: pointer;
  font-size: 1.4rem;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background-color: #ff91b5;
  transition: background-color 0.6s ease, scale 0.6s ease;
}

button:hover {
  background-color: #f5578c;
  scale: 0.9;
  rotate: 30deg;
}

input {
  font-size: 1.4rem;
  padding: 10px 20px;
  border-radius: 10px;
  border: 2px solid #8cfa9e;
  transition: border-color 0.3s linear, translate 0.4s ease;
  width: 4rem;
}

/* Demonstration of how the properties work */
input:hover {
  border-color: #ff91b5;
  /* translate: -30px 40px; */
}
#duck {
  transform: scale 0.6s ease;
}

#duck:hover {
  scale: 0.9;
}

#duck-icon {
  cursor: pointer;
  transition: fill 0.3s ease;
}

#duck-icon:hover {
  fill: #f5578c;
}

.box {
  background-color: #ff91b5;
  animation-name: box-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 4px dashed #ffffff;
}

@keyframes box-animation {
  0% {
    background-color: #ff7878;
  }
  20% {
    background-color: #ffb87a;
  }
  40% {
    background-color: #fafa8c;
  }
  60% {
    background-color: #8cfa9e;
  }
  80% {
    background-color: #ff56e0;
  }
  100% {
    background-color: #ff91b5;
  }
}

/* @keyframes border-animation {
} */

@keyframes bounce {
  0% {
    translate: 0px 0px;
  }
  45% {
    translate: 0px -30px;
  }
  70% {
    translate: 0px -15px;
  }
  100% {
    translate: 0px 0px;
  }
}

#my-duck {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.spinner {
  border: 3px solid #ff91b5;
  border-top-color: #8cfa9e;
  width: 100px;
  height: 100px;
  animation-name: loading;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius: 50%;
}

@keyframes loading {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

#heart {
  animation-name: beat;
  animation-timing-function: ease;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes beat {
  0% {
    scale: 0.9;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 0.9;
  }
}