* {
  user-select: none;
}
  
  body {
    background: url('old-paper-texture.jpg') no-repeat center center fixed;
    background-size: cover;
  }

  body {
    margin: 0;
    font-family: sans-serif;
  }

  body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .word {
    overflow: visible;
  }

  #gifContainer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30%;
    text-align: center;
  }
  
  #gifContainer img {
    height: 100%;
    max-height: 380px;    
    max-width: 60%;
    object-fit: contain;
    top: 0px;
  }
  

  .sticky-section {
    position: sticky;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
  }

  #mainSVGContainer {
    position: relative;
    top: 5%;
    width: 100%;
  }
  #fadeText {
    position: relative;
    width: 100%;
    height: 50%;
  }

  svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .letter {
    fill: transparent;
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .navigation-arrows {
    position: fixed;
    bottom: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 20;
  }

  .arrow {
    font-size: 2rem;
    color: black;
    background: rgba(255, 255, 255, 0.6); /* white with 60% opacity */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent; /* non-standard but safe */
  }

  .mute-button {
    align-content: end;
    text-align: center;
    margin-right: 10px;
    font-size: 2rem;
    color: black;
    z-index: 55;
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.6); /* white with 60% opacity */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    width: 50px;
    height: 50px;
  }

  .home-button {
    align-content: end;
    text-align: center;
    margin-right: 10px;
    font-size: 2rem;
    color: black;
    z-index: 55;
    position: fixed;
    top: 10px;
    right: 70px;
    background: rgba(255, 255, 255, 0.6); /* white with 60% opacity */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    width: 50px;
    height: 50px;
  }

  .left-arrow {
    margin-left: 10px;
  }

  .right-arrow {
    margin-right: 10px;
  }

  @media (hover: hover) {
    .arrow:hover,
    .arrow:active {
      background: rgba(0, 0, 0, 0.8);
      color: white;
    }

    .mute-button:hover,
    .mute-button:active {
      background: rgba(0, 0, 0, 0.8);
      color: white;
    }

    .home-button:hover,
    .home-button:active {
      background: rgba(0, 0, 0, 0.8);
      color: white;
    }
}

  @font-face {
    font-family: 'PlaywrightMXGuides';
    src: url('https://ericandjess.ca/Our-Story/Caveat-VariableFont_wght.ttf') format('truetype');
  }

  .fade-text {
    font-size: clamp(1.3125rem, -0.7969rem + 6.75vw, 1.9rem);
    font-family: 'PlaywrightMXGuides', sans-serif;
    width: 100%;
    text-align: center;
  }