#content-menu {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
   overflow: auto;
   scrollbar-width: none;
   padding: 3em 15vw;

   .content-select {
      width: 100%;
      padding-block: .2em;

      &:hover {
         box-shadow: var(--pkShd);
         text-shadow: var(--pkText);

      }
   }

   h2 {
      font-size: 2rem;
      letter-spacing: .25em;
      text-align: center;
   }
}

#content-back-menu,
#content-select {
   position: fixed;
   font-size: 1.25rem;
   text-align: center;
}

#content-select {
   top: 1em;
   right: 1em;
}

#content-back-menu {
   bottom: .5em;
   left: .5em;
}

/* story paths */
.content-holder {
   border-radius: 1em;

   h3 {
      opacity: .7;
      letter-spacing: .25em;
      border: 0;
      margin-block: .5em;

      &::after,
      &::before {
         content: '-';
      }
   }

   --bg : var(--vdg);

   .story-toggles {
      display: grid;
      grid-auto-flow: column;
      gap: .5em;
      width: calc(100% - 2em);
      margin: auto;


      button {
         border-bottom: 0;
         border-radius: .5em .5em 0 0;
         text-transform: capitalize;

         background-color: var(--bg);
         transition: .2s;

         &::after {
            content: '';
            position: absolute;
            bottom: -.2em;
            left: 0;
            width: 100%;
            height: .5em;
            background-color: inherit;
         }

         &:hover {
            text-decoration: underline;
         }

      }
   }

   .story-main {
      border: var(--brd);
      border-radius: .5em;
      box-shadow: var(--shd);
      min-height: 2em;

      background-color: var(--bg);

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: .5em;
      gap: .5em;

   }
}

[data-type="message"] .start-label {
   display: none;
}

[data-display="scenes"] .show-scenes {
   z-index: 10;
}

[data-display="interactions"] .show-interactions {
   z-index: 10;
}

[data-display="messages"] .show-messages {
   z-index: 10;
}


.word-num,
.scene-tags {

   display: block;
   opacity: .7;
   font-size: .75em;

   &:empty {
      display: none;
   }

   &::after {
      content: ')';
   }

   &::before {
      content: '(';
   }
}

/* titles */
.content-holder,
.story-path {
   h3 {
      opacity: .7;
      letter-spacing: .25em;
      border: 0;
      margin-block: .5em;

      &::after,
      &::before {
         content: '-';
      }
   }
}

/* button */
.story-path,
.story-main {


   button {
      background-color: black;
      display: grid;
      place-items: center;

      i {
         position: absolute;
         top: .5em;
         right: .5em;
         font-size: 0.5em !important;

      }

      &.seen {
         opacity: .5;
      }
   }

   button:hover {
      box-shadow: var(--pkShd);
      text-shadow: var(--pkText);
   }


}

/* story paths */

.story-path {
   --bg: var(--vdg);

   display: grid;

   .story-steps {

      border: var(--brd);
      border-radius: .5em;
      box-shadow: var(--shd);

      background-color: var(--bg);

      padding: 1em;
      display: flex;
      max-width: 100%;
      align-items: center;

      overflow-x: auto;

      height: max-content;
      justify-self: center;

      scrollbar-width: none;

      i {
         font-size: 1.25rem;
         margin-inline: .25em;
      }

      button {
         height: 100%;
         margin-bottom: .5em;
         --s: 12em;
         max-width: var(--s);
         min-width: var(--s);
      }
   }



   >button {
      margin-top: .5em;
      width: 50%;
      place-self: center;
   }
}

[data-icon="scene"] {
   rotate: 90deg;
}