body {

    height:100vh;
    width: 100%;
    background: url(../img/feu_artifice_ruelle.jpg) no-repeat center/cover;

}

main {

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
	width: 32%;
    min-width:320px;
	height: 600px;
	background: transparent;
	border-radius: 10px;
	box-shadow: 5px 20px 50px #000;

}

form {

    position:relative;
    top:50px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;

}

form h1 {

    font-size:2rem;
    margin-bottom:35px;
    color:var(--color-white);
    letter-spacing: 1.5px;
    text-decoration: underline;

}

form label {

    color:var(--color-white);
    margin-bottom:15px;

}

form input {

    width:75%;
    padding:10px;
    outline:none;
    border:none;
    margin-bottom:30px;
    border-radius:5px;

}

form input[type=submit] {

    font-size:1.2rem;
    background-color:var(--color-violet);
    color:var(--color-white);
    box-shadow: 0 6px #2f204c;
    cursor: pointer;
    position: relative; 

}

form input[type=submit]:hover {

    box-shadow: 0 4px #2f204c;
    top: 2px;

  } 
  
form input[type=submit]:active {

    box-shadow: 0 0 #2f204c;
    top: 6px;

}

.message-forgot-password {

    margin-bottom:40px;

}

.message-forgot-password h2 {

    color:var(--color-white);
    font-size:2rem;
    text-align:center;
    font-weight: bold;
    margin-bottom:30px;

}

p.statut-forgot-password {

    color:var(--color-white);
    font-size:1.2rem;
    text-align:center;
    font-weight: bold;
    margin-bottom:30px;
    
}

.home_return {

    width:100%;
    position:absolute;
    bottom:10px;
    text-align: center;

}

.home_return a {

    color:var(--color-white);
    text-decoration: none;

}

.home_return a:hover {

    color:var(--color-white);
    text-decoration: underline;

}