body,html{
    width: 100%;
    margin: 0;
    margin-top: 0;
    font-size: 18px;
    
}
body{
    font-family: 'Noto sans', sans-serif;

}
@media Queryscreen and (max-width: 600px) {
    body {
        font-size: 16px;
        padding: 10px;
    }
    container{
        flex-direction: column;
    }
    nav {
        display: none;
    }
}

   #slider{
    width: 100%;
    height: 430px;
    background-size: cover;
    background-position: center;
    text-align: center;
    margin-top: 85px;
    margin-bottom: -20px;
    position: relative;
    animation: slideAnimation 20s infinite;
    padding-top: 90px;

   } 
   @keyframes slideAnimation{
    0% {background-image:  url('../images/bookshop.jpg');}
    25% {background-image: url('../images/kampala.jpg');}
    50% {background-image:  url('../images/Malawi.png');}
    75% {background-image:  url('../images/harare.jpeg');}
    100% {background-image:  url('../images/Kisumu.webp');}
   }


  #slider h3{
    color: whitesmoke;
    width: 360px;
    height: 300px;
    font-size: 50px;
    margin-left: 30px;
    margin-top: 25px;
    background-color: #d9001957;
    
  }
  #slider button{ 
    padding: 15px;
    color: black;
    border-radius: 10px;
    }
    .button{
        margin-bottom: 80px;
    }
        #slider button:hover{
            color: white;
            background-color: #1891f4;
           
        }
        #more{
           text-align: center; 
           margin-bottom: 20px;
        }
        #more{
            background-image: url('../images/background.jpg');
            background-size: cover;
            background-position: center;
            margin-top: -20px;
            margin-bottom: 0;
        }

        .twodivs{
            display: flex;
            align-items: center;
            justify-items: center;
            width: 100%;
            
        }
        .twodivs p{
            width: 100%;
           text-align: start;
           margin-left: 20px;
           margin-right: -20px;
        }
        #charism{
            width: 50%;
            margin-right: 100px;
            margin-left: 50px;
            text-align: center;
        }
        #vision{
            width: 50%;
            align-items: center;
            margin-right: 80px;
        }
        #charism img{
            width: 80px;
            height: 80px;
        }
        #vision img{
           width: 80px;
            height: 80px; 

        }
        button{ 
        padding: 10px;
        color: black;
        border-radius: 10px;
        }
        button:hover{
            color: white;
            background-color: #1891f4;
        }
            #mission{
            display: flex;
            width: 100%;
        }
        #mission img{
            width: 300px;
            margin-left: 50px;
        }
        .desc h5{
            font-size: larger;
            font-family: 'Times New Roman', Times, serif;
        }
        .desc p{
         margin-left: 100px;
         margin-right: 80px;   
        }