/* Do not modify this CSS, it assists you and the marker to identify common errors quickly */

/* 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;
}

/* Makes the html / webpage as tall or taller as the browser window */
html {
  min-height:100vh;
}

/* Makes the body as tall or taller as the browser window, less html element's padding */
body {
  min-height:calc(100vh - 2 * 20px);
}

/* 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;
  border: 5px solid #0006;
}

/* 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%);
}

/* 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;
}

/* Frame and Table elements are OK but are often used inappropriately, they are being flagged so that a decision can be made whether their use is appropriate */
frame,
table {
  padding:10px;
  background: repeating-linear-gradient(315deg, #999 0px, #999 20px, #9FF 20px, #9FF 40px) !important;
}

/* VERY IMPORTANT!!! This code flags all invalid HTML5 deprecated tags and attributes, do not modify! */
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;
}
center::after,
font::after,
menu::after,
marquee::after,
*[align]::after,
*[border]::after,
*[color]::after,
*[bgcolor]::after
{
  content:"Note to Student: Look for and remove all deprecated HTML 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);
}