@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

:root {
    --black: #2D2D2D;
    --brown: #9D8274;
    --yellow: #FFC375;
    --light-yellow: #F3D7AC;
}

* {
    color: var(--black);
    font-family: Montserrat;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f9f3ea;
    position: relative;
}

#container {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#container h1 {
    text-align: center;
}

#span-elio {
    font-weight: 400;
    font-style: italic;
    font-size: 0.5em;
}

#container>img {
    border-radius: 10px;
    width: 500px;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

input[type="submit"] {
    border: none;
    background-color: var(--brown);
    color: var(--light-yellow) !important;
    padding: 5px 10px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
input[type="email"]{
    border: 2px solid var(--brown);
    border-radius: 5px;
    padding: 5px;
    outline: none;
}
input[type="email"]::placeholder{
    color: var(--black);
    opacity: 0.7;
}
input{
    outline: none;
}
#formulaire-connexion{
    width: 50%;
    margin: auto;
}
#formulaire-connexion > *{
    display: block;
    margin:10px auto;
    text-align: center;
    width: 100%;
    color: var(--black)
}
#formulaire-connexion > label{
    display: inline-block;
    
    margin:auto;
}
input[type="submit"]:hover{
    transform: translateY(-3px);
}
#form-validate{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#form-validate > *{
    display: block;
    margin: 10px
}
#msg-dl{
    font-size: 12px;
    font-weight: 300;
}