body {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 24px;
}

nav {
  background-color: lavender;
  padding: 24px;
}

nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

nav ul {
  list-style-type: none;
}

main {
  padding-bottom: 48px;
}

#html {
  background-color: lightcyan;
  margin-top: 24px;
  padding: 24px;
}

#css {
  background-color: lightgoldenrodyellow;
  margin-bottom: 200px;
  margin-top: 24px;
  padding: 24px;
}

section {
  padding-bottom: 24px;
}

h3 {
  margin-bottom: 8px;
}
h5 {
  margin-top: 8px;
}

.contentContainer {
  display: flex;
}

.content {
  flex: 2;
}

.legend {
  flex: 1;
}

.legend div:first-child {
  padding-top: 20px;
}

.code {
  font-family: Courier New;
  font-size: 18px;
  line-height: 24px;
}

.indent1 {
  padding-left: 2em;
}

.indent2 {
  padding-left: 4em;
}

.openingTag,
.closingTag,
.attrName,
.assnOperator,
.attrValue,
.htmlParent,
.htmlChild,
.cssPropName,
.cssAssnOperator,
.cssPropValue,
.cssAssnTerminator,
.cssSelHtml,
.cssSelId,
.cssSelClass,
.cssDecStart,
.cssDecEnd
 {
  cursor: crosshair;
}

.openingTagHighlight {
  background-color: yellow;
}

.closingTagHighlight {
  background-color: gold;
}

.attrNameHighlight {
  color: blue;
  font-weight: bold;
}

.assnOperatorHighlight {
  color: limegreen;
  font-weight: bold;
}

.attrValueHighlight {
  color: red;
  font-weight: bold;
}

.htmlParentHighlight {
  text-shadow: 1px 1px 2px purple;
}

.htmlChildHighlight {
  text-decoration: underline;
}

.cssPropNameHighlight {
  background-color: yellowgreen;
}

.cssAssnOperatorHighlight {
  background-color: skyblue;
}

.cssPropValueHighlight {
  background-color: lightgreen;
}

.cssAssnTerminatorHighlight {
  background-color: aquamarine;
}

.cssSelHtmlHighlight {
  background-color: pink;
}

.cssSelIdHighlight {
  background-color: deeppink;
}

.cssSelClassHighlight {
  background-color: lightcoral;
}

.cssDecStartHighlight {
  background-color: cyan;
}

.cssDecEndHighlight {
  background-color: darkturquoise;
}