$main: #B89764;
$light: #fff;
$dark: #1F1F1F;
// $font: ;

.container {
  max-width: 1200px;
  margin: 0 auto;
}

#adopt-controller-button {
  z-index: 100 !important
}

.whats-fixed {
  position: fixed;
  bottom: 40px;
  right: 40px;
  animation: move 3s infinite;
  z-index: 222;
  max-width: 65px;
}

@keyframes move {
  25% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0px);
  }
}

html {
  font-size: 16px;
  font-family: "quasimoda", sans-serif;
  background-color: $dark;
  color: $light;
}

.view {
  transition: .6s;
}

a,
a img,
svg path,
button {
  transition: 0.3s;
}

@keyframes sobe {
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

// .view.active {
//   .card {
//     animation: sobe 1.5s forwards;

//     @for $i from 2 through 8 {
//       &:nth-child(#{$i}) {
//         animation-delay: calc(.2s * #{$i - 1});
//       }
//     }
//   }
// }

.btn {
  font-size: rem(20);
  color: $light;
  padding: 13px 30px 10px;
  background: linear-gradient(to bottom, #F2CE96, #B89764);
  max-width: fit-content;

  &:hover {
    box-shadow: 0 0 30px 30px $dark inset, 0 0 0 1px $main;
  }
}

h3 {
  @include font(40, 600, 1em);
  color: $main;
}