/* HEADER */

.navbar {
  position: fixed;
  background-color: rgb(36, 36, 36) !important;
  /* padding-top: 15px;
  padding-bottom: 17px; */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
  z-index: 2;
  top: 0;
}

.logo {
width: 15rem;
}

.navbar-collapse {
  flex-grow: 0;
}

.nav-item{
  font-family: 'Oswald';
  font-size: 30px;
  margin-right: 20px;
}

.nav-link{
  color: rgb(230, 230, 230);
}

.nav-link:hover {
  color: #F9AF59;
}

.nav-link:focus{
  color: #FF7A00;
}

.navbar-toggler {
z-index: 999;
background-color: lightgray;
color: #F9AF59;
}

.navbar-toggler-icon {
color: orange !important;
z-index: 1000;
}

@media (max-width: 380px) {
  .logo {
    width: 10rem;
  }

  .navbar {
    --bs-navbar-toggler-padding-y: 0.404vw;
    --bs-navbar-toggler-padding-x: 2vw;
    --bs-navbar-toggler-font-size:1rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: 1.5vw;
    --bs-navbar-toggler-focus-width: 0.404vw;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
} 
}

/* MAIN */

body {
  background-color: #f8e8dc;
}

.imgfondo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Esto hace que la altura del contenedor sea igual a la altura de la ventana */
}

.imgfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hace que la imagen cubra todo el contenedor */
}

.responsive-img {
  width: 100%;
  height: 100%;
}


.creditos {
  margin-top: 1.3rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.cr {
  color: #e6a780;
  text-decoration: none;
  font-size: 1.25vw;
  font-family: "Poppins";
}

@media (max-width: 1200px) {
  .responsive-img {
    content: url('../img/ec4.jpg');
    margin-top: 20vw;
  }

  .cr {
    font-size: 1.5vw;
  }

  .creditos {
    margin-top: 11vw;
  }
}

@media (max-width: 700px) {
  .responsive-img {
    content: url('../img/ec2.jpg');
    margin-top: 30vw;
  }

  .cr {
    font-size: 2.5vw;
  }

  .creditos {
    margin-top: 11vw;
  }
}

@media (max-width: 400px) {
  .responsive-img {
    content: url('../img/ec3.jpg');
    margin-top: 30vw;
  }

  .cr {
    font-size: 3vw;
  }

  .creditos {
    margin-top: 3rem;
  }
}