body {
    height: auto;
    width: auto;
    margin: 0%;
    background: linear-gradient(to top left ,lightblue,2%,beige,20%,white);
    font-family: Arial;
    
}
form {
    padding: 1%;
    text-align: center;
    align-self: center;
}
.planning td {
    text-align: center;
    align-self: center;
    background-color: beige;
    padding: 4px;
}
.planning {
    width: auto;
    background-color:cadetblue;
    margin: 10px;
    padding: 10px;
    color: black;
    border: 2px solid white;
    
}
.planningDiv {
    color: black;
    width: 100%;
    align-items: center;
}
.planning th {
    font: bold;
    border: 1px solid black;
    border-bottom: 2px solid black;
    background-color: deepskyblue;
    padding: 4px;

}

main {
    background-color: powderblue;
    display: flex;
    flex-direction: column;
    padding-right: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
}

li {
    display: block;
    padding-right: 30px;
}
.logo{
    padding: 10px;
    height: 90px;
    width: auto;
}

.logolink {
    text-decoration: none;
}
.logolink {
    color: black;
    text-decoration: none;
}
#entete {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    background: linear-gradient(to bottom right ,lightblue,15%,beige,60%,white);
    
    top: 0px;
    padding: 1%;
    width: auto;
    height: auto;

}



.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}



.menu {
    display: none;
    flex-basis: 100%;
    justify-content: center;
    text-align: center;

}

.menuToggle {
    font-size: 1.2em;
}
.menuCheckbox{
    opacity: 0;
    position: absolute;
    top: -5000px;
}

.menuCheckbox:checked ~ .menu {
    display: block;
  
}

.menu li a {
    display: inline-block;
    padding: .5em;
    font-size: 1.1em;
    color: darkblue;
    text-decoration: none;
}

.menu li a:hover {
    color:cadetblue;
    justify-content: center;
}


.presentation{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
    
}

.btnMenu {
    background-color:beige;
    height: 80px;
    width: 300;
    padding-top: 5%;
    
    margin: 7px;
    border-radius: 25px;
    border: solid darkblue 0.1em;
    
}

.btnMenu:hover {
    background-color:aliceblue;
    transform: scale(1.03);
}

.btnProfil {
    background-color:beige;
    height: 80px;
    width: 300;
    
    border-radius: 25px;
    border: solid darkblue 0.1em;
    justify-self: center;
}

.btnProfil:hover {
    background-color:aliceblue;
    transform: scale(1.03);
}

.btnMdpOublie {
    background-color:beige;
    height: 48px;
    width: 200;
    
    border-radius: 25px;
    border: solid darkblue 0.1em;
    justify-self: center;
}

.btnMdpOublie:hover {
    background-color:aliceblue;
    transform: scale(1.03);
}

.btnMenuPointer {
    background-color:#C6FFC1;
    height: 80px;
    width: 300;
    padding-top: 5%;
    margin: 7px;
    border-radius: 25px;
    border: solid darkblue 0.1em;
}

.btnMenuPointer:hover {
    background-color:aliceblue;
    transform: scale(1.03);
}

.btnMenuDeco {
    background-color:#FFAEC0;
    height: 80px;
    width: 300;
    padding-top: 5%;
    margin: 7px;
    border-radius: 25px;
    border: solid darkblue 0.1em;
}

.btnMenuDeco:hover {
    background-color:aliceblue;
    transform: scale(1.03);
}

.linkMenu{
    color: black;
    text-decoration: none;
    align-self: center;
    text-align: center;
    vertical-align: middle;
}

.linkConnexion:hover{
    color: black;
    text-decoration: none;
}

.vueEnsemble {
    font-size: 12px;
    text-align: center;
    width: 100%;
    height: auto;
    background-color: black;
}

.big{
    display: none;
    
}

.barjeColor {
    display: flex;
    margin-top: 0%;
    width: 100%;
    height: 10px;
}
.jauneBarje {
    background-color: rgb(255,222,50);
    width: 40px;
    flex-grow: 20;
}
.roseBarje {
    background-color: rgb(213,93,161);
    width: 40px;
    flex-grow: 20;

}
.violetBarje {
    background-color:  rgb(169,43,156);
    width: 40px;
    flex-grow: 1;
}
.orangeBarje {
    width: 40px;
    background-color:  rgb(255,112,0);
    flex-grow: 2;

}
.vertPaleBarje {
    width: 40px;
    background-color: rgb(185,225,180);
    flex-grow: 20;
}
.bleuPaleBarje {
    width: 40px;
    background-color: rgb(210,238,228);
    flex-grow: 20;
}

.deconnexion {
    margin-top:  250px;
}

@media screen and (min-width: 800px)
    {
        .menuToggle, .menuCheckbox {
            display: none;
        }

        .menu {
            display: block;
            flex-basis: auto;
        }

        .menu li {
            display: inline-block;
        }
        .navigation{
            flex-direction: column;
            align-items: flex-start;
            flex-wrap: wrap;
        }
       
        .menu li a {
            display: inline-block;
            padding: 0;
            padding-left: 5px;
            font-size: 1.1em;

        }
        .presentation{
            flex-direction: row;
            width: 70%;
            margin-right: 25%;
            margin-left: 15%;
            
        }
        
        
        .btnMenu {
            background-color:beige;
            height: 70px;
            width: 370px;
            padding-top: 2%;


        }

        .btnMenu:hover {
            background-color:aliceblue;
            transform: scale(1.03);
        }
        
        .btnMenuDeco {
            height: 70px;
            width: 370px;
            padding-top: 2%;

        }

        .btnMenuDeco:hover {
            background-color:aliceblue;
            transform: scale(1.03);
        }
        .btnMenuPointer {
            height: 70px;
            width: 370px;
            padding-top: 2%;



        }

        .btnMenuPointer:hover {
            background-color:aliceblue;
            transform: scale(1.03);
        }
        
        .alignButtons {
            display: flex;
            flex-direction: row;
            
        }
        .big{
            display: block;
        }
}
@media screen and (max-width: 400px){
    .additional {
            display: none;
        }
    .planning {
        font-size: 15px;
        margin: 0px;
        padding: 0px;
    }
    form {
        font-size: 17px;
    }
    
    .buttonPointage {
        width: 200px;
        height: 50px;
    }
    select {
        font-size:14px;
    }
    .bigTable{
        display: none;
    }
}

select option[disabled] {
    display: none;
}