header, main, nav, footer, figcaption { display: block; }
video, embed { float: right; padding-left: 20px; }

<style>
 #bgimage {position:relative; left:250; top:0; z-index:70; height:100%; width:100%; }
 #content {position:absolute; left:0; top:0; z-index:70; height:100%; width:100%}
 </style>
body { background-color: #4F6D93;
      color: #000000;
	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", 
	  "Microsoft Yahei", "New 計算機", "Source Han Sans SC", "Noto Sans CJK SC",
	  "WenQuanYi Micro Hei", Arial, Helvetica, sans-serif;
      background-image: linear-gradient(to bottom, #FFFFFF, #4F6D93); 
	  background-repeat: no-repeat;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
#wrapper { width: 80%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #90C7E3; 
		   min-width: 960px;
		   max-width: 2048px;
		   box-shadow: 3px 3px 3px #333333;
		   overflow: hidden;
}
header { background-color: #000033;
       color: #FFFFFF;
	   background-image: url(sunset.jpg);
	   background-position: right;
	   background-repeat: no-repeat;
	   text-align: center;
	   height: 60px;
	   padding-top: 15px;
}
h1 { margin-bottom: 0;
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 5px;
} 
nav { float: left;
     width: 220px;
     font-weight: bold; 
	 padding: 20px;
}
nav ul { list-style-type: none;
       margin: 0;
	   padding-left: 0;
	   font-size: 1.2em;
}
nav a { text-decoration: none; 
      transition: color 3s ease-out;}

nav a:link { color: #000033; }
nav a:visited { color: #000033; }
nav a:hover { color: #FFFFFF; }
main { padding: 10px; 
      display: block;
	  background-color: #FFFFFF;
	  color: #000000;
	  margin-left: 250px;
}
main img { float: left;
         padding-right: 2em;
}
main div { overflow: auto;
           padding-left: 5%;
		   padding-right: 5%;
		   font-size: 90%;
}
h2 { color: #3399CC;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #ccc;
}
h3 { color: #000033;
	font-family: Georgia, "Times New Roman", serif;
}
dt { color: #000033; 
}
main ul {list-style-image: url(marker.gif);} 
#contact { font-size: 90%; }

footer { font-size: 100%;
	   font-family: Georgia, "Times New Roman", serif;
	   text-align: center;
	   margin-left: 250px;
	   background-color: #FFFFFF;
	   colro: #000000; 
	   padding: 10px;
	   clear: both;
}
#mobile { display: none; }
#desktop { display: inline; }
table { border: 1px solid #3399CC;
      width: 80%;
	  border-spacing: 0;
}
td, th { padding: 5px;
       border: 1px solid #3399CC;
}
td { text-align: center; }
.text { text-align: left; }
tr:nth-of-type(odd) { background-color: #F5FAFC; }
label { float: left;
      display: block;
	  text-align: right;
	  width: 120px;
	  padding-right: 10px;
}
input, textarea { display: block; 
               margin-bottom: 20px;
}
input[type="submit"] { margin-left: 100px; }
#gallery { position: relative;
           height: 200px; }
#gallery ul {list-style-type: none;
    width: 900px; 
}
#gallery li { display: inline; 
     float: left;
	 padding: 10px; 
}
#gallery img { border-style: none;
}
#gallery a { text-decoration: none;
             font-style: italic;  
             color: #000000; 
}
#gallery span { position: absolute;
                left: -900px;
               opacity: 0;
              transition:  opacity 3s ease-in-out; 
}
#gallery a:hover span {     
			position: absolute;
			top: 16px;
			left: 250px; 
            opacity: 1; 
}
@media only screen and (max-width: 64em) {
	body  { margin: 0;
	       background-color: #FFFFFF;
	}
	#wrapper { min-width: 0;
	           width: auto;
			   box-shadow: none;
	}
	main { margin-left: 0; }
	nav { float: none;
	     width: auto;
		 padding: .5em;
		 text-align: center;
	}
	nav li { display: inline;
	      padding: 0.25em 0.75em;
	
	}
	footer { margin-left: 0; }
}
@media only screen and (max-width: 37.5em) {
   main { padding: 0.1em 1em;
		 font-size: 90%;
	}
	header { padding-top: 1em; 
	}
	h1 { font-size: 1.5em;
    }
	nav { padding: 0; }
	nav li { display: block;
	       margin: 0;
		   border-bottom: 2px solid #330000; 
	}
	nav a { display: block; }
	#mobile { display: inline; }
	#desktop { display: none; }
	label { float: none;
	      text-align: left;
	}
	input[type="submit"] { margin-left: 0; }
	#gallery { display: none; }
  }