body { 
       background-color: #153d03;
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       border-radius: 20px;
}
h1 {
       background-color: #fad180f4;
       font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
       text-align: center;
       border: 6px solid #153d03;
       border-radius: 20px;
       padding: 10px 10px 5px 10px;
}
h1 img {
       max-width: 100%;
       height: auto;
}
nav ul {
       width: 250px;
       list-style-type: none;
       padding: 0;
}
nav ul li {
       background-color: #fad180f4;
       text-align: center;
       border: 2px solid #153d03;
       border-radius: 10px;
       margin: 5px;
       padding: 5px;
}
a:link {
       color: #153d03;
}
a:visited {
       color: #42359c;
}
a:hover {
       color: #a97402;
       font-size: 15px;
       font-weight: bold;
}
a:active {
       color: #153d03;
}
#wrapper {
       background-image: linear-gradient(to bottom, #d0ecc3, #8dd46c);
       border-radius: 20px;
       padding: 10px;
}
#flexbox_species {
       display: flex;
	flex-wrap: wrap; 
	flex-direction: row;
	align-items: center;
       justify-content: space-between;
	row-gap: 5px;
	column-gap: 5px;
}
#flexbox_species ul {
       list-style-type: none;
       padding: 0;
}
#flexbox_species li img {
       background-color: #153d03;
       border: 6px solid #153d03;
       list-style-type: none;
       margin-left: 5px;
}
#grid_species {
       display: grid;
	grid-template-rows: 50% 50%;
	grid-template-columns: 33% 33% 34%;
	column-gap: 2px;
	row-gap: 10px;
       margin-right: 5px;
       padding: 0;
}
#grid_species ul {
       list-style-type: none;
       padding: 0;
}
#grid_species ul li img {
       border: 6px solid #153d03;
       margin-left: 5px;
}
#grid_nav {
       display: grid;
       grid-template-columns: 295px 700px;
}
#combine { 
       background-color: #075b06;
       color: white;
}
@media (min-width: 700px) {
       body { 
              width: 680px;
              margin-left: auto;
              margin-right: auto;
              margin-top: 0;
              margin-bottom: 0;
       }
       nav {
              flex: 2;
              padding: 5px;
       }
       nav ul {
              width: auto;
       }
       main {
              flex: 8;
              padding: 10px;
       }
       main ul {
              list-style-type: none;
       }
       #flex_nav {
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
       }
}
@media (min-width: 1000px) {
       body { 
              background-color: #153d03;
              font-family: Verdana, Geneva, Tahoma, sans-serif;
              width: 1000px;
              margin-left: auto;
              margin-right: auto;
              margin-top: 0;
              margin-bottom: 0;
       }
       nav {
              flex: 3;
              padding: 5px;
       }
       main {
              flex: 7;
              padding: 10px;

       }
       main ul {
              list-style-type: none;
       }
       #flex_nav {
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;

       }
}