* {
  box-sizing: border-box;
}

/* text styling */
@font-face {
  font-family: "comicbold";
  src: url(fonts/ComicMono-Bold.ttf);
}

@font-face {
  font-family: "comic";
  src: url(fonts/ComicMono.ttf);
}

a {
  text-decoration: none;
  text-transform: capitalize;
}

a:link,
a:visited {
  color: rgb(125, 125, 22);
}

a:hover,
a:active {
  color: rgb(234, 85, 74);
}

h1~p {
  text-transform: capitalize;
  text-align: center;
  letter-spacing: 2px;
  color: black;
}

ul {
  list-style: none;
  line-height: 2;
  color: rgb(234, 85, 74)
}

h1 {
  font-weight: 900;
  text-decoration: underline;
  letter-spacing: -3.0px;
  font-size: 62px;
  font-family: 'comicbold', 'Courier New', Courier, monospace;
  color: rgb(234, 85, 74)
}

.karibu,
/* sanaa.html */
.sanaa,
/* maktaba.html */
.maktaba {
  text-align: center;
  line-height: 1.5;
}

h3 {
  font-weight: 500;
  text-decoration: underline;
  text-align: center;
  line-height: 1.5;
  letter-spacing: -1.5px;
  font-family: 'comic', 'Courier New', Courier, monospace;
  color: rgb(234, 85, 74)
}

.footer {
  text-align: center;
  font-size: 15px;
  color: rgb(100, 100, 95);
}

p {
  line-height: 2;
  font-size: 16px;
  color: rgb(49, 49, 49);
}

figcaption {
  font-style: oblique 30deg;
  font-size: 10px;
  color: rgb(100, 100, 95);

}

/* box model stylings */

/* previous purple color rgb(195, 154, 234) */
body {
  background-color: rgb(124, 172, 241);
  cursor: crosshair;
}

p::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
}

h1::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
}

a::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
}

div::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
}

table::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
}

/* img::selection {
  background-color: rgb(194, 128, 139);
  color: rgb(62, 34, 34);
} */


/* udhibiti wa flexbox/flexbox control */
.mwiliflex {
  display: flex;
  flex-direction: row;
}

aside {
  order: 1;
  flex-basis: 300px;
}

main {
  order: 2;
  flex-shrink: 2;
}

@media (max-width: 600px) {
  .mwiliflex {
    flex-direction: column;
  }
}

/* -------- Mtindo wa Kurasa ya faharasa/Index page styling -------- */
#index {
  background-image: url(img/moyo3-80px.gif);
  /* background-repeat: space repeat; */
}

.index {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}


/* -------- Mtindo wa Kurasa ya faharasa/Index page styling -------- */

h1 {
  margin-bottom: 0;
}

.kujitanguliza,
.sanaayangu,
.maktabayangu,
.maandishiyangu,
/* sanaa.html  */
.sanaacont,
/* maktaba.html */
.maktaba-container,
/* tahakiki */
.tahakiki {
  background-color: rgb(124, 172, 241);
  border-radius: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
}

.kujitangulizakichwa,
.sanaayangukichwa,
.maktabayangukichwa,
.maandishiyangukichwa,
/* sanaa.html */
.sanaacont,
/* maktaba.html */
.maktaba-container,
/* tahakiki */
.tahakiki {
  padding-top: 12px;
}

.michoro {
  display: flex;
  overflow-x: scroll;

}

img {
  border-radius: 20px;
}

.footer {
  background-color: rgb(192, 236, 255);
  border-radius: 0 0 20px 20px;
  margin-top: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.orodhaurambazaji {
  padding-left: 0;
}

/* .urambazaji {
  display: flex;
  flex-direction: column;
} */

.mawaidha {
  padding-top: 12px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  background-color: rgb(192, 236, 255);
  border-radius: 20px 20px 0 0;
}

figure {
  margin-left: 20px;
  margin-right: 20px;
}

/* Maktaba.html table styling */
table,
tr,
th,
td,
caption {
  border: 2px solid black;
  font-family: "Courier New", Courier, monospace;
  border-collapse: collapse;
  padding: 0.5rem;
  background-color: rgb(124, 172, 241);
}

.maktabas1 {
  overflow-x: auto;
}

tr:nth-child(2n) {
  background-color: gray;
}