* {
    margin: 0px;
    padding: 0px;
}

 body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #290052;
}
.titre {
  color: green;
  text-shadow: 2px 2px 4px #000000;
  display: flex;
  justify-content: center;
  font-size: x-large;
  padding-top: 10px;  
}
.nav-list {
   display: flex;
   justify-content: left;
   align-items: center;
   padding-top: 20px;
   padding-left: 20px;
}
.nav-item {
    list-style: none;
    margin-right: 2rem;
}
.nav-item a{
    text-decoration: none;
    color: rgb(233, 233, 233);
    text-shadow: 2px 2px 4px #000000;
}
.nav-item a:hover{
    text-decoration: none;
    color: rgb(0, 255, 98);
    text-shadow: 2px 2px 4px #000000;
}
.container {
    width: 80%;
    margin: auto;
    padding: 25px 0px;
}
.container > a{
    display: flex;
    justify-content: center;
    align-content: center;
}
.container > a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /*grid-auto-rows: 300px;
    grid-auto-flow: dense;*/
}
.horizontal {
    grid-column: span 2;
}
.vertical {
    grid-row: span 2;
}
.big {
    grid-column: span 2;
    grid-row: span 2;
}