body {
    background-color: 	#5f9ea0;
    color:		#191970;
  font-family: "Grey Qo", cursive;
  font-size: 2em;
  
  padding: .5em;
}



h1 {
    font-family: "Playfair Display", serif;
  
    text-align: center;
}


a {
    color:		#191970;
   padding: .5em; 
}



a:hover{
   color: #5f9ea0; 
   background-color:	#191970 ;
    border-radius: 1px ;
    
}
    
img {
    border: .5em dotted #8FBC8F ; 
   border-radius: 30x;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 40%;
  margin: 1.5em;
    padding: 1em;
  text-align: center;
  
}

.box img {
  max-width: 40%;
  display: block;
  margin: auto;
}

main {
   margin-left: 87px;
}

nav a {
   position: absolute;
   /* Position them relative to the browser window */
   left: -30px;
   /* Position them outside of the screen */
   transition: 0.3s;
   /* Add transition on hover */
   padding: 15px;
   width: 100px;
}

nav a:hover {
   left: 0;
   /* On mouse-over, make the elements appear as they should */
}

#home {
   top: 130px;
   width: 50px;
   background-color:  	 	#4169E1;     
   border-radius: 0 20px 20px 0;
   text-align: center;
   color: 	#B0E0E6;
}

#page2 {
   top: 310px;
   width: 50px;
   background-color:  		#DC143C;  
   border-radius: 0 20px 20px 0;
   text-align: center;
   color:		#F08080;
}

h1:hover{
    cursor: none;
}