*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
  
 body{
    font-family: sans-serif;
    min-height: 100%;
    color: #555;
 }
  
 /* NAVIGATION RULES --------------------  */
 nav{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-column-gap: 30px;
    grid-template-rows: 70px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
 }
  
 nav .brand{
    font-size: 28px;
    font-weight: 900;
    color: #245990;
 }
  
 nav a{
    text-decoration: none;
    display: inline-block;
    padding: 10px 35px;
    transition: background-color 0.3s, color 0.3s;
    color: #245990;
    font-size: 18px;
 }
  
 nav a:hover,
 nav a.active{
    background: #4d9176;
    color: #fff;
    border-radius: 3px;
 }
 nav a:active{
    background-color: red;
 }
  
 /* HEADER RULES ------------------ */
 header{
    padding: 40px 20px;
 /*	background-color: #f4f4f4;*/
    border-bottom: thin solid #d4d4d4;
 }
 /* header h1{} */
 header .sub-name{
    margin-top: 20px;
    line-height: 28px;
    font-size: 20px;
 }
  
 /* MAIN SECTION ------------------ */
 main{
    padding: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
 }
 main .left{
    border-right: thin solid #d4d4d4;
    padding-right: 20px;
 }
 main .section-name{
    font-size: 22px;
    margin-bottom: 30px;
 }
 main .left a{
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 18px;
    margin-bottom: 10px;
 }
 main .left a:hover{
    text-decoration: underline;
 }
  
 /* main .right{} */
 main .right .animal{
    display: grid;
     grid-template-columns: auto 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
 }
 /* main .right .animal-left{} */
 main .right .animal-left img{
    height: 150px;
    display: block;
    margin: 0 auto;
 }
 /* main .right .animal-right{} */
 main .right .animal-right .name{
    font-weight: bold;
    font-size: 18px;
 }
 main .right .animal-right .name a{
    text-decoration: none;
    color: #555;
    line-height: 26px;
 }
 main .right .animal-right .name a:hover{
    text-decoration: underline;
 }
 main .right .animal-right .funfact{
    margin-top: 10px;
 }
 main .right .animal-right .size{
    font-size: 24px;
    margin-top: 30px;
    color: darkred;
 }
 main .right .animal-right button{
    display: block;
    border: none;
    font-size: 18px;
    padding: 10px 30px;
    margin-top: 50px;
    border: thin solid #d4d4d4;
 }
  
 /* FOOTER RULES  */
 footer{
    background-color: #333;
    padding: 20px;
    width: 100%;
    color: white;
 }