@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');

:root {
  font-family: 'Quicksand', sans-serif;
  --color-primary: rgb(17, 17, 17);
}

body,
body::backdrop {
  background-color: rgb(40,40,40);
  background-image: url('../img/fondo.png');
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
}

header {
  opacity: 0;
  animation: fade-in 1s ease-in forwards;
}

.bg-primary {
  background-color: var(--color-primary);
}

.border-primary {
  border-color: var(--color-primary);
}

.text-shadow-black {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.btn {
  width: 100%;
  background-image: linear-gradient(to right top, #111111, #191919, #212121, #2a2a2a, #323232);
  padding: 1rem;
  color: white;
  font-size: 1.4rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* border-radius: .75rem; */
  /* box-shadow: rgba(250, 250, 250, 0.5) 0px 2px 15px; */
  /* box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px; */
  opacity: 0;
  transform: translateY(-150px);
  animation: bounce-down .75s ease forwards;
}

.btn:hover {
  background-image: linear-gradient(to right top, #111111, #111111);
}

.btn > img {
  width: 52px;
}

.btn:nth-child(2) {
  animation-delay: 200ms;
}

.btn:nth-child(3) {
  animation-delay: 400ms;
}

@keyframes fade-in {
   to {
    opacity: 1;
  }
}

@keyframes bounce-down {
  to {
   opacity: 1;
   transform: translateY(0);
 }
}