* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 12pt;
  line-height: 14pt;
  color: yellow;
}

body {
  margin: 0;
  padding: 0;
}

.author {
  z-index: 1000;
  position: fixed;
  font-size: 12pt;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
.bio {
  z-index: 1000;
  position: fixed;
  text-align: center;
  width: 100%;
  top: 20px;
  display: block;
}

img,
video {
  display: block;
  height: 100%;
  object-fit: cover;
  overflow: clip;
}

.container {
  height: 100vh;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.container > div {
  position: relative;
  height: 100vh;
  display: flex;
}

.caption {
  position: absolute;
  padding: 2.3vh 3vw;
  padding-bottom: calc(2.3vh + env(safe-area-inset-bottom));
  width: 100%;
  z-index: 1000;
  text-align: center;
  letter-spacing: 0.02rem;
  bottom: 0;
  left: 0;
}

a:hover {
  font-style: italic;
}
.cv-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.cv-columns {
  columns: 2 150px;
  text-align: left;
  margin: 0 auto;
}

.cv-columns ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.cv-columns strong {
  display: block;
  margin-bottom: 10px;
}

#authorLink {
  cursor: pointer;
  text-decoration: none;
  padding: 20px;
}

.listed-works {

}

@media screen and (max-width: 800px) {
  .caption {
    padding: 4vh 5vw;
    padding-bottom: calc(4vh + env(safe-area-inset-bottom));
  }
  .container {
    display: block;
    overflow-x: unset;
  }

  img,
  video {
    display: unset;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
