@font-face {
 font-family: "Sansation";
 src: url("./Images/Sansation-Regular.ttf") format("truetype"),
    url("./Images/Sansation-Bold.ttf") format("truetype");
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Sansation';
}

.background{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
.topbar{
    height: 40px;
    background-color: #2b9faa;
}

.bottombar{
    height: 40px;
    background-color: #931d1f;
}

.background-content{
    display:grid;
    flex:1;
    grid-template-rows: 1;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;

    position: relative;
}

.filtre-background-content{
    background-color:#2b9faa;
    opacity: 25%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.background-content .img-container {
    width: 100%;
    height: 100%;
}

.background-content .img-container.img-1{
    background-image: url('./Images/vitrerie.jpg');
    background-size: cover;
    background-position: center;
}
.background-content .img-container.img-2{
    background-image: url('./Images/nettoiesol.jpg');
    background-size: cover;
    background-position: center;
}
.background-content .img-container.img-3{
    background-image: url('./Images/grossemachine.jpg');
    background-size: cover;
    background-position: center;
}

.logo-container{
    position: absolute;
    right: 50px;
    top: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: solid 5px white;
    padding: 20px;

    color: white;
    font-size: 3em;
    background-color: #2b9faa; 
}

.separator-bar{
    display: block;
    height: 5px;
    width: 100%;
    background-color: white;
    margin: 20px 0;
}

.logo-container .logo{
    width: 250px;
    height: auto;
}

.minor-logo{
    position: absolute;
    bottom: 20px;
    right: 50px;

    width: 250px;
    height: auto;
}

/* Main Form */ 

.main-form{
    position: absolute;
    margin: auto;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-60%);

}

.form-wrapper{
    width: 450px;
    background-color: rgba(255,255,255,0.8);
    padding: 100px 40px 40px 40px;
    border-radius: 8px;
    display: flex;
    flex-direction:column;

    position: relative;
}
.form-group{
    display:flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-group label{
    margin-bottom: 10px;
    font-size: 1.2em;
}

.form-group input{
    height: 40px;
    border-radius: 8px;
    border: solid 1px black;
    padding-left: 10px;
}

.submit-button{
    margin-top: 20px;
    border-radius: 8px;
    border: none;
    padding: 10px;
    height: 50px;
    background-color: #2b9faa;
    font-size: 1.5em;
    color: white;
}

.login-icon{
    position:absolute;
    height: auto;
    width: 100px;

    margin-left: auto;
    margin-right: auto;

    left: 0;
    right: 0;
    top: -100px;
    
    background-color: #2b9faa;
    padding: 40px;
    border-radius: 100%;

}

#erreur{
    border: solid 2px red;
    border-radius: 8px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    padding: 0 auto;
}

@media screen and (max-width: 1250px) {
    .minor-logo{
        bottom: 20px;
        right: 0;
        left: 0;
        margin: 0;

        width: 150px;
    }

    .logo-container{
        margin: auto;
        top: 10px;

        left: 50%;
        right: 50%;
        width: 200px;
        transform: translateX(-50%) translateY(10px);

        font-size: 1.5em;
    }

    .login-icon{
        display: none;
    }

    .form-wrapper{
        padding: 40px;
    }

    .logo-container .logo{
        width: 150px;
        height: auto;
    }

    .minor-logo{
        margin-right: auto;
        margin-left: auto;

        left: 0;
        right: 0;
    }
}

@media screen and (max-width: 600px){
    .main-form{
        width: 95%;
    }

    .form-wrapper{
        width: auto;
    }
    .form-group input{
        width: 100%;
    }

    .submit-button{
        width: 100%;
    }

    .background-content{
        grid-template-columns: 1fr;
    }

    .img-1, .img-3{
        display: none;
    }

    .logo-container .logo{
        width: 100px;
        height: auto;
    }

    .separator-bar{
        margin: 10px 0;
    }
}