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

:root {
   --azul: #1f286d;
   --negro: #202428;
   --gris: #4d5760;
   --blanco: #fff;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: var(--azul);
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   font-size: 14px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#particles-js {
   width: 100%;
   height: 100vh;
   position: absolute;
   display: flex; /* Centrar las particulas para no crear un scroll en firefox */
   justify-content: center;
}

.login-card {
   width: 360px;
   height: auto;
   text-align: center;
   background-color: rgba(239, 240, 241, 0.600);
   box-shadow: 0px 0px 41px 0px rgba(0, 0, 0, 0.5);
   border-radius: 10px;
}

.login-card-logo {
   margin-top: 50px;
   padding-bottom: 50px;
}

.form {
   position: relative;
   background-color: var(--blanco);
   padding: 50px;
   text-align: center;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   border-radius: 10px;
}

.form input {
   background-color: var(--blanco);
   outline: 0;
   width: 100%;
   height: 50px;
   border: 1px solid var(--negro);
   box-sizing: border-box;
   text-align: center;
   border-radius: 10px;
   color: var(--negro);
}

.input-username {
   margin-bottom: 10px;
}

.form input::placeholder {
   opacity: 1; /* Con este atributo el estilo del placeholder funciona totalmente igual en firefox y chromium */
   color: var(--gris);
}

.container-input i {
   position: absolute;
}

.icon-input {
   padding-top: 20px;
   padding-left: 20px;
   color: var(--negro);
}

.form button {
   font-weight: 700;
   text-transform: uppercase;
   outline: 0;
   border: 0;
   background-color: var(--azul);
   width: 100%;
   height: 50px;
   margin-top: 25px;
   color: var(--blanco);
   transition-duration: 0.3s;
   cursor: pointer;
   border-radius: 10px;
}

.form button:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.questions {
   margin-top: 25px;
   margin-bottom: 0px;
   color: var(--gris);
   text-decoration: none;
}

.form a {
   text-decoration: none;
   font-weight: 700;
   color: var(--azul);
}

.help {
   cursor: pointer;
}

.risks-building {
   margin-top: 25px;
   margin-bottom: 0;
   width: 100%;
}