/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  padding: 0 22px 50px;

  background-color: #000000;
  background-image: url("heart-bg.png");
  background-repeat: repeat;

color: #ffb6d9;

  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.3;
}

.page {
  width: 94%;
  max-width: none;

  margin: 0 auto;

  background: rgba(0, 0, 0, 0.55);
  border: 0;
}

.site-header {
  padding: 20px 10px 14px;

  text-align: center;

  background: transparent;
  color: #ffffff;

  border: 0;
}

.heart-line {
  margin-bottom: 8px;

  color: #ff00aa;

  font-family: "Times New Roman", Times, serif;
  font-size: 20px;

  letter-spacing: 10px;
  text-align: center;
}

h1 {
  margin: 0;

  color: #ff0066;

  font-family: "Times New Roman", Times, serif;
  font-size: 46px;
  font-weight: bold;

  letter-spacing: 1px;
  text-align: center;

  text-shadow: 1px 1px 0 #000000;
}

.subtitle {
  margin: 4px 0 0;

  color: #66ffff;

  font-family: "Times New Roman", Times, serif;
  font-size: 25px;
  font-style: normal;

  text-align: center;

  text-shadow: 1px 1px 0 #000000;
}

.updated {
  margin: 12px 0 0;

  color: #ffff66;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;

  text-transform: uppercase;
  text-align: center;

  text-shadow: 1px 1px 0 #000000;
}

.navigation {
  margin: 8px auto 24px;
  padding: 8px 0;

  text-align: center;

  background: rgba(0, 0, 0, 0.55);

  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;

  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: bold;
}

.navigation a {
  margin: 0 9px;

  color: #d5a6ff;
}

.navigation a:visited {
  color: #ff66cc;
}

.navigation span {
  color: #ffffff;
}

main {
  padding: 18px 26px 30px;

  background: rgba(0, 0, 0, 0.25);
}

section {
  margin-bottom: 34px;
}

h2 {
  margin: 0 auto 16px;
  padding: 0;

  background: transparent;
  color: #ff00aa;

  border: 0;

  font-family: "Times New Roman", Times, serif;
  font-size: 30px;
  font-weight: bold;

  letter-spacing: 0;
  text-align: center;

  text-shadow: 1px 1px 0 #000000;
}

section:nth-of-type(2) h2 {
  color: #66ffff;
}

section:nth-of-type(3) h2 {
  color: #ff66cc;
}

section:nth-of-type(4) h2 {
  color: #ffff66;
}

section:nth-of-type(5) h2 {
  color: #cc99ff;
}

section:nth-of-type(6) h2 {
  color: #ff3333;
}

p {
  margin-top: 0;
  margin-bottom: 18px;

  text-shadow: 1px 1px 0 #000000;
}

a {
  color: #d5a6ff;
  text-decoration: underline;
  font-weight: bold;

  text-shadow: 1px 1px 0 #000000;
}

a:visited {
  color: #ff66cc;
}

a:hover {
  color: #ffff00;
  background: transparent;
}

strong {
  color: #ffffff;
}

.important-line {
  margin: 22px auto;

  color: #ff66cc;

  text-align: center;

  font-family: "Times New Roman", Times, serif;
  font-size: 25px;
  font-style: italic;

  letter-spacing: 0;

  text-shadow: 1px 1px 0 #000000;
}

.caption {
  margin-bottom: 10px;

  color: #ffff66;

  text-align: center;

  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-style: italic;

  text-shadow: 1px 1px 0 #000000;
}

.cupid-image {
  display: block;

  width: 760px;
  max-width: 90%;

  margin: 14px auto;

  border: 1px solid #999999;
}

.image-note {
  max-width: 760px;

  margin: 8px auto 0;

  color: #66ffff;

  text-align: center;

  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  font-style: italic;

  text-shadow: 1px 1px 0 #000000;
}

ul {
  padding-left: 42px;
}

li {
  margin-bottom: 8px;

  text-shadow: 1px 1px 0 #000000;
}

li::marker {
  color: #ff00aa;
}

.archive-note {
  margin: 22px auto;
  padding: 10px 14px;

  max-width: 780px;

  background: rgba(0, 0, 0, 0.5);
  color: #ffff66;

  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;

  text-align: center;

  font-family: "Courier New", Courier, monospace;
  font-size: 13px;

  text-shadow: 1px 1px 0 #000000;
}

.timeline-entry {
  display: block;

  margin-bottom: 12px;
  padding-bottom: 8px;

  border-bottom: 1px dotted #666666;

  text-shadow: 1px 1px 0 #000000;
}

.date {
  display: inline-block;
  width: 70px;

  color: #ff66cc;

  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.reference-date {
  display: inline-block;

  width: 92px;

  color: #ffff66;

  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.contact-section {
  padding: 14px;

  background: rgba(0, 0, 0, 0.5);

  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

.hidden-message {
  margin: 55px 3px 0;

  color: #111111;

  text-align: right;

  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
}

footer {
  padding: 14px 20px;

  text-align: center;

  background: rgba(0, 0, 0, 0.75);
  color: #aaaaaa;

  border-top: 1px solid #555555;

  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
}

footer p {
  margin: 4px 0;
}

.fiction-note {
  margin-top: 10px;

  color: #555555;

  font-size: 9px;
}

@media screen and (max-width: 600px) {
  body {
    padding: 0 8px 30px;
    font-size: 15px;
  }

  .page {
    width: 100%;
  }

  main {
    padding: 14px 8px 22px;
  }

  h1 {
    font-size: 34px;
  }

  .subtitle {
    font-size: 20px;
  }

  h2 {
    font-size: 24px;
  }

  .navigation {
    line-height: 1.9;
  }

  .cupid-image {
    width: 100%;
    max-width: 100%;
  }

  .date {
    width: 58px;
  }

  .reference-date {
    width: 78px;
  }
}