html {
  color-scheme: dark light;
}

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

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

  /*visibility: hidden;*/
}

footer {
  position: fixed;
  bottom: 10%;

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

ul {
  list-style-type: none;  
}

li {
  margin: 3% 0;
}

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

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

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

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

.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: center right;
  filter: grayscale(100%) blur(5px);
  transition: transform 0.4s, filter 0.2s;
}

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

.photo:focus {
  border: 0;
  filter: grayscale(0) blur(0);
}

.photoContainer {
  overflow: hidden;

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

.photoContainer:hover {
  transform: scale(1.2);
  /*background-color: yellow;*/
}

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

#title a {
  user-select: none;

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

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  margin: 0;
  border: 0;
  padding: 0;
}

#gallery:hover {
  /*background-color: yellow;*/
}

#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;
}
: 400px;
  height: 200px;
  float: right;
  clear: both;
}