/* Make HTML and body content viewable, layout to fill window */
html,
body
{
  padding:20px;
  margin:0px;
  background: rgba(40,40,40,0.1);
  border: 5px solid hsl(314,0%,40%);
  box-sizing: border-box;
}
html {
  min-height:100vh;
}
body {
  min-height:calc(100vh - 40px);
}


/* Give all semantic body elements uniform layout style */
header,
nav,
main,
footer,
aside,
section,
article,
details,
div
{
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

/* Give each semantic body element a different color */
header
{
  background-color: hsl(0,100%,97%);
  border: 5px solid hsl(0,100%,60%);
}
nav
{
  background-color: hsl(240,100%,97%);
  border: 5px solid hsl(240,100%,60%);
}
main
{
  background-color: hsl(120,100%,97%);
  border: 5px solid hsl(120,100%,40%);
}
footer
{
  background-color: hsl(300,100%,97%);
  border: 5px solid hsl(300,100%,60%);
}

article
{
  background-color: hsl(270,100%,97%);
  border: 5px solid hsl(270,100%,70%);
}
aside
{
  background-color: hsl(180,100%,97%);
  border: 5px solid hsl(180,100%,40%);
}
section
{
  background-color: hsl(30,100%,97%);
  border: 5px solid hsl(30,100%,60%);
}
details
{
  background-color: hsl(60,60%,97%);
  border: 5px solid hsl(60,60%,60%);    
}

div
{
  border: 2px dashed hsl(210,100%,40%);  
}

/* HTML 4 Deprecated Tags and Attributes*/
center,
font,
menu,
marquee,
*[align],
*[border],
*[color],
*[bgcolor]
{
  padding:10px;
  background: repeating-linear-gradient(315deg, #999 0px, #999 20px, #FF9 20px, #FF9 40px) !important;
  border:20px solid black;
}
frame,
table {
  padding:10px;
  background: repeating-linear-gradient(315deg, #999 0px, #999 20px, #9FF 20px, #9FF 40px) !important;
}

center::after,
font::after,
menu::after,
marquee::after,
*[align]::after,
*[border]::after,
*[color]::after,
*[bgcolor]::after
{ 
  content:"Note to Student: Remove all HTML4 deprecated code before submission.";
  font-size:400%;
  color:red;
  font-weight:bold;
  text-shadow: -1px -1px 1px rgba(255,255,255,0.8), 2px  2px 2px rgba(0,0,0,0.8);
}

/* Some basic styling for the starting page */

header {
  font-size: 300%;
  font-weight: bold;
}

header * {
  vertical-align: middle;
}

header img {
  filter: drop-shadow(-1px -1px 3px white);
  -webkit-filter: drop-shadow(-1px -1px 3px white);
  margin-right: 40px;
}

nav,
footer {
  padding: 10px;
}

nav ul {
  padding:0;
  margin:0.2em;
  display: inline-block;
  list-style: none;
}

nav ul li {
  display: inline-block;  
  padding:0.2em;
}

footer * {
  vertical-align: middle;
}

#more-about-me {
  width:100%;
}
#more-about-me th {
  padding:10px 15px;
  width:200px;
  background-color:rgba(240,255,255,0.95);
  text-align:left;
}
#more-about-me td {
  padding:10px 15px;
  background-color:rgba(255,255,255,0.95);
}


/* Wireframe toggle button */
#toggleWireframeCSS {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 6px 10px;
  opacity: 0.5;
}
#toggleWireframeCSS:hover {
  opacity: 1;
}