html {
    background-color: rgb(104, 105, 99)
    ;
    background-image: url('fond.png');

}
body {
    margin:0;
 }
 
.head {
    display: flex;
    text-align: center;
    background: radial-gradient(circle at 18.7% 37.8%, rgb(61, 84, 103) 0%,rgb(37, 52, 64)
    90%);
    padding: 5px;
    color: whitesmoke;
    grid-template-columns: 500px 1fr ;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.logo{
    text-align: end;
}


.form {
    text-align: center;
    background: radial-gradient(circle at 18.7% 37.8%, rgb(213, 185, 66) 0%,rgb(162, 142, 53)90%);
            border-radius: 5%;
    padding-left: 30px;
    padding-right: 30px;
}

.contenu{
   align-content: center;
   display: grid;
   padding-top: 60px;
   gap: 20px;
   padding-right: 20px;
   padding-left: 20px;
   padding-bottom: 60px;
   height: auto;
   border: dashed white 5px;
   grid-template-columns: 1fr 1fr;
}

.footer {
display: grid;
padding: 5px;
background: radial-gradient(circle at 18.7% 37.8%, rgb(61, 84, 103) 0%,rgb(37, 52, 64));
grid-template-columns: 1fr 1fr ;
color: white;
}
.nom{
    text-align: end;
    padding-right: 20px;
}
.Classe{text-align: start;
    padding-left: 20px;}

.void  {
    padding-top: 170px;
    padding-bottom: 55px;
}
.void2  {
    padding-top: 160px;
    }

.page {
display: grid;
gap: 20px;
}

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
  }


  .info {
    text-align: center;
    background: radial-gradient(circle at 18.7% 37.8%, rgb(213, 185, 66) 0%,rgb(162, 142, 53)90%);
    border-radius: 5%;
    text-align: justify;
    padding-right: 5px;
   padding-left: 5px;
  }
p{
    padding-left: 20px;
    padding-right: 20px;
}
.MLV{
    width: 60px;
    height: 60px;
}