From Meta, a Wikimedia project coordination wiki
.wcd-hero {
background:linear-gradient(to bottom,#FFF,#c1d2e5);
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
padding-bottom:5px;
}
.wcd-hero ul {
gap: 5px;
list-style-type:none;
list-style-image: none;
display: flex; /* grid-column: 2; */
flex-wrap:wrap;
align-items: flex-start;
flex-direction: row;
margin:5px;
}
.wcd-hero ul li a {
font-family: "Tajawal",sans-serif;
color:#000000;
display: flex;
align-items: center;
padding: 8px 20px;
font-weight:600;
text-decoration: none;
}
.wcd-hero ul li {
border-radius: 50vh ;
}
.wcd-hero ul li:hover {
background: #42c181;
}
.wcd-hero ul li:hover a {
color:white;
}
.wcd-hero ul li.selected {
background: #339966;
}
.wcd-hero ul li.selected a {
color:white;
}
.wcd-hero .header{
display:flex;
flex-direction:row;
width:100%;
gap:10px;
align-items:center;
margin-top:20px;
}
.wcd-hero .header .logo {
width:180px;
height:150px;
background:url("https://upload.wikimedia.org/wikipedia/commons/0/0f/Circle_-_Darul_Uloom_Deoband.png") no-repeat;
background-position:center;
background-size:150px;
}
.wcd-hero .header .title{
flex:1;
color:#405070;
}
.wcd-hero .header div {
text-align:center;
}
@media (max-width: 800px) {
.wcd-hero .header {
flex-direction:column;
}
.wcd-hero .header .title {
display:none;
}
}