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

body{
    width: 100%;
    height: 100vh;
    background-color: #050505;
    font-family: var(--fuente-plataforma);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-login{
    width: 100%;
    max-width: 1400px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    padding: 40px;
}

/* LOGO */

.logo-container img{
    width: 550px;
}

/* LOGIN */

.login-container{
    width: 420px;
}

.login-container form{
    width: 100%;
}

/* INPUTS */

.input-group{
    width: 100%;

    display: flex;
    align-items: center;

    border-bottom: 2px solid #ffffff;

    margin-bottom: 45px;
    padding-bottom: 12px;
}

.input-group i{
    color: #ffffff;
    font-size: 32px;

    margin-right: 25px;
}

.input-group input{
    width: 100%;

    background: transparent;
    border: none;
    outline: none;

    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
}

.input-group input::placeholder{
    color: #8f8f8f;
}

/* BOTON */

button{
    width: 100%;
    height: 75px;

    background-color: #5f5f5f;

    border: none;

    color: #d9d9d9;
    font-size: 28px;
    letter-spacing: 2px;

    cursor: pointer;

    transition: 0.3s;
}

button:hover{
    background-color: #777777;
}

/* RESPONSIVE */

@media(max-width: 1100px){

    .contenedor-login{
        flex-direction: column;
        gap: 80px;
    }

    .logo-container img{
        width: 400px;
    }
}

@media(max-width: 600px){

    .logo-container img{
        width: 280px;
    }

    .login-container{
        width: 100%;
    }

    .input-group input{
        font-size: 18px;
    }

    button{
        height: 65px;
        font-size: 22px;
    }
}