/* Centering here helps a bit when zoomed-out Chrome with a narrow screen */
body {
  text-align: center;  /* IE content centering hack */
  font-family: sans-serif;
  padding-top: 1em;
}

h1:first-of-type {
  margin-top: 0;  /* was causing the top of the page to be a different color when firefox dark mode was active + dark reader was active; retain the same padding effect without the color difference by setting padding-top on body */
}

body > div {
  text-align: justify;    /* IE content centering hack, part 2 */
  margin: 0px auto;    /* Centering */
  max-width: 720px;
  min-width: 200px;
}

/* Round-edge boxes around section content */
section {
  border-width: 2px;
  border-style: solid;
  border-radius: 20px;
  padding: 0.0em 0.5em 0.0em 0.5em;  /* Slim padding for mobile */
  margin: 0em 0em 1.0em 0em;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.bump-char {
  vertical-align: 1px;
}

/* Reduce the vertical spacing between the project header and the first paragraph */
#projects h3 {
  margin-bottom: 0.4em;
}

#projects p {
  margin-top: 0.4em;
}

@media (prefers-color-scheme: dark) {
  /*
   * Not great support for this as of 2021-10.  To test, go to "about:config"
   * and create a new variable called "ui.systemUsesDarkTheme" that is of Number
   * type with value "1".
   */

  body {
    background-color: hsl(204, 28%, 5%);
    color: hsl(36 10% 80%);
  }

  a {
    color: hsl(213, 100%, 68%);
  }

  a:visited {
    color: hsl(239, 80%, 68%);
  }

  /*
   * Coverting the light-mode pastel colors to HSL and reducing the "lightness"
   * produces colors that clash.  Rather than that, I'll follow the same
   * red-blue-green idea in the lightmode but do it by taking the dark-mode
   * background and tweaking the hue.
   */

  section#about {
    background-color: hsl(000, 28%, 5%);
  }

  section#projects {
    background-color: hsl(255, 28%, 5%);
  }

  section#other {
    background-color: hsl(127, 28%, 5%);
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #fafafa;
  }

  /* Color scheme: http://colorschemedesigner.com/#0j31Tdl--6q6q */
  section#about {
    background-color: hsl(000, 100%, 95%);
  }

  section#projects {
    background-color: hsl(255, 100%, 95%);
  }

  section#other {
    background-color: hsl(127, 100%, 95%);
  }
}

@media only screen and (min-width: 480px) {
  /* Articles can have more padding */
  section {
    padding: 0.5em 1.0em 1.0em 1.0em;
  }
}

@media only screen and (min-width: 768px) {
   /* Style adjustments for viewports 768px and over go here */
  body > div {
    width: 720px;
  }
}