/* Typography_Main */
body {
  background-image: url(Images/Branding/Logos/Linkedinpfimage.png);
  background-repeat: no-repeat;
  background-size: 55% cover;
  background-position: right, top;
}
@font-face {
  font-family: 'bowlby_one';
  src: url(Fonts/bowlby-one/bowlbyone-regular-webfont.woff2) format('woff2'),
       url(Fonts/bowlby-one/bowlbyone-regular-webfont.woff) format('woff'),
       url(Fonts/bowlby-one/bowlbyone-regular-webfont.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
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:rgb(92, 2, 1);
  margin: 11px 0px 10px 22px;
}

.navbar {
  position: relative;
}

a.article:link {color:#ff0000;}
a.article:visited {color:#0000ff;}
a.article:hover {color:#ffcc00;}

ol li:hover {
  background: none;
}

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

td {background-color: rgb(240, 231, 219);/* color:#f1f1f1; */font-size: 11pt;width: 50%;line-height: 1.2;padding: 0px 0px 13px 0px;}

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: 72%;
  border: 1px solid black;
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  grid-column-gap: 3px;

}
#wrapper > div {
  align-items: center;
  padding: 20px 0;
  padding: 0.5rem;
  
}

#typography {
  border-collapse: separate;
  border-spacing: 0.5rem;
  grid-column: 1/3;
  background-color: rgb(92,2,1);
}
#vital {
  border: solid #f1f1f1;
  border-radius: .5rem;
  background-color: #f1f1f1;
}
#vital p {
  color: rgb(92, 2, 1);
  padding: 5px;
}


#metal {
text-align: center;
}
#metal img {
  /* mix-blend-mode:multiply; */
}
#typeface {grid-column: 1/3;text-align: center;/* background-color: rgb(249 203 94); */}
#typeface h2 p {
  background-color: rgb(242, 171, 5);
  color: #f1f1f1;
}
#terms {grid-column: 1/3;background-color: #f1f1f1;}
#terms h2 {color: #a01111;padding: 10px;}

#font {
grid-column: 1/3;
text-align: left;
}
#font li {
  color: #f1f1f1;
  margin: 0px 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
}
#font p {
  color: #ffcc00;

}

ol li {
  font-weight: 800;
  
}
#logo {
  transform: rotate(2 turn);
}

/* Font Type Page */

#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;}


/* Typography 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;
}




/* Color Thory Article */

#spaceContainer {
  display: grid;
  grid-template-columns: minmax(150px, 2.5fr) 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;
}
#spaceContainer > div {
  align-items: center;
  /* padding: 20px 0; */
  /* padding: 0.5rem; */
  /* margin-block: auto; */
}
#space {
  width: 100%;
  padding: 15px 0px 0px 20px;
  text-align: center;
}

#assikoContainer {
  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;
}
#assikoContainer > div {
  align-items: center;
  /* padding: 20px 0; */
  /* padding: 0.5rem; */
  /* margin-block: auto; */
}
#assikoContainer  p { color: #070000;}
#assikoContainer #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;padding: 0px 0px 16px 0px;}
#conclusion h3 {
color: #ffcc00;
}
#conclusion_2 {grid-column: 1/4;grid-row: 5;margin: -5px 0px 18px 0px;}
#conclusion_2 h3 {
  color: #a01111;
  }
  #conclusion_2 p a {color: #a01111;}
#creative {/* padding: 30px 0px 0px 32px; */margin: auto;text-align: center;}

#warmCool {
  /* border: solid; */
  margin: auto;
  width: 63%;
  text-align: left;
}
#warmCool h2 {
 color: rgb(247 174 4);
}
#warmCool 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 0px;
}
#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: 17px 0px 0px 0px;
}
#review_2 a {
  color:#a01111;
}
#festival {padding: 23px 0px 0px 29px;}

#siko {
 /* mix-blend-mode: darken; */
 text-align: center;
 padding: 15px 0px 0px 20px;
}
#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;
}