/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
      display: flex;
      flex-wrap: wrap;
    }
    
header {
        flex-basis: 100%;
      }
      
nav   {
        flex-basis: 5%;
      }
    
main {
      max-width: 500px;
      margin-top: 50px;
      margin-left: 50px;
      display: flex;
      flex-basis: 500px;
      flex-wrap: wrap;
   }
   
.i-spy {
      flex-wrap: nowrap;
    }
     
h1 {
       color: brown;
       text-align: center;
       font-size: 10px;
       font-family: 'verdana';
       flex-basis: 100%;
       margin: 0;
       } 
       
p {
        color: darkslategrey;
        font-size: 7pt;
        font-family: 'verdana';
        letter-spacing: 0.5px;
        }
        
ul {
        color: darkslategrey;
        font-size: 7pt;
        font-family: 'verdana';
        letter-spacing: 0.5px;
        }
      
.box {
        border-radius: 25px;
        box-sizing: border-box;
        background-color: burlywood;
        padding: 10px;
        flex-basis: 50%;
        height: auto;
        text-align: center;
        display: inline-block;
      }
      
.head-box {
        border-radius: 25px;
        box-sizing: border-box;
        background-color: burlywood;
        padding: 10px;
        margin-bottom: 10px;
        flex-basis: 100%;
        height: auto;
        text-align: center;
        display: inline-block;
      }
      
summary {
        margin: 10px;
        color: white;
        font-size: 7pt;
        font-family: 'verdana';
        letter-spacing: 0.5px;
      }
      
ul.navbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
      }

ul.navbar li a {
         display: block;
         color: rgba(255, 255, 255, 0);
         padding: 14px 16px;
         text-decoration: none;
         font-family: 'verdana';
         font-size: 7pt;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center
      }
      
      #nav1 {
        background-image: url('Images/skinny_cat.gif');
        }
      #nav2 {
        background-image: url('Images/meow_cat.gif');
        background-size: 20%
        }
       #nav3 {
        background-image: url('Images/star_cat.gif');
        }
       #nav4 {
        background-image: url('Images/resting_cat.gif');
       }
       #nav5 {
        background-image: url('Images/wiggle_cat.gif');
        background-size: 30%;
       }
       #nav6 {
        background-image: url('Images/tangerine_cat.gif');
       }
       #nav7 {
        background-image: url('Images/marching_cat.gif');
        background-size: 25%
       }
        #nav8 {
        background-image: url('Images/sniff_cat.gif');
        background-size: 30%
       }
        #nav9 {
        background-image: url('Images/cathead_cat.gif');
        background-size: 30%
       }
       
ul.navbar li a:hover {
         color: rgba(255, 255, 255, 1);
      }

       #nav1:hover {
        background-image: none;
        }
      #nav2:hover {
        background-image: none;
        }
       #nav3:hover {
        background-image: none;
        }
       #nav4:hover {
        background-image: none;
       }
       #nav5:hover {
        background-image: none;
       }
       #nav6:hover {
        background-image: none;
       }
       #nav7:hover {
        background-image: none;
       }
       #nav8:hover {
        background-image: none;
       }
       #nav9:hover {
        background-image: none;
       }