/*  PRIVATE CSS */

* {
  box-sizing: border-box;
}

/*  DEFAULT conditions before application of @media > 1200px   YELLOW  */
html{margin:0:}
body{
	font-family:Verdana, Geneva, sans-serif;
	background-color:#FFFFFF; /* white */
    margin:0;
} 
a{text-decoration:none}	
h1 {text-align:center; font-size:36px; margin-top:0px; margin-bottom:0px; }
h2 {text-align:center; font-size:24px; margin-top:0px; margin-bottom:0px; }
.itemdiv{
	background-color:#FFFF99; /* Pale Yellow */
	width:100%;  
	height:auto; 	
	color:#000000;
	border:thin solid #000000;
	padding:10px;
	margin-top:10px;
	font-size:14px;
}
/* END DEFAULT contitions */

/* I notice that Bootstrap uses 4 breakpoints, 1200, 992, 768, 576. so I will do the same */
/* only up to 1200px for Tablets Landscape     GRAY      */
@media only screen and (max-width: 1200px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:24px; }
h2 {text-align:center; font-size:18px; }
.itemdiv{
	background-color:#CCCCCC; /* Grey */
	padding:15px;
	font-size:14px;
	margin-bottom:25px;
    }

}

/* only up to 992px  for  Tablet small       PURPLE   */
@media only screen and (max-width: 992px) {
body{background-color:#FFFFFF; } 
h1 {text-align:center; font-size:18px }
h2 {text-align:center; font-size:16px; }
.itemdiv{
	background-color:#FF80FF; /* Purple */
	padding:15px;
	font-size:14px;
    }
}

/* only up to 768 for  iPHONE Landscape Tablet Portrate   GREEN  */
@media only screen and (max-width: 768px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:16px; }
h2 {text-align:center; font-size:14px; }
.itemdiv{
	background-color:#00FF00; /* Green */
	padding:10px;
	font-size:14px;
    }  
}

/* only up to 576px for iPHONE portrate      BLUE  */
@media only screen and (max-width: 576px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:14px; }
h2 {text-align:center; font-size:12px; }
.itemdiv{
	background-color:#33CCFF; /* Blue */
	padding:5px;
	font-size:14px;
    }
}