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, #685858, #584848);
            color: white;
           background: url('/storage/emulated/0/borana/pictures/daandii5.jpg') no-repeat center center fixed;
           background-size: cover;


           }

        header, footer{background: linear-gradient(to bottom, #303030, #225522);

           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;
          z-index:1;
       }
  footer{background-color:#333;}

        main {
            flex: 1;
            padding: 10px;
            //text-align: center;
            overflow-y: auto;
         background: rgba(0, 0, 0, 0.7);
            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, #225522, #303030);

        }

        .navigation button {
           background-color:#006fff;
            color: #ff00ff;
            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: #ff00ff;
        }

        .unit-content {
           display:none;
        }

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

 .introductions li{
   font-size:12px;
   font-weight:bold;
   //display:block;
   padding:15px 5px;
color:#ffff00; }
  p{line-height:1.8;}
  .first-page{
    display:block;

 padding-bottom:50px;}
  ul li{text-decoration:none;
    color:; font-size:12px;
    font-weight:bold;
    list-style-type:none;
    padding:8px 5px;
  }
  h3,h4{text-align:center;}
 
    .unitTopic{color:#ff00ff;}

  .nextPage{padding-top:50px;}

  .constant{font-size:10px;
    color:#ccc;
  }
  .border{border: 1px solid #fff;
    padding:10px;
  }
  .links a{ display:block;
 padding:10px 0 10px 20px;
    text-decoration:none;
  color:#ff00ff;}
 .links i{color:#fff;
 }
  .center{text-align:center;
}
   
  ol li{padding:8px 5px;
}
    .introductions li:hover{color:#ff00ff;}

  
  

        ul.stars {
            list-style-type: none;
            padding: 0;
        }
        ul.stars li {
            position: relative;
            padding-left: 40px;
        }
        ul.stars li:before {
            content: "\2605";
            position: absolute;
            left: 20px;
        }


        ul.triangleBullet {
            list-style-type: none;
            padding: 0;
        }
        ul.triangleBullet li {
            position: relative;
            padding-left: 40px;
        }
        ul.triangleBullet li:before {
            content: "\2023";
            position: absolute;
            left: 20px;
        }




    
  
          ul.checkMark {
            list-style-type: none;
            padding: 0;
        }
        ul.checkMark li {
            position: relative;
            padding-left: 40px;
        }
        ul.checkMark li:before {
            content: "\2713";
            position: absolute;
            left: 20px;
        }



          ul.square {
            list-style-type: none;
            padding: 0;
        }
        ul.square li {
            position: relative;
            padding-left: 40px;
        }
        ul.square li:before {
            content: "\25A0";
            position: absolute;
            left: 20px;
        }

  
          ul.circleBullet {
            list-style-type: none;
            padding: 0;
        }
        ul.circleBullet li {
            position: relative;
            padding-left: 40px;
        }
        ul.circleBullet li:before {
            content: "\2022";
            position: absolute;
            left: 20px;
        }



          ul.thumb {
            list-style-type: none;
            padding: 0;
        }
        ul.thumb li {
            position: relative;
            padding-left: 40px;
        }
        ul.thumb li:before {
            content: "\261E";
            position: absolute;
            left: 20px;
        }
  
  
  
  
       .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;}