/* X sign visible in the photo viewer mode. */
#exit {
  position: absolute;
  width: var(--exit-size);
  height: var(--exit-size);
  top: var(--exit-size);
  right: var(--exit-size);
  cursor: pointer;
}
#exit:before,
#exit:after {
  content: "";
  position: absolute;
  width: var(--line-width);
  height: calc(var(--exit-size) * 1.4142);
  background: white;
  border-radius: var(--border-radius);
  top: calc(var(--exit-size) * -0.4142 / 2);
  left: 50%;
}
#exit:before {
  transform: rotate(45deg);
}
#exit:after {
  transform: rotate(-45deg);
}
/**/

/* Links with interactive underline. */
a {
  text-decoration: none;
  position: relative;
  border-bottom: solid 3px var(--light-accent-color);
  cursor: pointer;
  display: inline-block;
}
a:after {
  content: "";
  height: var(--line-width);
  background-color: var(--accent-color);
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--line-width));
  width: 0;
  transition: width var(--transition-time);
}
a:hover:after {
  width: 100%;
}
/**/

/* Line with circle for the timeline sections. */
.line {
  margin-left: calc(var(--dot-size) / 2);
  margin-right: var(--line-height);
  border-left: var(--line-width) solid var(--text-color);
  position: relative;
}
.line:before {
  content: "";
  position: absolute;
  left: calc(-1 / 2 * var(--dot-size) - 4px);
  background: var(--bg-color);
  top: 33%;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 100%;
  border: var(--line-width) var(--text-color) solid;
}
/**/

/* Activity cards. */
.card {
  border-radius: var(--border-radius);
  text-align: center;
  padding: var(--margin);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
  transition: box-shadow;
  transition-duration: var(--transition-time);
  background: var(--card-color);
}
.card:hover {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
}
/**/

/* Dates related to the lines and cards. */
.date-narrow-screen,
.date-wide-screen {
  font: 400 1em "Open sans", sans-serif;
}
.date-narrow-screen {
  display: none;
  margin: 0;
  margin-top: calc(var(--line-height) / 2.25) !important;
  color: var(--light-text-color);
}
.date-wide-screen {
  position: relative;
  top: calc(33% + var(--dot-size) + 1ch);
  margin: 0 var(--margin) 0 calc(var(--line-width) + 1ex);
  width: 100px;
}
/**/

/* The photo viewer */
#photo-viewer {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--photo-viewer-color);
  z-index: -3;
  opacity: 0;
  transition: opacity var(--transition-time);
}

/* #photo */
#photo-viewer > img {
  max-width: 80vw;
  max-height: 80vh;
}
/**/

/* Scrollbar. */
body::-webkit-scrollbar-track,
body::-webkit-scrollbar {
  background-color: var(--scroll-color);
  width: 12px;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
  border-radius: var(--border-radius);
}
/**/

/* Selections. */
::-moz-selection {
  background: var(--accent-color);
  color: white;
}
::selection {
  background: var(--accent-color);
  color: white;
}
/**/

/* Absolute centering parent. */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
/**/

@media (max-width: 900px) {
  .line {
    display: none;
  }

  /* Disable animation. */
  .card:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
  }

  .date-narrow-screen {
    display: block;
  }
  .date-wide-screen {
    display: none;
  }
}