html {
   margin: 0;
   padding: 0;
}

body {
	background-color: ivory; 
	font-family: "Trebuchet MS", Arial, sans-serif; 
   color: black;
   margin: 0;
   padding: 0;
   width: 100%;
	}

h1 {
   text-align: center;
}

h1, h2, h3, h4, h5 {
   font-family: Arial, sans-serif; margin-bottom: 0; padding-bottom: 0;
}

p {margin-top: 0.5em; margin-bottom: 0;}

ul {list-style: list-item none disc outside; margin: 0.5em 0 0.5em 1.5em;}

a {font-weight:bold; text-decoration:none;}
a:link {color: cornflowerblue; font-weight:bold;}
a:visited {color: gray; font-weight: bold}
a:hover	{color: cornflowerblue;}
a:active {color: navy;}

img.right {margin: 0% 0% 0% 2%; float:right;}
img.left {margin: 0% 2% 0% 0%; float:left;}

/* Optimal height for iPhone 5, SE */
@media (max-width: 321px){

   #map {
	   height: 400px;
   }
}

/* Optimal height for Galaxy S5 */
@media (min-width: 321px) and (max-width: 361px){

   #map {
	   height: 475px;
   }
}

/* Optimal height for iPhone 6, 7, 8, X, XS */
@media (min-width: 361px) and (max-width: 376px){

   #map {
	   height: 500px;
   }
}

/* Optimal height for iPhone X, XS */
@media (min-width: 361px) and (max-width: 376px) and (min-height: 812px){

   #map {
	   height: 648px;
   }

}

/* Optimal height for iPhone 6 Plus, 7 Plus, 8 Plus */
@media (min-width: 376px) and (max-width: 415px){

   #map {
	   height: 572px;
   }
}

/* Optimal height for all other browser widths */
@media (min-width: 416px){

   #textarea {
	   width: 600px;
	   margin: auto;
	   font-size: 120%;
   }
   
   #map {
	   height: 650px;
   }

   ul {
	   margin: 1em 0 1em 1em;
	   padding: 0;
   }
   
   li {
	   margin: 0.25em;
	   padding: 0;
   }
}