body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
          background: linear-gradient(to bottom, #607788, #445566);
            color: white;
           //background: url('/storage/emulated/0/borana/pictures/tarkaanfii.jpg') no-repeat center center fixed;
           background-size: cover;

           }

        header, footer{background: linear-gradient(to bottom, #0060ad, #0060bd);

           background-color: rgba(0, 0, 0, 0.7);
            color: white;
            text-align: center;
            padding:1px;
            backdrop-filter: blur(10px);
          
         // background: url('/storage/emulated/0/pictures/facebook/hawi~2.jpg') no-repeat center center fixed;
           background-size: cover;
             }
  
        header {
            position: sticky;
            top: 0;
       }
  footer{background-color:#333;}

        main {
            flex: 1;
            padding: 10px;
            //text-align: center;
            overflow-y: auto;
       background: rgba(0, 0, 0, 0.5);
            border-radius: none;
            margin: 0px;
        }

        .navigation {
            display: flex;
            justify-content: center;
            position: fixed;
            bottom: 0;
            width: 100%;
           background-color:rgba(0, 0, 0, 0.7);
            padding: 1px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(10px);
     background: linear-gradient(to bottom, #0060ad, #0060bd);

        }

        .navigation button {
           background-color:#006fff;
            color: #ffff00;
            border: none;
            padding: 0.5rem 1rem;
            margin: 0.5rem;
            cursor: pointer;
            border-radius: 50%;
            font-size: 1.2rem;
        }

        .navigation button:disabled {
            background-color: #999;
            cursor: not-allowed;
        opacity:60%;}

        .navigation span {
            display: flex;
            align-items: center;
            font-size: 1rem;
            color: #ffff00;
        }

        .unit-content {
           display:none;
        }

        .unit-content.active {
            display: block;
        }
  #book-title{
    font-size:12px;
    padding:0 0px 0 0px;
    color:#fff;
  }
  #author{font-size:10px;
    padding:0 0px 0 0px;
    color:#ffff00;}
  

 .introductions li{
   font-size:12px;
   font-weight:bold;
   //display:block;
   padding:15px 5px;
color:#ff00ff; }
  p{line-height:1.8;}
  .first-page{color:#ffff00;
    display:block;
   padding-bottom:50px;}
  ul li{text-decoration:none;
    color:; font-size:12px;
    font-weight:bold;
    list-style-type:none;
    padding:8px 5px;
  }
   .unitTopic{color:#ffff00;}

  .nextPage{padding-top:50px;}

   
.center{text-align:center;
}
   
  ol li{padding:8px 5px;
}
    .introductions li:hover{color:#ffff00;}

 
  
  
  
  
  
       .bars {
  display: block;
  position: absolute;
  right:15px;
  top: 30px;}
.bar a{color:;
}
  
.bar1, .bar2, .bar3{
  width: 18px;
  height: 2px;
  background-color:#ffffff;
  margin: 4px 0 0 0;
  transition: 0.6s;
}
.riba .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.riba .bar2 {opacity: 0;}

.riba .bar3 {
  transform: translate(0, -3px) rotate(45deg);
}
  
  
  
  
  .sec{top:58px; 
  overflow-x:hidden;
  display:block; align-items:center;
  height:0; 
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:0px;}
  
  .sec a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
    transition:0.6s;
  color:#644;}
  
  
  .cse{top:58px;
  overflow-x:auto;
  display:block; align-items:center;
  height:100%;
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:20px;
 }
  .cse a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
  transition:0.6s;}

#calculator{display:none; padding: 20px 0 10px 10px;}
  
    #calculator a{color:#183;
     display:block;      
     padding:10px 0px 20px 10px; font-size:15px;
    }
     #calculator a i{margin-right:10px; color:#183;}
#calculator a:hover{color:purple;}
  .sec a:hover{color:purple;}