@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;500;600&display=swap');

*{
    font-family: 'Cairo', sans-serif;
}
:root{
    --first-color :rgb(26, 21, 21) ;
    --second-color :rgb(130, 130, 130) ;
}
a,a:hover{
    text-decoration: none;
}

body{
    background: #f3f3f3;
}
#side-area{
    background: var(--first-color);
    color: white;
    padding: 30px 40px;
}
#side-area h4{
    text-align: center;
    margin-bottom: 30px;


}
#side-area ul{
    list-style: none;
    padding: 0;
}
#side-area ul li{
    background: var(--second-color);
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 4px;
}
#side-area ul li:hover{
    background: #b5b5b5;
}
#side-area ul li a {
    color: white;
    font-size: 18px;
}
#side-area #menu li{
    background: #525252;
    margin-right: 10px;
}
#side-area #menu li:hover{
    background: #b5b5b5;
}
#side-area #logo li{
    background: #525252;
    margin-right: 10px;
}
#side-area #logo li:hover{
    background: #b5b5b5;
}
/* start style category */
.add-category{
    align-items: center;
     margin: 50px;
}
.add-category label{
    margin-bottom: 10px;
}
.add-category input select{
    margin: 10px 0;
}
.add-category button{
    margin: 10px;
}
.add-category  h4{
    text-align: center;
    margin-bottom: 15px;
}
.btn-custom{
    background: var(--first-color);
    color: white;
    width: 120px;
    border:1px solid var(--first-color) ;
    font-size: 15px;
}
.btn-custom:hover{
    background: #3a2f2f;
    color:#fff;
}
table tr:first-child{
    background: var(--first-color);
    color: #fff;
}
table tr th {
    border: 1px solid rgb(131, 131, 131);
}
table tr td {
    border: 1px solid rgb(147, 147, 147);

}
table tr{
    text-align: center;
    border: 1px solid rgb(147, 147, 147);

     }

/* end style category */


/* start style post */
.display-post h4{
margin-bottom:20px ;
text-align: center;
align-items: center;
}
/* end style post */



 /* start style login */
.login input {
    width: 50%;
}
 /* end style login */