* {
      border-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
     .small {
     font-size: .5em;
    }
    
    body {
     background-color: #A81F1F;
     color: #FCFCFC;
     font-size: 1.3em;
      font-family: "Lobster Two", sans-serif;
      padding: 3em;
    }
    
    /*LINKS*/
    a {
        color: #2043CF; 
        text-decoration: none;
        padding: .3em;
        transition: .5s;
    }
    
    img {
        border: .5em inset #D5ECD4;
    }
    
    a:hover {
        text-decoration: underline;
    }
        
        .logo {
    border: none;
       
        }
        
        .logo:hover {
    border: none;
        }
    
    nav {
      height: 100%; /* Full-height */   
      width: 10%; /* Desired width */
      position: fixed; /* Sticks menu to the screen */
      z-index: 1; /* Keeps menu in front of other elements */
      top: 0;
      left: 0;
      background-color: #0400FF;
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 20px; /* Add some space at the top of the links */
    }
    
    /*MENU BAR NAV*/
    
    nav a {
      padding: .5em .75em .5em 1em;
      text-decoration: none; /* Remove the underlines */
      font-size: 1.3em;
      color: #FFFFFF;
      display: block; /* Makes each menu link occupy its own line */
      transition: 0.3s; /* Animates the hover effect */
    }
    
    nav a:hover {
      color: #f1f1f1;
      text-shadow: 2px 2px 2px #000000;
    }
    
    main {
      margin-left: 10%; /* Same as the width of the sidebar */
      padding: 1em 1em;
      padding-top: 20px; /* Same number as the top of the menu */
    }
    
    
    /*SIDE-BY-SIDE THINGS*/
    
    
    .container {
  display: flex;
  
/*   HOW BOXES ARE ALIGNED HORIZONTALLY: options include center, flex-start (aligns to the top), flex-end, and stretch  */
  align-items: center;
  
/*   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: 45%;
  
/*   PLAY WITH THESE UNTIL YOU LIKE HOW YOUR BOXES LOOK  */
  margin: .5em;
  border-radius: 10px;
  padding: .5em;
  text-align: center;
}

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