@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
/*********HOME*********/
.containerHome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
}
.backgroundImgH {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 50%;
  background-image: url("/assets/background-home.9c9ed0a3.webp");
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.logoH {
  content: url('/assets/logo-marchantes.7e06e68c.png');
  display: block;
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.loginBtnH {
  min-width: 130px;
  height: 40px;
  color: #2d2b2b;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0;
  margin-top: 10%;
}
.registerLinkH {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  bottom: 250px;
  padding: 3px;
  left: 0;
  right: 0;
  margin: auto;
  width: 30vh;
}
.containerR{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
}
.backgroundImgR {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  background-image: url('/assets/background-register.709068b6.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
}
.logoR {
  content: url('/assets/logo-marchantes.7e06e68c.png');
  display: block;
  margin-bottom: 30px;
  width: 200px;
  height: 200px;
}
.formularioR {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
  padding: 20px;
}
.continuarBtnR {
  min-width: 130px;
  height: 40px;
  color: #2d2b2b;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0;
  margin-top: 10%;
}
.googleBtnR {
  min-width: 130px;
  height: 40px;
  color: #2d2b2b;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0;
  margin-top: 50px;
}
/*
.logoGoogleR {
  margin-right: 8px;
}
*/
/* Dispositivos móviles pequeños (por ejemplo, iPhone) */
@media only screen and (max-width: 480px) {
  /* Agrega tus estilos específicos para dispositivos móviles pequeños aquí */
}
/* Dispositivos móviles medianos (por ejemplo, tablets) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Agrega tus estilos específicos para dispositivos móviles medianos aquí */
}
/* Dispositivos móviles grandes (por ejemplo, tablets en modo apaisado) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Agrega tus estilos específicos para dispositivos móviles grandes aquí */
}
/* Pantallas pequeñas y dispositivos con resolución baja */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  /* Agrega tus estilos específicos para pantallas pequeñas aquí */
}
/* Pantallas medianas y dispositivos con resolución media */
@media only screen and (min-width: 1367px) and (max-width: 1680px) {
  /* Agrega tus estilos específicos para pantallas medianas aquí */
}
/* Pantallas grandes y dispositivos con resolución alta */
@media only screen and (min-width: 1681px) {
  /* Agrega tus estilos específicos para pantallas grandes aquí */
}
/*********LOGIN*********/
.containerL {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-top: 0px;
  margin-top: 150px;
}
.backgroundImgL {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 50%;
  background-image: url("/assets/background-login.be618d39.webp");
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.logoL {
  content: url('/assets/logo-marchantes.7e06e68c.png');
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 200px;
}
.nombreLabelL {
  margin-bottom: 10px;
  text-align: left;
  padding-top: 30px;
}
#nombre-InputL {
  margin-bottom: 20px;
  text-align: left;
}
.emailLabelL {
  margin-top: 20px;
  text-align: left;
}
.emailInputL {
  margin-top: 10px;
  text-align: left;
}
#contraseña-LabelL {
  margin-bottom: 0px;
  text-align: left;
  padding-top: 40px;
}
.contraseñaInputL {
  margin-top: 10px;
  text-align: left;
}
.continuarBtnL {
  min-width: 130px;
  color: #2d2b2b;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0;
  margin-top: 50px;
}
#continuar-GoogleBtnL {
  min-width: 130px;
  color: #2d2b2b;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  box-shadow: 0;
  margin-top: 50px;
}
/*
.logoGoogleL {
  margin-right: 8px;
}
*/
/* Dispositivos móviles pequeños (por ejemplo, iPhone) */
@media only screen and (max-width: 480px) {
  /* Agrega tus estilos específicos para dispositivos móviles pequeños aquí */
}
/* Dispositivos móviles medianos (por ejemplo, tablets) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Agrega tus estilos específicos para dispositivos móviles medianos aquí */
}
/* Dispositivos móviles grandes (por ejemplo, tablets en modo apaisado) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Agrega tus estilos específicos para dispositivos móviles grandes aquí */
}
/* Pantallas pequeñas y dispositivos con resolución baja */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  /* Agrega tus estilos específicos para pantallas pequeñas aquí */
}
/* Pantallas medianas y dispositivos con resolución media */
@media only screen and (min-width: 1367px) and (max-width: 1680px) {
  /* Agrega tus estilos específicos para pantallas medianas aquí */
}
/* Pantallas grandes y dispositivos con resolución alta */
@media only screen and (min-width: 1681px) {
  /* Agrega tus estilos específicos para pantallas grandes aquí */
}
/*********FEED*********/
/* Estilos para la imagen de fondo */
.backgroundImgF {
  background-size: cover; /* Establece el tamaño de la imagen de fondo para cubrir todo el elemento */
  background-position: center; /* Centra la imagen de fondo */
  background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
  opacity: 50%; /* Establece la opacidad al 50% */
  background-image: url("/assets/background-feed.7ad06e13.webp"); /* Establece la imagen de fondo */
  position: fixed; /* Establece la posición fija */
  top: 0; /* Alinea la imagen de fondo en la parte superior */
  left: 0; /* Alinea la imagen de fondo en la parte izquierda */
  z-index: -1; /* Establece la posición z del elemento detrás del contenido principal */
  width: 100%; /* Establece el ancho al 100% */
  height: 100vh; /* Establece la altura al 100% del viewport */
  object-fit: cover; /* Ajusta la imagen de fondo para que cubra todo el elemento */
}
/* Estilos para el contenedor principal */
.containerF {
  max-width: 800px; /* Establece el ancho máximo del contenedor */
  margin: 0 auto; /* Centra el contenedor horizontalmente en la página */
  padding: 20px; /* Agrega un espacio interno de 20px alrededor del contenedor */
}
/* Estilos para el logo */
.logoF {
  content: url('/assets/logo-marchantes-feed.eea961db.png'); /* Establece la imagen del logo */
  display: block; /* Hace que el elemento sea un bloque y ocupe todo el ancho disponible */
  position: relative; /* Establece la posición relativa */
  top: 5px; /* Desplaza el logo 5px hacia abajo */
}
/* Estilos para el contenedor de composición */
.compose-container {
  margin-top: 20px; /* Agrega un margen superior de 20px */
  background-color: #fff; /* Establece el color de fondo blanco */
  border: 1px solid #ccc; /* Establece un borde de 1px sólido de color gris claro */
  padding: 20px; /* Agrega un espacio interno de 20px alrededor del contenedor */
  border-radius: 20px; /* Establece una esquina redondeada de 20px */
}
/* Estilos para el área de texto de la composición */
.compose-text {
  width: 100%; /* Establece el ancho al 100% */
  height: 100px; /* Establece la altura en 100px */
  margin-bottom: 10px; /* Agrega un margen inferior de 10px */
  resize: none; /* Evita que el área de texto sea redimensionable */
  border: none; /* Elimina el borde */
  font-size: 18px; /* Establece el tamaño de fuente en 18px */
  color: #2a2929; /* Establece el color de fuente */
}
/* Estilos para las opciones de la composición */
.compose-options {
  display: flex; /* Hace que los elementos internos se muestren en línea */
  justify-content: space-between; /* Distribuye el espacio disponible de manera uniforme entre los elementos */
}
.compose-option {
  padding: 10px; /* Agrega un espacio interno de 10px alrededor del elemento */
  border: none; /* Elimina el borde */
  background-color: transparent; /* Establece el color de fondo transparente */
  color: #2a2929; /* Establece el color de fuente */
  font-size: 16px; /* Establece el tamaño de fuente en 16px */
  cursor: pointer; /* Cambia el cursor a una mano cuando se pasa por encima del elemento */
}
.compose-send {
  background-color: #628eec; /* Establece el color de fondo */
  color: #fff; /* Establece el color de fuente */
  font-weight: bold; /* Establece el peso de fuente en negrita */
  border-radius: 20px; /* Establece una esquina redondeada de 20px */
  padding: 10px 20px; /* Agrega un espacio interno de 10px en la parte superior e inferior, y 20px en los lados izquierdo y derecho */
  margin-left: auto; /* Mueve el elemento hacia la izquierda todo lo posible */
}
.logout-button {
  background-color: #ff7c7c; /* Establece el color de fondo */
  color: #fff; /* Establece el color de fuente */
  font-weight: bold; /* Establece el peso de fuente en negrita */
  padding: 10px 20px; /* Agrega un espacio interno de 10px en la parte superior e inferior, y 20px en los lados izquierdo y derecho */
  border: none; /* Elimina el borde */
  border-radius: 20px; /* Establece una esquina redondeada de 20px */
  cursor: pointer; /* Cambia el cursor a una mano cuando se pasa por encima del elemento */
  position: absolute; /* Establece la posición absoluta */
  top: 20px; /* Alinea el elemento en la parte superior a 20px del borde superior del elemento padre */
  right: 20px; /* Alinea el elemento en la parte derecha a 20px del borde derecho del elemento padre */
}
/* Estilos de los posts */
#posts-container {
  margin-top: 20px; /* Agrega un margen superior de 20px */
  background-color: #fff; /* Establece el color de fondo blanco */
  border: 1px solid #ccc; /* Establece un borde de 1px sólido de color gris claro */
  padding: 20px; /* Agrega un espacio interno de 20px alrededor del contenedor */
  border-radius: 20px; /* Establece una esquina redondeada de 20px */
}
.post-separator {
  border: none; /* Elimina el borde */
  height: 1px; /* Establece la altura en 1px */
  background-color: #ccc; /* Establece el color de fondo gris claro */
  margin: 30px 0; /* Agrega un margen superior e inferior de 30px y margen izquierdo y derecho de 0 */
}
* {
  font-family: "Poppins", sans-serif;
  font-size: small;
  margin: 0;
  padding: 0;
}
/*
@media (min-width: 768px)  {
  .header-home {
      margin-left: 21%;
      gap: 58px;
  }
  .search {
      width: 200px;
  }
}

@media (min-width: 1200px)  {
  .header-home {
      margin-left: 25.5%;
      gap: 5px;
  }
  .search {
      width: 335px;
      margin-left: 3.6rem;
  }
  .nav-container {
      left: 20.5rem;
      overflow: inherit;
      padding-top: 30px;
  }

  .text-create{
      padding-left: 140px;
  }

  .welcome{
      margin: 20% auto;
  }
}
*/