Wikipedia:Kateb Maktub/styles.css

.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 20px; }

.span-c6 { grid-column: span 6 / auto; }

.span-c5 { grid-column: span 5 / auto; }

.span-c4 { grid-column: span 4 / auto; }

.span-c3 { grid-column: span 3 / auto; } .span-c2 { grid-column: span 2 / auto; }

.span-r3 { grid-row: span 2 / auto; }

@media screen and (max-width: 675px) { .grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; }

.span-c6 { grid-column: auto; }

.span-c5 { grid-column: auto; }

.span-c4 { grid-column: auto; }

.span-c3 { grid-column: auto; } .span-c2 { grid-column: auto; }

.span-r3 { grid-row: auto; }

.nav-links { flex-direction: column; } }

.title-card { vertical-align: top; background: #fff; color: #000; border-radius: 2px; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11); border-bottom: 15px solid #c8a261; border-top: 10px solid #c8a261; }

.title-text { font-size: 20px; font-weight: normal; text-align: center; color: #c8a261; line-height: 1.5em; padding: 5px; } .title-text2 { font-size: 40px; font-weight: bold; text-align: center; color: #c8a261; line-height: 1.5em; }

.card { display: block; padding: 10px; background: #fff; color: #000; border-radius: 2px; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11); border-top: 10px solid #c8a261; }

.card:hover { border-top: 15px solid #dddddd; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21); }

.sec-title { display: block; font-size: 20px; color: #000; font-weight: bold; margin: 5px; padding: 5px; }

.nav-links { display: flex; list-style: none; width: 100%; margin: auto; padding: 10px; justify-content: center; align-items: center; cursor: pointer; }

.nav-links ul a { text-decoration: none; }

.nav ul li { border: 1px solid #e0e0e0; border-radius: 2px; padding: 5px; min-width: 150px; text-align: center; font-size: 105%; font-weight: bold; margin: 5px; }

.nav ul li:hover { background: #dddddd; }

li.content-title:hover { width: 200px; background: #007bff; color: white; transition-duration: 0.5s; }

li.content-title a { color: #000; }

li.content-title.green-b { background: #dddddd; }

.content-title.green-b a { color: white; }

li.content-title.red-b { background: #da4453; color: white; }

.content-title.red-b a { color: white; }

li.content-title.red-b:hover { width: 210px; background: silver; color: white; transition-duration: 0.5s; }

.nav p { font-family: "Droid Arabic Kufi", sans-serif; font-size: 35px; font-weight: bold; text-align: center; line-height: 5px; }

.footer { background: #c8a261; padding: 10px; border-radius: 2px; }

.num-card { display: block; background: #c8a261; border-radius: 2px; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11); color: #000; }

.num-card:hover { box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21); }

.num-title { display: block; font-size: 14px; color: #000; margin: 5px; padding: 5px; text-align: center; background: #dddddd; }

.num-big { margin: 5px; padding: 15px; font-family: "Droid Arabic Kufi", sans-serif; text-align: center; font-size: 40px; font-weight: bold; }

.cat { width: 100%; margin: auto; padding: 10px; }

.cat ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.cat ul li a { display: inline-block; background: #fff; border: 1px solid #e0e0e0; border-radius: 2px; padding: 5px; min-width: 200px; text-align: center; font-size: 95%; margin: 2px 5px; cursor: pointer; }

.cat .mw-selflink { background: #dddddd; color: #ffffff; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21); }

.cat ul li a:hover { background: #dddddd; color: #ffffff; box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21); transition-duration: 0.5s; }