* {
    margin: 0;
    padding: 0;
  }
  body {
    width: 100%;
    min-height: 100vh;
    background-image: url(./../assets/optimized/waterTexture.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  #floating-paper-container {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    pointer-events: none;
  }
  
  #floating-paper {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
  }
  
  #paper-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive, sans-serif;
    font-size: 1.4vw;
    background: transparent;
    z-index: 21;
  }
  
  #floating-book {
    position: absolute;
    left: 5vw;
    bottom: 12vh;
    width: 15vw;
    /*max-width: 480px;
    min-width: 280px;*/
    height: auto;
    z-index: 12;
    pointer-events: none;
    animation: floatBook 3.2s ease-in-out infinite alternate;
  }
  
  #floating-book2 {
    position: absolute;
    left: 24vw;
    bottom: 18vh;
    width: 15vw;
    /*max-width: 420px;
    min-width: 220px;*/
    height: auto;
    z-index: 12;
    pointer-events: auto; /* allow clicking */
    animation: floatBook2 3.6s ease-in-out infinite alternate;
    transition: transform 0.22s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
    cursor: pointer;
  }
  #floating-book2:hover, #floating-book2:focus {
    animation: pulseBook 0.8s cubic-bezier(.4,2,.6,1) infinite;
    box-shadow: 0 12px 48px 0 rgba(60,60,60,0.28);
    outline: none;
  }
  
  #floating-book3 {
    position: absolute;
    left: 60vw;
    bottom: 10vh;
    width: 15vw;
    /*max-width: 480px;
    min-width: 200px;*/
    height: auto;
    z-index: 12;
    pointer-events: none;
    animation: floatBook3 3.1s ease-in-out infinite alternate;
  }
  
  #floating-book4 {
    position: absolute;
    left: 78vw;
    bottom: 15vh;
    width: 15vw;
    /*max-width: 4000px;
    min-width: 200px;*/
    height: auto;
    z-index: 12;
    pointer-events: none;
    animation: floatBook4 3.8s ease-in-out infinite alternate;
  }
  
  @keyframes floatBook {
    0% { transform: translateY(0px) rotate(-5deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(-5deg); }
  }
  @keyframes floatBook2 {
    0% { transform: translateY(0px) rotate(7deg); }
    50% { transform: translateY(-24px) rotate(-4deg); }
    100% { transform: translateY(0px) rotate(7deg); }
  }
  @keyframes pulseBook {
    0%   { transform: scale(1) rotate(-8deg); }
    35%  { transform: scale(1.05) rotate(-8deg); }
    70%  { transform: scale(1) rotate(-8deg); }
    100% { transform: scale(1) rotate(-8deg); }
  }
  @keyframes floatBook3 {
    0% { transform: translateY(0px) rotate(-8deg); }
    50% { transform: translateY(-13px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(-8deg); }
  }
  @keyframes floatBook4 {
    0% { transform: translateY(0px) rotate(3deg); }
    50% { transform: translateY(-19px) rotate(-6deg); }
    100% { transform: translateY(0px) rotate(3deg); }
  }
  
  
  .menu-btn {
    font-family: inherit;
    font-size: 2.5em;
    margin: 0.5em 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: none;
    outline: none;
  }
  .menu-btn:hover {
    color: rgb(77, 122, 168);
    filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 24px rgb(255, 255, 255));
  }