body {
  font-size: 12pt;
  font-family: Verdana, sans-serif;
  color: navy;
  background-color: pink;
  
  letter-spacing: normal;
  line-height: normal;
  text-align: left;
  text-indent: 0;
  
  /*
  background-image: url(galaxy_mario_amy.png);
  background-repeat: no-repeat;
  background-position: center;
  */
}

a:link {
  color: blue;
}

a:visited {
  color: darkmagenta;
}

#content {
  margin-left: 220px;
}

#navigation {
  position: sticky;
  top: 10px;
  
  float: left;
  width: 200px;
  margin: 10px;
}

#navigation h2 {
  background-image: none;
  margin: 0;
}

#navigation a:active {
  background-color: hotpink;
}

#navigation a:hover {
  background-color: lightpink;
}

#navigation a:focus {
  background-color: lightyellow;
}

#navigation li {
  display: block;
  padding: 10px 0;
}

#footer {
  position: relative;
  background-color: pink;
  margin: 0;
  padding: 20px;
  z-index: 1;
}

#pfp {
  float: right; 
  background-color: white;
  padding: 10px;
  margin-top: 0;
  
  /* horizontal offset, vertical offset, blur radius, spread distance, color */
  box-shadow: 5px 5px 5px 0px #656;
}

#header blockquote {
  margin: 40px;
}

h1 {
  font-size: 2em;
  color: #fd2;
  background-color: #448;
  padding: 20px;
  margin: 20px;
  
  border-style: solid;
  border-width: 5px;
  border-left-width: 10px;
  border-right-width: 10px;
  border-color: yellow;
  
  border-radius: 20px/40px;
  
  box-shadow: inset 0 0 5px 5px #224;
  
  /* horizontal offset, vertical offset, blur radius, color */
  /* there is no spread distance for text shadows */
  text-shadow: 2px 2px 2px #224
}

h2 {
  clear: right;
  
  font-size: 1.5em;
  border-style: dotted;
  border-width: 3px;
  border-left-width: 10px;
  border-right-width: 10px;
  border-color: yellow;
  
  /* 4 terms: top right bottom left */
  margin: 5px 40px 10px 20px;
  
  /* 2 terms: top+bottom right+left */
  padding: 20px 20px;
  background: pink url(/img/star.png) no-repeat top right;
}

h2, h3, h4, h5, h6 {
  color: darkmagenta;
}

strong {
  font-style: italic;
  color: darkmagenta;
}

#beemybeloved {
  float: right;
  margin: 10px;
}

td {
  /*
  border-style: solid;
  border-width: 1px;
  border-color: navy;
  */
  border: 1px navy solid;
}

th {
  background-color: white;
}

.burning {
  color: red;
}

.needle {
  color: orange;
}

.spark {
  color: goldenrod;
}

.cutter {
  color: green;
}

.ice {
  color: teal;
}

.bomb {
  color: black;
}

.stone {
  color: brown;
}

#glossary h2 {
  background: linear-gradient(to bottom in hsl longer hue, red, purple);
  color: white;
}

#glossary dt:before {
  content: "🏳️‍🌈";
}

#glossary dd:before {
  content: "🌈";
}

#donotcontact li {
    font: 12pt "Times New Roman", serif;
    padding: 10px 20px;
    border: 1px black solid;
    border-width: 1px 2px 3px 4px;
    border-color: orange darkmagenta magenta darkorange;
    margin: 10px 30px;
}


/* first-child only works if the specified element is the first element. so for example, 
#article p:first-child will select the first paragraph of main_content and the footer, but NOT
the first paragraph of the intro, since the first element in the intro is a header. */

#article header p:first-of-type {
  font-style: italic;
}

#article p:first-letter {font-size: 1.5em;}
#article p:first-line {font-weight: bold;}

#article header p:first-letter {font-size: 1em;}

#article aside {
  margin-left: 20px;
  font-size: 0.9em;
}

/* if you need to know more about specificity, use this page for reference:
https://www.htmldog.com/guides/css/intermediate/specificity/ */