h1 {
   font-family: "Lucida Handwriting", cursive;
   }
body {
      background-color: #090979;
      font-family: biome, sans-serif;
      
}
#back_color {
             background-color: #c3bcbf
            }
.species_name {
              color: white;
              font-size: large;
              background-color: #e31083;
              }
#wrapper {
         
          background: rgb(131,58,180);
          background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
          border-radius: 23px;
          padding-top: 10px;
          padding-bottom: 10px;
          margin-bottom: 30px;
         }
nav {
    
    background-color: #cccccc; 
    border-radius: 5px;
    margin: 5px 20px 10px 30px;
    padding: 5px 30px 5px 0px;
    }
nav a {
      text-decoration: none;
      
      }
nav a:link {
           color: white;
           font-weight: bold;
           }
nav a:visited {
              color: #90EE90;
               }
nav a:hover {
            font-size: 20px;
            
            }
nav li {
   margin-top: 5px;
   background-color: #008000;
   padding: 10px 10px 10px 10px;
   border-radius: 10px;
   text-align: center;
   list-style-type: none;
   }
main {
     
     margin-right: 30px;
     letter-spacing: 2px;
    margin-left: 20px;
   
     
     }
.logo {
      background-color: #cccccc;
      border: 5px;
      border-radius: 5px;
      padding: 30px 15px 10px 15px;
      margin: 20px 20px 20px 30px;
      text-align: center;
      }
h2 {
   margin-left: 30px;
   color: white;
   }

main img {
         background-color: #cccccc;
         border: 15px solid #cccccc;
         border-radius: 15px;
       }
#gallery {
         
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-around;
         padding-left: 0;
         
}
#grid { display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
      
}

#gallery2 {
           list-style-type: none;
           display: grid;
           grid-template-columns: 220px 220px 220px;
           grid-template-rows: 170px 170px;
           gap: 1em;
           padding-left: 0;
           
}
#wrapper1 {
          width: 1050px;
          margin: auto;
          background: rgb(131,58,180);
          background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
          border-radius: 23px;
          padding-top: 10px;
          padding-bottom: 10px;
          margin-bottom: 30px;
         }
.logo1 {
       text-align: left;
       background-color: #cccccc;
       border-radius: 10px;
       padding: 20px 10px 5px 30px;
       margin-right: 480px;
       margin-left: 30px;
}
.nav {
     margin-bottom: 250px;
} 
footer {
       
       margin-left: 30px;
       color: white;
       }

@media (max-width: 700px) {
        header img { max-width: 100%;
                     height: auto;
                   }
}
@media (min-width: 700px) and (max-width: 999px) {
      #flex { display: flex;
              flex-wrap: wrap;
              }
      nav { flex: 2;
            height: auto;
            margin-bottom: 600px;
            
           }
      main {flex: 4;
            margin-left: 5px;
            
           }       
} 
@media (min-width: 1000px) {
         #wrapper {
                   width: 1000px;
                   margin: auto; 
                  }
          #flex { display: flex;
              }
           nav { flex: 2;
                margin-bottom: 500px;
           }
            main {flex: 4;
            margin-left: 5px;
            
           }       
           
}