:root{
    --button-default-color: #DB4444;
}

.form-container{
    display: flex;
    justify-content: space-between;
    width: 70%;
    align-items: center;    
}
.form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 20px;
}
.form-login{
    gap: 10px;
    display: grid;
}
.form input{ 
    color: black;
    font-size: 1.3rem;
    width: 100%;
}
.btn-group{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}
.btn-group a{
    color: var(--button-default-color);
}
.submit{
    padding: 16px;
    font-size: 1.3rem;
    background-color: var(--button-default-color);
    color: white;
    border-radius: 10px;
    border: none;
}
img{
    max-width: 100%;
}
.error{
    color: #e42626dc;
    font-size: 0.9rem;
    width: 100%;
    display: inline;
}
.field{
    display: flex;
    width: 300px;
    flex-wrap: wrap;
}
.input-group{
    display: flex;
    border-bottom: 1px solid grey;
    padding: 10px 0px;
}
button[type="button"]{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid grey;
    border-radius: 5px;
}
@media(max-width: 716px){
    .img-wrap{
        /* display: none; */
    }
}

@media screen and (width <= 1600px) {
    .form-container{
        width: 90%;
    }
}
@media screen and (width <= 1100px) {
    .form-container{
        width: 100%;
    }
}