html {
  color-scheme: dark light;
}

body {
  font-family: Calibri, sans-serif;
  margin: 3% 3% 10%;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  /*visibility: hidden;*/
}

h1 {
  margin-top: 0;
  margin-bottom: 1em;
}

h2 {
  user-select: none;
  cursor: pointer;

  color: hsl(from CanvasText 223 20% min(75, l + 45));
  font-weight: 380;
  margin: 0.2em 0;
}

h4 {
  font-weight: normal;
}

footer {
  position: fixed;
  bottom: 10%;

  /* Can't remember what this does, probably for when displaying the map? */
  /*clear: both;*/
}

p {
  text-align: right;
  /*text-align-last: right;*/
  line-height: 1.3;
}

ul {
  list-style-type: none;  
}

button {
  font-size: large;
  background-color: #383e4d88;
  width: 9.8em;
  height: 1.8em;
  border: none;
  border-radius: 6px;

  margin: 0.3em 0 0;
}

button:hover {
  background-color: #383e4dee;
  border: 1px thin #fff8;
}

button:active {
  background-color: #464c5bee;
}

.align {
  text-align: right;
  max-width: 30em;
}

.expandArrow {
  display: inline-block;
  transform-origin: center right;
  transform: scale(2.2,1);

  margin-left: 1em;
}

.footnote {
  font-size: small;

  display: block;
  padding-top: 1em;
}

.photo {
  user-select: none;

  /* This sets div container size to match its img. */
  display: block;

  /* Prevent border from adding to element dimensions. */
  box-sizing: border-box;

  transform-origin: top right;
  filter: grayscale(100%) blur(5px);
  transition: transform 0.4s, filter 0.2s;
  border: 1px double #fff0;
}

.photo:hover {
  filter: grayscale(0) blur(0);
  border: 1px double #fff8;
}

.photo:focus {
  filter: grayscale(0) blur(0);
  border: 1px double #fff0;
}

.photoContainer {
  float: right;
  overflow: hidden;

  transform-origin: top right;
  transition: transform 0.4s;
}

.photoContainer:hover {
  transform: scale(1.2);
}

.photoContainer:focus-within {
  transform: scale(3);
}

.buttonReference {
  color: hsl(from CanvasText 223 20% min(75, l + 45));
}

#title a {
  user-select: none;

  color: CanvasText;
  text-decoration: none;
  font-family: Consolas, monospace;
}

#quote {
  font-family: fantasy;
  font-size: 0.9em;
  color: hsl(from CanvasText 13 50% min(75, l + 45));

  background-color: #02000230;

  margin-top: 0.4em;
  margin-bottom: 0;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  display: inline-block;
}

#services p {
  margin-top: 0.2em;
  margin-bottom: 0.4em;
}

#services li {
  margin: 2em 0;
}

#services li:first-child {
  margin-top: 0;
}

#gallery {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;

  margin-bottom: 1em;
}

#photoSam1 {
  z-index: 1;
}

#photoSam2 {
  z-index: 2;
}

#photoSam3 {
  z-index: 3;
}

#photoSam4 {
  z-index: 4;
}

#bio p {
  margin-top: 0.2em;
  margin-bottom: 1.2em;
}

#cal {
  border-width: 0;
}

#run {
  margin: 8px 0;
}

#run table, tr, td, th {
  border-collapse: collapse;
}

/* Data for distance, time, & pace */
#run td {
  font-size: xx-large;
  font-weight: lighter;
  padding: 10px 18px 0;
}

/* Labels for distance, time, & pace */
#run th {
  font-size: smaller;
  font-style: italic;
  font-weight: normal;
  position: relative;
  padding: 0 18px 4px;
}

#run td:nth-of-type(odd),
#run th:nth-of-type(odd) {
  /* Darkish gray, 25% opacity */
  background-color: #383e4d40;
  filter: contrast(%200);
}

#map {
  width: 400px;
  height: 200px;
  float: right;
  clear: both;
}