:root{  
    --bg-color-one: #f5e5da;
    --bg-color-two: #f9f0e8;
    --font-color: #2F241B;
    --button-bg-color: #2F241B;
    --section-height: 60vh;
    --border-color: white;
    --bigger-text-size: 10vw;
    --big-text-size: 6vw;
    --avg-text-size: 4vw;
    --logo-size: 3rem;
    --border-width: 1px;

    /*responsive : petites tailles de pilice*/
    --small-screen-avg-font-size : 3vw;
    --small-screen-big-font-size : 7vw;
    --small-screen-bigger-font-size : 8vw;
    --small-screen-small-font-size : 2vw;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Force le site à prendre toute la hauteur de l'écran */
    margin: 0;
    text-align: center;
}

/*
@media (max-width:470px) and (min-height:900px){
    footer{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
    }
}
    */

main{
    flex: 1; /* Cette ligne magique pousse le footer tout en bas */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:470px){
    .password-container{
        margin-top: 1rem;;
    }
}



.intro p{
    font-size: var(--big-text-size);
    text-decoration: underline 2px;
}

#submit{
    background: var(--button-bg-color);
    border: none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-size: var(--avg-text-size);
    color: var(--bg-color-one);
    width: 80%;
    margin: auto;
    text-align: left;
    padding: 4.5vw 1vw 4.5vw;
    font-family: inherit;
    text-align:center;
    
}

input{
    font-family: inherit;
}

.message{
    font-size: var(--big-text-size);
}

#password{
	color: var(--font-color);
	background: var(--bg-color-one);
	align-self: center;
	width: 80%;
	font-size: 1.5em;
	text-align: center;
	border: solid 1px;
	border-top: none;
	outline: none;
	border-left: none;
	border-right: none;
	margin-bottom: 2px;
}

.password-container{
    display:flex;
    flex-direction:column;
    border:0;
}

.intro{
    text-align: center;
}

.error{
    text-align: center;
    color:red;
}



img{
    width:100%;
    height:auto;
}