/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com
*/

body {
/*   padding-top: 300px; */
   position: relative;
  /* height: 6000px; */
}

#box1 {
   width: 500px;
   height: 150px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius: 50px 50px 20px 50px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 55px;
   margin-top: -50px;
   position: absolute;
   right: -25%;
   display: none;
   
}

#box2 {
   width: 500px;
   height: 150px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius: 50px 50px 50px 20px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 55px;
   margin-top: 100px;
   position: absolute;
   left: -25%;
   display: none;
   
}

#box3 {
   width: 500px;
   height: 200px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius:50px 50px 20px 50px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 65px;
   margin-top: -130px;
   position: absolute;
   right: -25%;
   display: none;
   
}

#box4 {
   width: 500px;
   height: 200px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius: 50px 50px 50px 20px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 0px;
   margin-top: 100px; 
   position: absolute;
   left: -25%;
   display: none;
   
}

#box5 {
   width: 500px;
   height: 200px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius: 50px 50px 20px 50px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 85px;
   margin-top: -60px;
   position: absolute;
   right: -25%;
   display: none;
   
}

#box6 {
   width: 500px;
   height: 150px
   color: white;
   border: 5px solid rgba(174, 214, 241);
   border-radius: 50px 50px 50px 20px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 5px;
   margin-top: 100px; 
   position: absolute;
   left: -25%;
   display: none;
   
}

#box7 {
   width: 200px;
   height: 150px
   color: white;
   border: 5px solid rgba(0, 139, 139, 0.32);
   border-radius: 20px 50px;
   background-color: #fffa9059;
   padding: 15px;
   margin: 5px;
   position: absolute;
   right: -25%;
   display: none;
   
}

#box8 {
   width: 200px;
   height: 150px
   color: white;
   border: 5px solid blue;
   border-radius: 50px 20px;
   background-color: orange;
   padding: 15px;
   margin: 5px;
   position: absolute;
   left: -25%;
   display: none;

}

.inner {
   padding: 15px;
   line-height: 25px;
   font-size: 18px;
   font-family: 'Dosis', sans-serif; 
/* font-family: 'Gaegu', cursive; */

}

.container {
   padding: 55px 0px 80px 0px;
}

/* @media screen and (max-height: 750px) {

   body {
      padding-top: 0px;
      background-color: transparent;
      ;
   }

   div[id*="box"] {
      font-size: 12px;
      overflow: hidden; 
    
} */

/* @media screen and (max-width: 500px) {

   body {
      background-color: green;
   }
    
   div[id*="box"] {
      font-size: 12px;
      overflow: hidden; 
   }    
} */