body {
    margin:0;
    }
    
    .background{
      width: 100vw;
    }

    body {
        margin: 0;
        padding: 0;
        background-image: url("https://res.cloudinary.com/dbpmxkrgz/image/upload/v1685914999/Sanaa%27s%20World/About-Sasral.png");
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .links {
        position: fixed;
        left: 10px;
        top: 20px;
        display: flex;
        flex-direction: column;
        font-family: Garamond, serif;
        color: #FFF9E3;
        font-size:x-large;
        margin-bottom: 10px;
        text-decoration: none;
      }
      .links a {
        color: #FFF9E3;
        text-decoration: none;
      }
      
      .links a:hover {
        text-decoration: none;
      }

      .About {
        position: fixed;
        left: 20%;
        top:9%;
        font-family: Garamond, serif;
        color: #3c7089;
        font-size: 55px;
      }

      .Abouttext {
        background-color: #3c7089;
        
       position: fixed;
        left: 20px;
        bottom: 20px;
        width: 90vh;
        height: 60%;
        overflow: scroll;
        margin: 0 auto;
        text-align: start;
      }
 
   
      .paragraph {
        font-family: Garamond, serif;
        color:#FFF9E3;
        font-size: 3.5vh;
        margin-left: 15px;
        margin-right: 5px;
        text-decoration: none;
        color: #FFF9E3;
      }
      
      h2 {
        font-family: Garamond, serif;
        color: #FFF9E3;
        margin-left: 15px;
        margin-right: 5px;

      }
      
      .paragraph a {
        color: #FFF9E3;
        text-decoration: underline;
      }
      

      .booklist li {
        font-family: Garamond; serif;
        color: #FFF9E3;
        font-size: 3vh;
        margin-left: 10px;
      }
    
    .caption {
      font-family: Garamond; serif;
      color: #FFF9E3;
      font-size: 2.5vh;
      position: fixed;
      bottom: 2vh;
      right: 1vh;;
    }
 
    .modal {
      display: none;
      justify-content: center;
      position: fixed;
      margin-top: 15%;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
    
    }
    
    .modal.open {
      display: flex;
    }
    
    .modal-content {
      position: relative;
      background-color:#3c7089;
      margin: 20% auto; /* Adjust the top and bottom margin as needed */
      padding: 20px;
      max-width: 80%;
      max-height: 80vh; /* Add this line */
  overflow: auto; /* Add this line */
    }
    
   


    @media only screen and (max-width: 768px) {

      .Abouttext{
        display: none;
      }

      .caption{
        font-family: Garamond, serif;
        position: fixed;
        bottom: 2vh;
        left: 2vh;
      }

      .paragraph{
        font-size: 2vh;
      }

      .booklist li {
        font-family: Garamond; serif;
        color: #FFF9E3;
        font-size: 2vh;
        margin-left: 10px;
      }
/* Styles for modal
.modal {
  display: none;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 80%;
  height: 100%;
  overflow: auto;
}

.modal.open {
  display: block;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 20% auto;
  padding: 20px;
  max-width: 80%;
}

.modal-text {
  /* Additional styling for modal content if needed */
} */