:root{
    --primary: 	  #C4213E;
    --on-primary: #a01d35;
    --secondary:  #AFBAD0;
    --accent: 	  #162742;
    --background: #FAFAFA;
    --error:      #b4060a;
    --info:       #074364;
    --warn:       #F0D232;
    --success:    #20ab2f;
    --red-gd:     linear-gradient(97deg, rgba(194,33,62,1) 0%, rgba(142,5,29,1) 100%);
    --purple-gd:  linear-gradient(97deg, #A935DF 0%, #4932D3 100%);
}

.background {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(97deg, var(--primary) 0%, var(--on-primary) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    margin-top: auto;
    margin-inline: auto;
    width: 30%;
}



.mainContainer {
    margin-inline: auto;
    margin-bottom: auto;
    background-color: var(--background);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
}

.form-group{
    position: relative;
}

.submitBtn {
    width: 100%;
    background-color: var(--primary);
    color: var(--background);
}

.submitBtn:hover {
    background-color: var(--primary);
    color: var(--background);
}

.title {
    text-align: center;
}

.errorMessage {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
    text-align: center;
}

.successMessage {
    font-weight: 700;
    color: var(--success);
    font-size: 1rem;
    text-align: center;
}

.normalMessage {
    font-weight: 700;
    color: var(--accent);
    font-size: 1rem;
    text-align: center;
}

@media screen and (max-width: 1060px) {
    
    .logo {
        width: 50%;
    }

    .title {
        font-size: 1.8rem;
    }

}

@media screen and (max-width: 812px) {
    
    .logo {
        width: 80%;
    }

    .title {
        font-size: 1.3rem;
    }

}