/* Variables */
:root {
  --primario: rgb(85, 84, 75);
  --secundario: rgb(255, 111, 0);
  --terciario: rgb(237, 241, 232);
  --texto: rgb(11, 14, 1);
}

/* Estilos generales */
* {
  font-family: "Urbanist", sans-serif;
}

a {
  text-decoration: none;
}

.text-justify {
  text-align: justify;
}

.w-h-250 {
  width: 250px;
  height: 250px;
}

/* Estilos carrusel */
.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: var(--secundario);
  height: 50px;
}

/* Estilo header */
header#header {
  background: url("../img/fondo_hierba.jpeg") no-repeat center 90% / cover fixed;
  background-color: var(--primario);
  .nav-item {
    a {
      font-weight: 200;
      color: var(--terciario);
    }
  }
  .navbar {
    background-color: var(--secundario);
    .navbar-toggler {
      background-color: none;
      border: none;
      .icon-menu {
        color: var(--terciario);
      }
    }
    .dropdown-menu {
      background-color: var(--terciario);
      box-shadow: 0px 0px 2px var(--terciario);
      a {
        color: var(--texto);
        &:hover {
          transition: all 0.5s;
          color: var(--secundario);
          background-color: rgb(64, 65, 62);
        }
      }
    }
  }
}

footer#footer {
  background: url("../img/fondo_hierba_2.jpeg") no-repeat center 10% / cover fixed;
  p {
    color: var(--terciario);
  }
  a {
    color: var(--terciario);
    &:hover {
      transition: all 0.3s;
      color: var(--secundario);
    }
  }
}

/* Inicio */
#presentacion {
  background: url("../img/fondo_hierba_2.jpeg") no-repeat center 90% / cover
    fixed;
  color: var(--terciario);
}
#felinos {
  background-color: var(--terciario);
}

h1 {
  color: var(--primario);
}
div.animal {
  border-bottom: solid 1px var(--primario);
  border-image: linear-gradient(90deg, var(--secundario), transparent) 1;
  padding-bottom: 20px;
  h2 {
    color: var(--primario);
  }
  p {
    color: var(--secundario);
  }
}

/* Animales */
section#resumen {
  background-color: var(--terciario);
  p.text-center {
    color: var(--secundario);
  }
}

section#informacion {
  background-color: var(--secundario);
  h2 {
    color: var(--terciario);
  }
  ul,
  p {
    color: var(--primario);
    margin: 0;
  }
  div.col-12 {
    border-top: solid 1px var(--primario);
    border-image: linear-gradient(90deg, var(--terciario), transparent) 1;
  }
}

section#carousel {
  background-color: var(--primario);
}

/* Equipo de producción */
section#presentacion_equipo {
  background-color: var(--terciario);
  h1 {
    color: var(--secundario);
  }
  p {
    color: var(--primario);
  }
}

section#equipo {
  background-color: var(--primario);
  div.card {
    background-color: transparent;
    border: none;
    align-items: center;
    img {
      border-radius: 500px;
      max-width: 250px;
    }
    h5 {
      color: var(--secundario);
    }
    p {
      color: var(--terciario);
    }
  }
}