body {
    text-align: left;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
  }

  #name {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
  }
  
  #content {
    max-width: 67ch;
  }
  
  a {
    text-decoration: none !important;
  }
  
  /* 1. Unvisited link (Default state) */
a:link {
    color: blueviolet;
    text-decoration: none; /* Removes the default underline */
  }
  
  /* 2. Visited link (User has clicked it before) */
  a:visited {
    color: blueviolet;
    text-decoration: none; /* Removes the default underline */
  }
  
  /* 3. Hover state (User mouses over it) */
  a:hover {
    color: blueviolet;
    letter-spacing: 2px;
    text-decoration: none; /* Removes the default underline */

  }

  a.current {
    color: white;
    background-color: blueviolet;
    text-decoration: none; /* Removes the default underline */


    
  }

  .slide video {
    display: block;
    object-fit: cover;   /* only crops if the file isn't exactly the stated ratio */
  }
  
  /* Slide 11: 4:5 portrait, fit by height */
  .video-tall video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    height: 100dvh;
    width: auto;
    aspect-ratio: 4 / 5;
}
  
  /* Slide 18: 5:4 landscape, fit by width */
  .video-wide video {
    height: 100vh;
    height: 100dvh;
    width: auto;
    aspect-ratio: 1800 / 1440;   /* same as 5 / 4 */
    object-fit: cover;           /* crops the video to that ratio if it differs */
    display: block;
    margin: 0 auto;              /* centers it */
  }

  .slide-11 video {
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto;
  }
  
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  @media (max-width: 700px) {
    body {
      font-size: 16px;
      line-height: 1.3;
    }
  
    #name {
      position: static;
    }
  }
  
  /* only apply the wide hover spacing where a mouse exists */
  @media (hover: hover) {
    a:hover {
      letter-spacing: 2px;
    }
  }