@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700&display=swap");
@import url(../client/css/variables.css);


body {
    background-color: var(--clr-mediumgrey);
    color: var(--clr-white);
    font-family: var(--ff-sans);
}

.backoffice__button{
    font-weight: bold;
    background-color: var(--clr-yellow);
    color: var(--clr-navblack);
    border: solid 1px var(--clr-yellow);
    transition: 0.5s;
}

.backoffice__button:hover{
    background-color: var(--clr-navblack);
    color: var(--clr-yellow);
    border: solid 1px var(--clr-yellow);
    transition: 0.5s;
}

.backoffice__button:active{
    transform: scale(0.95);
    transition: 0.2s;
}

.backoffice__bigtitre{
    width:30rem;
    margin-top: 4rem;
    text-align: center;
}

.backoffice__back{
    font-size: 3rem;
    color: var(--clr-yellow);
}


.backoffice{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.backoffice__choisir{
    margin-bottom: 0;
    
}

.backoffice__titre{
    color: var(--clr-white);
}

.backoffice__select{
    background-color: var(--clr-darkgrey);
    color: var(--clr-white);
    border-radius: 0.7rem;
}

.backoffice__select{
    padding-inline: .5rem;
}

form {
    width:30rem;
    margin-top: 3em;
    display: flex;
    flex-direction: column;
}

form select {
    background-color: var(--clr-darkgrey);
    color: var(--clr-white);
}

form input, select {
    margin-top: 1rem;
    font-size: medium;
    border-style: none;
    display: inline-block;
    height: 2rem;
}


form h3 {
    border-bottom-style: solid ;
    border-color: var(--clr-yellow);
    border-width: 1px;
    height: 1.5em;

}

.profil{
    background-color: var(--clr-darkgrey);
}