@import url("cssGeneral.css");

body {
    height: 100vh;
    background: linear-gradient(70deg, var(--color-dark-blue ), var(--color-light-blue));  
    overflow: hidden;
}
  
.logoconnexion {
    margin: 0 auto;
    margin-bottom: 2vh;
}

.logoconnexion img {
    width: 15vh;
    height: 15vh;
}

.container{
    width: 25%;
    height: 60vh;
    margin:10% auto;
    border-radius: 1.3vw;
    background-color: var(--color-dark-white);
    box-shadow: 0.8vh 1vh 1vh var(--color-dark-grey);
    text-align: center;
    padding: 3vh;
}

.main{
    text-align: center;
    margin-top: 6vh;
}

.main input {
    transition: all 0.2s ease-in-out;
    font-size: 2vw;
    color: var(--color-light-grey);
    background-color: var(--color-dark-white);
    width: 70%; 
    height: 100%;
    padding: 2%;
    margin-bottom: 2vh;
    border:0px;
    outline: none;
    border-bottom: 0.3vh solid var(--color-light-grey);
}

.main button{
    transition: all 0.2s ease-in-out;
    font-size: 3vw;
    width: 80%; 
    margin-top: 3vh;
    text-align: center;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    border: 0.2vh solid var(--color-dark-grey);
    border-radius: 1.3vw;
}

.main button:hover{
    background:  var(--color-blue);
    color:white;
    border :2px solid   var(--color-blue);
}

.main input:hover{
    border-bottom: 0.3vh solid var(--color-dark-grey);
    color:var(--color-dark-grey);
    
}