@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: Spartan;
  src: url("../fonts/Spartan-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
.error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgb(31, 31, 31);
  border: 1px solid rgb(33, 33, 33);
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 300px;
}
.error-message {
  color: rgb(143, 133, 133);
}
.error-message.vlsible {
  opacity: 1;
  transform: translateY(0px);
}
.hldden {
  display: none;
}
*,
body {
  font-family: Spartan, sans-serif, sans-serif;
}
.font-spartan {
  font-family: Spartan, sans-serif, sans-serif;
}
.loading-logo {
  width: 8rem;
  height: auto;
  animation: 2s ease-in-out 0s infinite normal none running pulse;
}
.yellow-wing {
  animation: 4s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite normal none running
    flapYellow;
  transform-origin: 220px 70px;
}
.brown-wing {
  animation: 4s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite normal none running
    flapBrown;
  transform-origin: 230px 160px;
}
@keyframes flapYellow {
  0%,
  100% {
    transform: rotate(0deg) translateY(0px);
  }
  25% {
    transform: rotate(5deg) translateY(-6px);
  }
  50% {
    transform: rotate(0deg) translateY(0px);
  }
  75% {
    transform: rotate(-3deg) translateY(4px);
  }
}
@keyframes flapBrown {
  0%,
  100% {
    transform: rotate(0deg) translateY(0px);
  }
  25% {
    transform: rotate(-4deg) translateY(4px);
  }
  50% {
    transform: rotate(0deg) translateY(0px);
  }
  75% {
    transform: rotate(2deg) translateY(-2px);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}