/* Color Theory */
body {
  background-image: url(Images/Branding/Logos/Linkedinpfimage.png);
  background-repeat: no-repeat;
  background-size: 55% cover;
  background-position: right, top;
}

h1 {
  text-align: center;
  /* margin: 40px; */
  font-size:xx-large;
  font-family: bowlby_one;
  color: crimson;
}
h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16pt;
  color: rgb(246, 197, 35);
  margin: 0px 0px 0px 26px;
  padding: 0;
  font-weight: 600;
}
h3 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ff0000;
  margin: auto;
  padding: 3px;
}
b {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: rgb(92,2,1);;
}

.navbar {
  position: relative;
}



a.article:link {color:#ff0000;}
a.article:visited {color:rgb(242, 171, 5);}
a.article:hover {color:#ff0000;}

ol li:hover {
  background: none;
}
 a.a:link {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}

table {
  /* border: solid 2px rgb(242, 171, 5); */
  /* padding: 1px; */
  margin: auto;
  background-color: rgb(92,2,1);
  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
  /* font-size: medium; */
  border-collapse: collapse;
  border-spacing: 4px;
  table-layout: auto;
  width: 98%;
  border-collapse: separate;
}

td {
  background-color: #f1f1f1;
  /* color:#f1f1f1; */
  font-size: 11pt;
  text-align: left;
  line-height: 1.2;
  padding: 0px 0px 13px 0px;
}
th {
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: bold;
}

table p {
  color: #a01111;
}
table h3 {
  color: #a01111;
}
p {
  color: #f1f1f1;
  margin: 0px 26px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 10.5pt;
  }

 tbody li p {color: #070000;margin: 0px 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
  }

#wrapper {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 5px;
  background-color: rgb(92, 2, 1);
  grid-auto-rows: 275px, 1fr, minmax(150px, 1fr);
  min-width: 500px;
  padding: -0.5rem;
  width: 59%;
  /* border: 1px solid rgb(92,2,1); */
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  grid-column-gap: 3px;
  grid-template-rows: 1fr auto auto auto;
}
#wrapper > div {
  align-items: center;
  padding: 20px 0;
  padding: 0.5rem;
  
}

#trad-Mod {
  /* border-collapse: separate; */
  border-spacing: 0.5rem;
  grid-column: 1/3;
  background-color: rgb(92,2,1);
}
#key {
  border: solid #f1f1f1;
  /* border-radius: .5rem; */
  background-color: #f1f1f1;
  line-height: 1.2;
  margin: 10px 18px;
  height: 96%;
}
#key p {
  color:#070000;
  padding: 2px 0px;
}
#key h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color:#a01111;
}
#key h3 {
  color:#a01111;
}
#trad-Mod table {
  width: 83%;
}
.properties {
  margin: inherit;
  color:#a01111;
}

#hands {
text-align: center;
}

#trad-Mod {
  grid-column: 1/3;
  text-align: center;/* background-color: rgb(249 203 94); */
  margin: 0px 0px;
}
#trad-Mod h2 p {
  background-color: rgb(242, 171, 5);
  color: #f1f1f1;
}
#trad-Mod th {
  color:#ff0000;
  font-weight: bold;
}
#trad-Mod tbody p {
  color:#f1f1f1;
}
#trad-Mod tbody td {
  background-color: rgb(92, 2, 1);
}

#glossary {
  grid-column: 1/3;
  background-color: rgb(240, 231, 219);
}
#glossary h2 {
  color: #a01111;
  padding: 10px;
}

#scheme {
  grid-column: 1/3;
  text-align: left;
  grid-row: 3;
  grid-column: 2;
  width: 95%;
}

#scheme li {
  color: #f1f1f1;
  margin: 0px 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
}
#scheme p {
  color: rgb(240, 231, 219);

}

ol li {
  font-weight: 800;
  
}

#description p{
  color: #a01111;
  width: 62%;
  text-align: center;
  margin: auto;
}
#important {
  grid-column: 1/3;
  /* grid-row: 2; */
}




/* Color Article */

#container {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(150px, auto) minmax(150px, 1.5fr);
  gap: 5px;
  background-color: rgb(92, 2, 1);
  grid-auto-rows: 275px, 1fr, minmax(150px, 1fr);
  min-width: 500px;
  padding: -0.5rem;
  width: 68%;
  border: 1px solid black;
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  grid-column-gap: 3px;
  grid-template-rows: repeat(5, 198px);
  line-height: normal;
}
#container > div {
  align-items: center;
  /* padding: 20px 0; */
  /* padding: 0.5rem; */
  margin-block: auto;
}

#explained {
  /* background-color: rgb(231, 228, 228); */
  border-width: 100%;
  height: 70px;
  /* line-height: 1.6; */
  /* box-shadow: .5rem .5rem 1rem .25rem gray; */
  margin: 3rem auto;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 14pt;
  width: 68%;
}


.navbar ul li :where(.dropdownda, .dropdownfa) ul {
  display: block;
  margin: 10px;
  text-align: center;
}

.navbar ul li :where(.dropdownda, .dropdownfa) ul li {
  width: 200px;
  padding: 10px;
}

.dropdownda,
.dropdownfa {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #d0f0c0;
  z-index:999;
}

.navbar > ul > li:hover :where(.dropdownda, .dropdownfa) {
  display: block;
}

#review a:hover {
  text-decoration: none;
  color: #ffffff;
}

a:hover {
  color: #ffffff;
  
}

#typesofFonts p {
  color: rgb(92,2,1);
}
#serifImg {
    grid-column: 2;
}
#serif {
  /* grid-column: 1; */
  grid-row: 1;
}
#serifExample {
  grid-column: 3;
  /* line-height: normal; */
}
#sanSarifImg {grid-column: 2;grid-row: 2;}
#sanSarif {
  
}
#sanSarifExample {

}

#scriptImg {
  grid-column: 2
}
#script {
  grid-row: 3;
}
#scriptImgExample {grid-column: 3;}

#displayImg {
  grid-column: 2;
  /* grid-row: 3; */
}
#display {
  grid-row: 4;
}
#displayImgExample {grid-column: 3;}


#monospaceImg {grid-column: 2;}
#monospace {grid-row: 5;}
#monospaceImgExample {grid-column: 3;}


#handwrittenImg {grid-column: 2}
#handwritten {
    grid-row: 6;
}
#handwrittenImgExample {grid-column: 3;}


/* Article */

#mewContainer {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(150px, 1fr) minmax(150px, 1.5fr);
  gap: 5px;
  background-color: rgb(92, 2, 1);
  grid-auto-rows: 275px, 1fr, minmax(150px, 1fr);
  min-width: 500px;
  padding: -0.5rem;
  width: 60%;
  border: 1px solid black;
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  grid-column-gap: 3px;
  grid-template-rows: repeat(5, 179px);
  line-height: normal;
}
#mewContainer > div {
  align-items: center;
  /* padding: 20px 0; */
  /* padding: 0.5rem; */
  margin-block: auto;
}


#festContainer {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(150px, auto) minmax(150px, 1.5fr);
  gap: 5px;
  background-color: rgb(240, 231, 219);
  grid-auto-rows: 275px, 1fr, minmax(150px, 1fr);
  min-width: 500px;
  padding: -0.5rem;
  width: 60%;
  border: 1px solid black;
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  grid-column-gap: 3px;
  grid-template-rows: repeat(5, 179px);
  line-height: normal;
}
#festContainer > div {
  align-items: center;
  /* padding: 20px 0; */
  /* padding: 0.5rem; */
  margin-block: auto;
}
#festContainer  p { color: #070000;}
#festContainer #review p {margin: 0px 0px 0px 0px;}

table i {
  color: #a01111;
    margin: 0px 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
}


#results td > h3 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color:gray;
  margin: 11px 0px 10px 22px;
}

#cons {

}
#conclusion {grid-column: 1/4;grid-row: 5;}
#conclusion h3 {
color: #ffcc00;
}
#conclusion_2 {grid-column: 1/4;grid-row: 5;}
#conclusion_2 h3 {
  color: #a01111;
  }
  #conclusion_2 p a {color: #a01111;}
#mew {padding: 30px 0px 0px 32px;}

#best {
  /* border: solid; */
  margin: auto;
  width: 63%;
  text-align: left;
}
#best h2 {
 color: rgb(247 174 4);
}
#best p {
  color:#070000;
}
#review {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 10pt;
  grid-column: 2/4;
  line-height: 1.4;
  padding: 20px 0px 0px 33px;
}
#review a {
  color: rgb(249 203 94);
}
#review_2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 10pt;
  grid-column: 2/4;
  line-height: 1.4;
  padding: 20px 0px 0px 33px;
}
#review_2 a {
  color:#a01111;
}
#festival {padding: 23px 0px 0px 29px;}

#trends {
 /* mix-blend-mode: darken; */
 text-align: center;
}
#results {
  grid-column: 1/4;
  grid-row: 3;
}
#results table td a {
  color: #a01111;
}
#results2 {
  grid-column: 1/4;
  grid-row: 3;
}
#results2 table td a {
  color: #a01111;
}