*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
      }
      
      img{width:100%;height:100%;margin:0rem;display: block;}
      a{text-decoration:none}
      
      body{background:#9D2F78;margin:0rem;}
      p{
          font-family: "Copperplate Gothic", "Garamond", "Times New Roman", serif;
          font-size:1rem;
         line-height:2rem;
         word-spacing:5px;
        }
      main.background-images-holder{
             width:100%;
          margin:0 auto;
          max-width:370px;
          position:relative;
          background:black
      }
   
  /* The main circular button */
  #options {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #9D2F78;
    position: fixed;
    border-radius:0.1rem solid white;
    z-index: 12000;
    bottom: 10%;
    left: 5%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    padding:0.1rem;
    -webkit-tap-highlight-color: transparent;

  }

  /* Container for drop-up menu */
  #menu {
    position: fixed;
    bottom: calc(10% + 6rem); /* start above the button */
    left: 5%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space between rectangles */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 12000;

  }

  /* Show menu when active */
  #menu.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Individual options */
  .option {
    width: 13rem;
    height: 3rem;
    background: #9D2F78;
    border-radius: 2rem; /* pill shape */
    display: flex;
    justify-content:center;
    align-items:center;
    color: white;
    padding:0 0.5rem 0 0.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 12000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.3s;
  }

  .option:hover {
    background: #0214B4;
  }
  
  img.options-icon{
      width:3rem;
      height:3rem;
  }
  
      div.option-box-style{
          width:100%;
          height:100%;
          display:flex;
          background:none;
      }
      
      div#option-icon-circle{
          width:20%;
          height:100%;
          display:flex;
          justify-content:center;
          aligm-items:center;
          background:white;
          border-radius:2rem;
          padding:0.2rem;
          border:0.1rem solid black;
      }
      
      img.option-icon{width:100%;height:100%}
      
      div#option-detail-box{
          width:80%;
          height:auto;
          background:none;
          display:flex;
          padding-left:1rem;
          align-items:center;
      }
      
      a#options-link,p#option-detail{
          color:white;
          font-weight:bold;
      }

       div#storypage1{
           width:100%;
           z-index:1;
           position:absolute;
           bottom:0%;
           padding:0 1rem 0 1rem;
       }
       
       div#storypage2{
           width:100%;
           height:100%;
           top:0%; 
           z-index:1;
           position:absolute;
           padding:0rem 1rem 0rem 1rem;
       }
      
       div#storypage3{
           width:100%;
           bottom:0%;
           background:none;
           position:absolute;
           z-index:1;
           padding:0rem 1rem 0rem 1rem;
       }
       
    p#page-1-storyline{
         color:white;
    }
    p#change-color{color:black}
    p#underline{
         color:white;
         text-decoration:0.1rem underline solid #68102D;
    }
    
    
    footer{background:red;position:relative}
    
    
    div#footer-info{
         width:100%;
         position:absolute;
         z-index:1;
         padding:0 1rem 0 1rem;
    }
    
    section#navigation-to-chapters{
         width:100%;
         height:5rem;
         background:none;
         display:flex;
         padding:1rem;
         justify-content:center;
         position:absolute;
         top:0%;
    }
    
    div#previous{
         margin-right:1rem;  
    }
    div#previous,div#next{
         width:100%;
         height:100%;
         background:#058ED5;
         border-radius:1rem;
         color:white;
         font-weight:bold;
         display:flex;
         align-items:center;
         justify-content:center;
    }
    
    a.chapter-navigation{
         color:white;
    }