*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
body{
    background-color: rgb(91, 11, 167);
    background-image: url(images/bg.png);
    background-repeat: repeat;
}
.container{
    background-color: white;
    width: 52%;
    margin: auto;
    border: 6px rgb(148, 76, 148) solid
    
}
.icon {
    color: azure;
    line-height: 100px;
    padding-right: 20px;
    
}
.header img{
    padding: 5px;
}
.menu{
    text-align: center;
    display: flex;
    background-color: brown;
    margin-right: 29px;
    margin: 5px;
    
}
.menu ul li a{
    text-decoration: none;
    color: white;
    font-size: 25px;
    padding: 10px;
     line-height: 60px;
    
}
.menu ul li{
    list-style-type: none;
    float: left;
    margin-top: 5px;
    
}

.menu ul li:hover{
    background-color: rgb(194, 112, 112);
    color: rgb(214, 214, 240);
   
}
.topicerik h2{
    margin-left: 5px;
}
.topicerik hr{
    margin: 1;
}
.kitaplar{
    display: flex;
}
.kitap{
    width: 20%;
    border: 1px black solid;
    margin: 1%;
}
.kitap p{
    background-color: rgb(91, 13, 165);
    color: azure;
    text-align: center;
}
.kitap img{
    width: 100%;
}
.yazarlar{
    display: flex;
}
.yazar{
    width: 20%;
    border: 1px blueviolet solid;
    margin: 3%;
    padding: 5px;
    border-radius: 2%;
}
.yazar p{
    background-color: brown;
    text-align: center;
    color: white;
}
.yazar img{
    width: 100%;
}
.bottomicerik h2{
    margin-left: 5px;

}
.menubaricon{
    display: none;
}
.footer{
    display: flex;
    justify-content: space-around;
    background-color: brown;
    margin-top: 2px;
}
.altmenu ul li a{
    text-decoration: none;
    color: black;
}
.altmenu ul li{
    list-style-type: none;
    margin: 10px;
}
.adres p{
    margin: 10px;
}
.logolar{
    margin: 20px;
}
.logolar i{
    margin: 5px;
}
@media screen and (max-width:770px) {
    .container{
        width: 100%;
        
    }
    .header img{
        width: 98%;
    }
    .menu{
        display: block;
    }
    .menu ul li{
        display: none;
    }
    .menubaricon{
        display: block;
    }
    .menu.responsive ul li{
        display: block;
        float: none;
        line-height: 40px;
        
    }
    .kitap{
        width: 98%;
    }
    .kitaplar{
        flex-direction: column;
        text-align: center;
        
    }
    .yazar{
        width: 97%;
    }
    .yazarlar{
        flex-direction: column;
    }
    
}