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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  color: black;
}
a{
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}

body{
    width: 100vw;
    height: 100vh;
    background-color: aqua;
    display: flex;
    flex-direction: column;
    background-image: url('../img/img_prueba_index.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h1,h2{
    text-align: center;
}
h2{
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.container-login {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* logo */
.login{
    display: flex;
    width: 80%;
    max-width: 80%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(25px);
    border-radius: 10px; 
    border: 2px solid black;
}
.login-main{
    width: 100%;
    max-width: 100%;
    display: flex;  
    flex-direction: column;
    padding: 1rem;

    .form-login{
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;       
        gap: 5px; 
    }
}

.items-login{
    display: flex;
    align-items: center;
}
.input-login{
    width: 100%;
    padding: 2px;
    border-radius: 20px;
    font-size: clamp(1rem, 2vw, 1.5rem);
    padding-inline: 10px 5px;
}

.btn-login{
    border-radius: 7px;
    border: none;
    background-color: #4CAF50;
    padding: 10px 10px;
    width: 70%;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.btn-login:hover{
    background-color: #45a049;
    cursor: pointer;
}

.label-login{
    font-size: clamp(1rem, 2vw, 1.5rem);
}
i{
    font-size: clamp(1rem, 2vw, 1.5rem);
}

p{
    text-align: center;
}
#login-success {
    color: green;
}
#login-error {
    color: red;
}
@media ( width >= 1024px) {
    .login{
        width: 40%;
        height: 60%;
        padding: 1rem;
    }
    .login-main{
        gap: 20px;
        .form-login{
            gap: 15px;
        }
    }
    
    .btn-login{
        width: 50%;
    }

    footer p{
        color: white;
    }
}