* {
    margin: 0;
  }
  body {
    font-family: 'Fira Sans', sans-serif;
    font-size:1em;
    color:#1f5014;
    background-color: #f6f6e9;
  }
  section {
    padding:50px 45px 50px 45px;
  }
  .test {
    background-color:#f6f6e9 ;
  }
  
  a {
    color: #1f5014;
    font-size:1.3em;
    text-decoration: none;
  }
  h1 {
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 3.5em;
    color:#cbddd1;
    background-color: #1f5014;
    padding:15px 0 20px 0;  
  }
  .nature {
    font-size: 0.7em;
  }
  p {
    padding: 0 0 5% 0;
  }
  .source {
    font-size:0.5em;
    font-style: italic;
    padding:0;
    text-align:center;
  }
  
  h2 {
    text-align:center;
    font-family: 'Fira Sans', sans-serif;
    font-size:3em;
    padding: 50px 0 15px 0;
  }
  .four p {
    padding: 0 0 15% 0;
  }
  
  .bouton_menu {
    display:inline-block;
    text-align: center;
    background-color: #cbddd1;
    border-radius: 50px;
    padding: 10px 20px;
  }
  #current {
    background-color:#1f5014;
    color:#cbddd1
  }
  
  .bouton_menu:hover {
    background-color:#1f5014;
    text-decoration: none;
    color:#cbddd1;
  }
  
  footer {
    padding: 20px 50px;
    background-color: #1f5014;
  }
  
  a:hover {
      text-decoration: underline;
    }
  
  header nav {
    background-color: #cbddd1;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items:center;
    gap:5%;
  }
  
  .fiche_espece_part1 {
    padding:50px 7% 30px 7%;
    display: grid;
    grid-template-columns: 11fr 2fr;
    /*grid-template-rows: 500px 500px;*/
    /*align-self:auto;*/
    column-gap:5%;
  }
  
    .photo_espece {
      width: 100%;
      height:580px;
      display:block;
      margin:auto;
      object-fit: cover;
    }
  
    .three {
      text-align:justify;
      padding: 0 60px 0 20px;
    }
  
    .four {
      text-align: center;
      display:inline-block;
      background: #1f5014;
      color:#f6f6e9;
      border-radius: 50px;
      height:535px;
      width:220px;
      padding:5px 5px 5px 5px;
      align-self: center;
      justify-self: center;
  
    }
    
  
    @media screen and (max-width: 800px) {
      /* Insérez vos propriétés CSS ici, avec vos sélecteurs*/
    
      h1 {
        font-size:2.5em;
        padding:10px 0 15px 0; 
      }
      h2 {
        font-size:1.5em;
        padding: 20px 0 10px 0;
      }
      header nav {
        gap:0%;
      }
      a {
        font-size: 0.65em;
      }
      section {
        padding:20px 7% 20px 7%;
      }
      footer {
        padding: 10px 50px;
        background-color: #1f5014;
      }
      .fiche_espece_part1 {
        display:grid;
        grid-template-columns: 1fr;
        padding:50px 0% 30px 0%;
        flex-direction: column-reverse;
      }
      .three {
        text-align:justify;
        padding: 7% 7% 0 7%;
        order:2;
      }
      .four {
        order:1;
        
      }
      .photo_espece {
        height:225px;
    
    }
  }