body  {
        background-color: #0F0000;
        border: 9px inset #F5930A;
        color: #F080FF;
        margin: 2em;
        padding: 20px;
 }
  /*links*/
  a   {
        color: #F5930A;   
    background-color: #0F0F00
  }
 a:hover   {
      text-decoration: underline;
        color: #0F0F00;   
    background-color: #F5930A;
 }
 h1 {
       font-family: "Calligraffitti", cursive;
     
 }
 img    {
        border: .3em solid #0AFFCE;
        transition: 2s;
        padding: 10px;
         float:left;
 }

  img:hover    {
        border: .1em dashed #ecFFa0;
       
        
 }
 
 .logo{
     border:none;
     float:right;
 }
 
 /*side-by-side*/
 .container {
  display: flex;
  
/*   HOW BOXES ARE ALIGNED HORIZONTALLY: 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: center;
  flex-wrap: wrap;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 43%;
  
/*   PLAY WITH THESE UNTIL YOU LIKE HOW YOUR BOXES LOOK  */
  margin: .5em;
  /*border: 1px solid black;*/
  /*border-radius: 10px;*/
  /*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: 30%;
  display: block;
  margin: auto;
}


/* FORMATTING THE CITATIONS - DON'T COPY THIS IF YOU DON'T HAVE A "citation" CLASS */
.citation {
  text-align: center;
}
/*side-by-side end*/


/*Menu*/
* {
  border-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  height: 3em;
  width: 100%;
  background-color: #B00707;
}

nav a {
  float: left;
  display: block;
  color: #FFFFFF;
  text-align: center;
  padding: 1em;
  text-decoration: none;
  font-size: 1em;
}

nav a:hover {
  background-color: #455d7a;
  font-size: 1em;
}

/* BASIC DOCUMENT SETUP */
/* YOU MIGHT WANT A 'main' RULE TO FORMAT EVERYTHING THAT ISN'T THE NAV  */


body {
  background-color: #233142;
}

main {
  background-color: #e3e3e3;
  width: 90%;
  margin: auto;
  padding: 1em;
}

/*menu end*/