@import url(https://images.unsplash.com/photo-1556290160-d006087340ac?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);

body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Asegura que el body ocupe el 100% de la altura de la ventana */
    background: url(./images/fondo.png) no-repeat;
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
}

.login-form {
    width: 390px;
}
@font-face {
  font-family: 'Chopic';  /* El nombre que usarás para referenciar la fuente */
  src: url('../fonts/Chopic.ttf') format('woff');  /* Ruta al archivo WOFF de la fuente */
  font-weight: normal;
  font-style: normal;
  
}

.login-form{width:390px;}
.login-title{
    color:bisque;
    font-size: 150px;
    font-weight: 800;
    letter-spacing: -10px;
    margin-bottom: 0;
    font-family: 'Arial rounded MT';
}
.login-userinput{margin-bottom: 0px;}
.login-button{margin-top:10px;}
.login-options{margin-bottom:0px;}
.login-forgot{float: right;}
/* Agrega esto a tu archivo CSS existente o crea uno nuevo */

/* Estilos predeterminados para pantallas más grandes */
body {
  font-family: 'Montserrat', sans-serif;
}

.booking-form {
  padding: 40px;
  border-radius: 10px;
  position: relative;
}

.logo-container {
  text-align: center;
  margin-bottom: 50px;
}

.login-title {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.imagen {
  display: block;
  margin: 0 auto;
  width: 200px;
}

.form-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.centered-input {
    text-align: center; /* Centrar el texto horizontalmente */
    padding: 0; /* Eliminar padding por defecto */
    height: 50px; /* Asegurar una altura adecuada para el centrado vertical */
    line-height: 50px; /* Line-height igual a la altura para centrar verticalmente */
    font-size: 16px; /* Ajustar el tamaño de la fuente según sea necesario */
}
.responsive-br {
  display: block;
}

/* Ajustes para pantallas más pequeñas usando media queries */
@media (max-width: 768px) {
  .col-md-4 {
      width: 100%;
      text-align: center;
  }

  .form-btn {
      position: static;
  }

  .login-title {
      font-size: 100px;
  }

  .booking-form {
      padding: 20px;
  }
  .centered-input {
        font-size: 5vw; /* Tamaño del texto del input en dispositivos móviles */
    }

  .imagen {
      margin-top: px; /* Ajusta el margen superior de la imagen */
  }

  h8 {
      width: auto;
      margin-top: 0px; /* Ajusta el margen superior del primer h8 */
  }
  .responsive-br {
    display: none;
  }
}
    /* colors */
    .svgContainer {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 auto 0em;
      border-radius: 10%;
      pointer-events: none;
    }

    .mySVG {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #showPasswordToggle {
      display: block;
      padding: 0 0 0 1.45em;
      position: relative;
      top: 0.25em;
      right: 0;
      font-size: 1em;
    }
    #reno {
    position: absolute;    /* Posiciona la imagen de forma absoluta en la página */
    width: 50px;           /* Ajusta el tamaño de la imagen (puedes cambiar el valor) */
    height: auto;          /* Mantiene la proporción original */
    top: 184px;             /* Desplaza la imagen 50px desde la parte superior de la página (puedes ajustar este valor) */
    left: 49.5%;             /* Centra la imagen horizontalmente en la página */
    transform: translateX(-50%); /* Ajusta el desplazamiento horizontal para que quede centrada */
    z-index: 9999;         /* Asegura que la imagen quede por encima de otros elementos */
    }
    #reno1 {
      position: absolute;
      width: 300px;
      height: auto;
      top: 50px;  /* Puedes ajustar esta propiedad para posicionarlo donde quieras */
      left: 0;    /* Empieza desde la izquierda */
      z-index: 9999; /* Se asegura de que la imagen esté por encima de otros elementos */
      transform-origin: center; /* Hace que la imagen gire en el centro */
      transition: transform 0.2s ease-in-out; /* Suaviza la rotación */
  }
  
  
  /* Estilos generales para la página */
  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
  }
  
  #content {
      margin-top: 100px;
      text-align: center;
      padding: 20px;
  }
  
  button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
  }
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;  /* Asegura que el efecto de nieve esté por encima de otros elementos */
    pointer-events: none;  /* Evita que las partículas bloqueen la interacción con otros elementos */
  }