body {
          background-color: #D99454;
          color: #1D1107;
         font-size: 1.3em;
        border: .7em groove #54352a;
        padding:2em;
            
        }
        
        
        nav {
            width: 100%;
            margin: 0;
            background-color: #593626;
        
          /* makes the menu "sticky" */
            position: fixed;
          
          /* makes sure the menu sticks to the very top of the page */
            top: 0;
        }
        
        .menu {
          /* takes away the bullet points from the list items */
            list-style-type: none;
          
            margin: 0 auto;
            padding: 0;
          
          /* adjust this to control the placement of the menuitems in the navbar */
            padding-left: 1em;
          }
        
        .menuitem {
            float:left;
        }
        
        .menuitem a {
            display: inline-block;
            color: #f794c3;
            text-align: center;
            padding: 12px 16px;
            ;
        }
        
        .menuitem a:hover {
            background-color :#f754a2;
            font-size:2em;
            color: #f794c3;
            border-radius:5px ;
            text-decoration:underline;
            
        }
        
        .logo {
          /* play with the width and margin-top numbers until your logo looks the way you want it to */
          width: 5em;
          margin-top: .3em;
          
          /* you probably only need border: none if you have a border set for images in general */
          border: none;
        }
        
        
        /* BASIC DOCUMENT SETUP */
        
        * {
          border-sizing: border-box;
          margin:0;
          padding:0;
        }
        
        /*LINKS*/
        a{
            color:#160844;
         text-decoration: none;
         padding:.3em;
         transition:.7s;
        }
        a:hover{
           text-decoration: underline; 
           background-color:#8F8FFF ;
           transition:.7s;
           font-size:175%;
           }
        
        .logo{
            border:1px solid #d6996d ;
            border-radius: 50%;
        }
        
        main {
          background-color:#f794c3;
          width: 90%;
          margin: auto;
          padding: 1em;
          padding-top: 4.5em;
        }
        h1{
            font-family: "Atma", serif;
        }
        p{
            font-family: "Just Me Again Down Here", serif;
            font-size: 1.3em;
        }
        li{
            font-family:"Just Me Again Down Here", serif;
        font-size: :1.3em;
            
        }
        
        a{
            font-family: "Chewy",serif;
        }
        img{
            border: 5em inset #;
            border-radius:10px ;
        }
  h2{
      font-family: "Kranky", serif;
  }  

 /*IMAGES NEXT TO EACHOTHER*/

        .container {
  display: flex;
  
/*   HOW BOXES ARE ALIGNED VERTICALLY: options include center, flex-start (aligns to the top), flex-end, and stretch  */
  align-items:flex-start;
  
/*   HOW BOXES ARE POSITIONED HORIZONTALLY: options include center, space-around, or space-between */
  justify-content: space-between;
  flex-wrap: wrap;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 25%;
  
/*   PLAY WITH THESE UNTIL YOU LIKE HOW YOUR BOXES LOOK  */
  margin: .5em;
  border: 7px inset teal;
  border-radius: 2em;
  padding: 1em;
}

/* SETTING THE IMAGE WIDTH HERE INSTEAD OF IN HTML. REMOVE WIDTH="XXX%" FROM ANY HTML IMAGE TAGS INSIDE BOX DIVS */
.box img {
  max-width:60%;
  display: block;
  margin: auto;
}


/* FORMATTING THE CITATIONS - DON'T COPY THIS IF YOU DON'T HAVE A "citation" CLASS */
.citation {
  text-align: center;
}
 img {
  max-width:70%;
  
  margin: auto;
  border: 6px ridge blue;
}

/* ==================================================================================*/

/* THESE DIRECTIONS ASSUME YOU ALREADY HAVE A STICKY MENU IN PLACE.  IF YOU DON'T, COPY EVERYTHING EXCEPT BASIC DOCUMENT SETUP */
* {
  border-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #593626;
    /* background-color must pass contrast checker against "nav a" color */
  
  transition: background-color 0.5s;
  /* add this new property */
}

/* NEW RULE! */
nav.scrolled {
     background-color: #160844;
      /* background-color must pass contrast checker against "nav a" color */
}

nav a {
  float: left;
  display: block;
  color: #FFFFFF;
      /* color must pass contrast checker against "nav" and "nav.scrolled" colors */
  
  text-align: center;
  padding: 1em;
  text-decoration: none;
  font-size: 1em;
}

nav a:hover {
  background-color: #8F8FFF;
    /* background-color must pass contrast checker against "nav a" color - or you can make a new 'color' property right here that passes the contrast checker */
  font-size: 1em;
}

main {
/*   ADD PADDING INSIDE THE WHOLE 'main' ELEMENT  NOT USED*/
  padding: 1em;
  
/*   SHIFT THE 'main' ELEMENT DOWN, AWAY FROM THE MENU BAR */
  padding-top: 3em;
  
/*   CUSTOMIZE THESE UNTIL YOU LIKE THE WAY THEY LOOK  */
  background-color: #e3e3e3;
  width: 90%;
  margin: auto;
}

.checked {
  color: orange;
}

.fa-star hover {
    color:orange;
}