style.css

body{
    max-width: 90%;
    margin: auto;
    background-image:radial-gradient(rgb(237, 22, 210), rgb(118, 182, 246));
    background-repeat: no-repeat;
    background-position: cover ;
}


p{
    font-family: serif;
    line-height: 20px;
    color: #2e1010;
    font-size: 20px;
}

header :first-child {
    font-weight : bold;
  }

.nav1{
    background-color: yellow;
}

a.nav{
    text-decoration: none;
    border-image: linear-gradient(rgb(237, 22, 210), rgb(118, 182, 246)) 20/20px;
    color: #fff;
    padding: 5px;
    margin: 5px;
 
}

a.nav:hover{
    border-image: linear-gradient(rgb(118, 182, 246),rgb(237, 22, 210)) 20/20px;
}

a.nav:visited{
    color: rgb(41, 207, 219);
}

q{
    max-width: 50%;
    font-size: 20px;
    font-style: italic;
    display: block;
    margin: auto;
    font-size: 1.6em;
    line-height: 30px;
    background-color: rgb(219, 213, 213);
    padding-left: 30px;
    margin-bottom: 80px;
    margin-top: 80px;
}

q.fermier{
    border-left: 3px solid rgb(212, 30, 30);
}

q.villageois{
    border-left: 3px solid rgb(60, 52, 170);
}

q:before {
    content: "";
    
  }
  
  q:after {
    content: "";
  }

  .bien{
    text-transform: uppercase;
    color: green;
  }

  .mal{
    text-transform: uppercase;
    color: red;
  }

  table{
    border-collapse: separate;
  }
  tr:nth-child(even) {
    background: #CCC
  }

  tr:nth-child(odd) {
    background: #fff
  }

  ul :nth-child(1){
      list-style-image: url(img/bien.png);
    
  }

  ul :nth-child(2){
      list-style-image: url(img/mal.png);
  }

  ul :nth-child(3){
    background-image: url(img/chat.png);
    background-repeat: no-repeat;
  }

  img{
      float: left;
      margin: 15px;
      width: 75%;
      padding: 15px;
  }

  #clear{
      clear: none;
  }