html, body,h1,h2,h3,p,div,ul,il {
    margin: 0; padding: 0;
}

h1 { font-size: 21pt; line-height: 1.1em; font-weight: 700; padding:12pt 0 12pt 0; }
h1 b { font-weight: 500;}
h2 { font-size: 18pt; font-weight: 700; padding:10pt 0 12pt 0; }
h3 { font-size: 12pt; font-weight: 700; padding:0 0 12pt 0; }
p { padding:0 0 12pt 0; line-height: 1.3em;}

.hich_news {
  border-bottom: 1px solid #999;
  position:sticky;
  text-align: left;
  top: 0;
  height: 48pt;
  line-height: 48pt;
  margin-bottom: 10pt;
  background: white;
  z-index: 20;
}
.hich_news>a { 
  background-color: #00b400; color: white; 
  float: left;
  padding-right: 18pt;
  font-weight: 400;
  font-size: 18pt;
  display: block;
}
.hich_news img { height: 48pt; vertical-align: middle; float: left; }
.left { text-align: left;}
.signature { 
  overflow: hidden;
  margin: 0 6pt 9pt 0;
  font-size: 9pt;
}
.signature img { border-radius: 20pt; height: 18pt; vertical-align: middle; margin-right: 4pt; }
.article_image { float: right; width: 140pt; border-radius: 5pt; margin:8pt;}

.HICH-News h1,.HICH-News h2,.HICH-News h3,.HICH-News p {
  padding-right: 12pt;
  padding-left: 12pt;
  }

body, input, textarea {
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12pt;
    margin: 0 auto 0 auto;
    text-align: center;
    font-weight: 300;
    color: #333;
}
a { 
  text-decoration: none; color: #263; font-weight: 300;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
a:hover { text-decoration: none; color: #030; }


b { font-weight: 500; font-size: 140%; }
small { font-weight: 100; }

pre { text-align:left }

.user { 
  position: fixed; 
  z-index: 10;
  top: 10pt; left: -400pt; 
  background-color: darkgreen; line-height: 1.1em; 
  width: calc( 100% - 20pt );
  max-width: 300pt;
  color: white;
  text-align: left;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  display: flex;
  height: 100pt;
  overflow: hidden;
  border-radius: 10pt;
  /* From https://css.glass */
  background: rgba(13,21,23,1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}
.user>div { font-size: 80%;}

.user>div>img { width: auto; height: 100pt; object-fit:cover; }
.user b { font-weight: 500; font-size: 160%; display: block; margin-bottom: 12pt; line-height: 1.3em; }
.user b span { white-space: nowrap; }
.user .coin {padding-bottom: 3pt; vertical-align: middle; width: auto; height: 1em;}

.user u { 
    font-family: monospace; font-style: normal; 
    color: #EFD;
    text-decoration: none;
    border-radius:2pt;
    border-radius: 4pt;
}
.user>.user_info { margin: 3pt 6pt 6pt 12pt;}


.main_image {
  position: relative;
  text-align: left;
  text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background: #444 ;
  background-image:linear-gradient(45deg, rgba(13,21,23,1) 0%, rgba(13,21,23,0.9) 15%, rgba(0,212,255,0) 100%), url(/gfx/gbh.jpg);
  background-size: cover;
  background-position: bottom right;
  padding: 300pt 15pt 20pt 15pt;
  text-shadow: 2pt 2pt 12pt rgba(0, 0, 0, 0.78);
}

.main_image b {  margin-left: 20pt; color: white; font-weight: 300; font-size: 32pt;}
.main_image ul{ margin-left: 20pt; }
.main_image ul li { display: inline; margin-right: 5pt;  }
.main_image ul li a { color: white; line-height: 1.6em;}
.main_image ul li a:hover { color: lightgreen; text-decoration: underline; }

.main { margin: 0 0 20px 0;}

.install { padding: 10pt; }

.install img {
    border-radius: 100pt;
    background-color: black;
    padding: 4pt 16pt 4pt 16pt;
    width: 100pt; margin: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
  }
  
.install img:hover {
    transform: scale(1.1);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }

  .qr {
    padding: 10pt;
    margin: 10pt;
  }

  footer {
    padding: 22pt;
    border-top: 1pt solid #EEE;
    text-align: center;
  }

  nav { padding: 10pt 0 20pt 0; line-height: 1.8em; }
  footer li { display: inline; padding: 3pt;}

  section.posts {
    width: 100%;
    overflow: hidden;
    padding-bottom: 16pt;
    margin-bottom: 16pt;
  }

  section.posts>div {
    animation: scrollText 400s infinite linear;
    display: flex;
    gap:20px;
  }
  section.posts>div>article { 
    min-width: 240px; text-align: left;
    border-radius: 10pt;
    overflow: hidden;
    background-color: #667; 
    color:white
  }
  section.posts>div>article>div { 
    padding: 6pt 12pt 6pt 12pt; 
    font-size: 10pt; 
    line-height: 1.2em;
  }
  section.posts>div>article img { 
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
  }
  section.posts>div>article:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  } 
  section.posts>div>article a { color: white;}



  section.mods {
    width: 100%;
    overflow: auto;
    padding-bottom: 10pt;
    margin-bottom: 10pt;
  }

  section.mods>div>article img:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} 

  section.mods>div {
    display: flex;
    gap:20px;
    align-items: flex-start;
    justify-content: center;
  }
  section.mods>div>article { 
    min-width: 120px; width: 120px; text-align: center;
    border-radius: 10pt;
    overflow: hidden;
  }
  section.mods>div>article>div { 
    padding: 6pt 12pt 6pt 12pt; 
    font-size: 10pt; 
    line-height: 1.2em;
  }
  section.mods>div>article img { 
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: 200pt;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
  }

  section.mods>div>article a { color: black;}


/*evaluation*/
.red { background-color: darkred; color: white;}
.yellow { background-color: orange;  color: white;}
.green { background-color: darkgreen;  color: white;}
.teal { background-color: teal;  color: white;}
.purple { background-color: purple; color: white; }
.eval i { float: left; font-size: 160%; }

.eval {
  padding: 15pt; margin-bottom: 15px; z-index: 10;
  box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
  padding-right: 20pt;
  line-height: 1.6em;
  font-weight: 400;
  font-size: 160%;
  text-align: right;
  position: sticky; top: 0px;
}

.simle_doc { padding: 10pt;}
.simle_doc { text-align: left;  }
.simle_doc p { padding-bottom: 10pt;}
.simle_doc p b { font-weight: 700;}
.simle_doc .exp { padding: 0 10pt 10pt 10pt;}
.simle_doc .hint { padding: 8pt; margin: 10pt 0 10pt 0; background-color: rgba(255, 223, 134, 0.3); border-radius: 3pt; }
.simle_doc .hint h2 { color: maroon;}

/*universal post*/
.post_rev_holer {
  box-shadow: 0 1px 8px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
  margin: 20pt 0 10pt 0;
  background-color: rgba(150, 150, 150, 0.2);
}
.exp_in_post { 
  text-align: right; background-color: darkred; color: white;
  display: flex;
  justify-content: flex-end;
}
.exp_in_post p, .exp_in_post b { font-size: 90%; padding: 10px 15px 10px 15px; display: block}
.exp_in_post b::first-line { text-transform: uppercase; font-size: 40%; line-height: 1.4em;}
.exp_in_post b { 
  text-align: center; font-size: 200%; background-color: black; font-weight: 700; white-space: nowrap; 
}
.exp_in_post b.grade1 { background-color: red; }
.exp_in_post b.grade4 { background-color: red;}
.exp_in_post b.grade5 { background-color: orange;}
.exp_in_post b.grade6 { background-color: darkgreen;}
.exp_in_post b.grade7 { background-color: teal;}


.post_preview { 
  text-align: left;
  clear: both;
  font-size: 12px; width: calc(100%-20pt);
  padding: 10pt;
} 
.post_head { height: 80px; padding: 10px;}
.post_head::first-line { font-size: 200%; font-weight: 400; line-height: 1.3em;}
  .post_head .post_avt { border-radius: 70px; width: 70px; height: 70px; margin-right: 20px; float: left; }
  .post_head .post_flag { float: left; margin-left: -36px; margin-right: 12px;}
.post_title { font-size: 180%; padding: 10px 5px 5px 5px; font-weight: 500; text-align: left; }
.post_foot {  padding: 10px 0 5px 0; font-weight: 300; font-size: 13pt; text-align: right; color: #666; }
.post_foot i { margin-right: 10px;}

.post_main_1,.post_main_5 { display: flex; gap: 2px; justify-content:center }
.post_main_1>div,.post_main_5>div { flex-grow:1; position: relative; }
.post_main_1>div>div,.post_main_5>div>div {border-radius: 0 0 5px 5px; text-align: center; width: 92%; font-weight: 400; color: white; padding: 4%; position: absolute; bottom: 3px; left: 0; background-color: rgba(0, 0, 0, 0.4);}
.post_main_1 img,.post_main_5 video { border-radius: 5px; width: 100%;}

.post_main_12, .post_main_42 { display: flex; gap: 2px; flex-direction: column;}
.post_main_12>div,.post_main_42>div { position: relative; }
.post_main_12>div>div,.post_main_42>div>div {border-radius: 0 0 5px 5px; text-align: center; width: 92%; font-weight: 400; color: white; padding: 4%; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);}
.post_main_12 img, .post_main_42 img { border-radius: 5px; width: 100%;}

.post_main_3>div,.post_main_6>div { position: relative; } /* aspect-ratio: 1 / 1;  */
.post_main_3>div>div,.post_main_6>div>div {
  margin-top: 10%;  margin-left: -12%; 
  height: 20%;     width: 24%; 
  text-align: center;
  font-weight: 400; color: white;  
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.post_main_3>div>div>div,.post_main_6>div>div>div {
  display: none;
  border-radius: 12px;  
  padding: 6px 12px 8px 12px;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.1s cubic-bezier(.25,.8,.25,1);
}
.post_main_3>div>div>div:hover,.post_main_6>div>div>div:hover {
  transform: scale(1.2);
  background-color: #453;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.post_main_3 img,.post_main_6 video { object-fit: cover; border-radius: 5px; width: 100%;}

.post_main_7 img, .post_main_8 img, .post_main_9 img { border-radius: 5px; width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: center;}
.post_main_7>div.t_answer,
.post_main_8>div.t_answer,
.post_main_9>div.t_answer { font-weight: 300; margin-bottom: 2px; border-radius: 5px; padding: 10px; font-size: 130%; border-bottom: 1px solid rgba(100, 100, 100, 0.2);}
.post_main_7>div.t_answer:hover,
.post_main_8>div.t_answer:hover,
.post_main_9>div.t_answer:hover { background-color: rgba(100, 200, 100, 0.3);}
.post_main_7>div.t_answer .fa-person-circle-plus,
.post_main_8>div.t_answer .fa-person-circle-plus,
.post_main_9>div.t_answer .fa-person-circle-plus { float: right; color: rgba(100, 100, 100, 0.2);;}

.post_main_41 { display: flex; flex-wrap: wrap; gap: 2px;}
.post_main_41>div { position: relative; flex-basis: calc(50% - 1px) ; }
.post_main_41>div>div {border-radius: 0 0 5px 5px; text-align: center; width: 92%; font-weight: 400; color: white; padding: 4%; position: absolute; bottom: 3px; left: 0; background-color: rgba(0, 0, 0, 0.4);}
.post_main_41 img { border-radius: 5px; width: 100%;}

.post_main_31 { display: flex; gap: 2px;}
.post_main_31>div { position: relative; }
.post_main_31>div>div {border-radius: 0 0 5px 5px; text-align: center; width: 92%; font-weight: 400; color: white; padding: 4%; position: absolute; bottom: 3px; left: 0; background-color: rgba(0, 0, 0, 0.4);}
.post_main_31 img { border-radius: 5px; width: 100%;}

.post_main_32 { display: flex; gap: 2px; flex-direction: column;}
.post_main_32>div { position: relative; }
.post_main_32>div>div {border-radius: 5px; text-align: center; font-weight: 400; color: white; padding: 4%; position: absolute; bottom: 8px; left: 8px; background-color: rgba(0, 0, 0, 0.4);}
.post_main_32 img { border-radius: 5px; width: 100%;}
.post_preview .post_slider {
  margin: 0; padding: 0pt;
  height: 8pt;
  font-size: 30pt;
  position: absolute; bottom: 70pt;
  border-radius: 100pt;
  left: 10%;
  width: 80%;
  background-color: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
}


.static { padding: 10pt;}
.mobi-preview {
  max-width: 100%;
  margin-bottom: 10pt;
  border-bottom: 1px solid #CCC;
}

@keyframes scrollText {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-1000%);
    }
  }

.handwriting h3 {border-bottom: 1px dashed darkgoldenrod; padding: 0 1% 3% 1%; margin-bottom: 3%; font-weight: 300; text-align: right; font-size: 16pt; color:darkgoldenrod}

.dp {
  display: flex;
  flex-wrap: wrap;
  gap: 20pt;
  justify-content: center;
  text-align: left;
}
.dp>div {
 width: calc(33.3333% - 20pt);
}

.dp .title{ padding: 10pt 0 10pt 0; font-weight: 500; font-size: 130%; }
.dp .title sup { font-weight: 100; font-size: 9pt;}
.dp .answers div { margin: 2pt; background-color: rgba(150, 150, 150, 0.1); border-radius: 3px; padding: 10pt;} 
.dp .answers i { opacity: 0.5;padding-right: 10pt;}

.dp .topics { margin:10pt 10pt 0 0pt; font-size: 10pt; line-height:1.3em; }
.dp .topics a {
  border-radius: 200pt;
  cursor: pointer;
  border: 1px solid #EEE;
  white-space:nowrap; padding: 1pt 8pt 1pt 8pt; text-transform:uppercase; font-weight: 700;}

.full_width .search {
  display: flex;
  position: relative;
  background-color: rgba(150, 150, 150, 0.1);
  width: 100%;
  padding-top: 5pt;
  padding-bottom: 5pt;
  margin: 4pt auto 4pt auto;
  border-radius: 5pt;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
.full_width .small-search-bar { 
  border-radius: 100pt;
  margin-top:30pt;
  margin-bottom: 30pt;
  width: 50%;
}
.full_width .topic_list { 
  display: flex; 
  gap: 10pt;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
  margin: 16pt 0 8pt 0;
  height: 30pt;
  overflow: hidden;

}
.full_width .topic_list>a {
  cursor: pointer;
  white-space: nowrap;
  color: black;
  border: 1px solid #EEE;
  border-radius: 100pt;
  padding: 4pt 10pt 4pt 10pt;
  font-size: 11pt;
  transition: all 0.4s cubic-bezier(.25,.8,.25,1);
  height: 14pt;
}
.full_width .topic_list>a:hover { border-color: black; background-color: rgba(255, 255, 255, 0.2);}


.full_width .search i { font-size:14pt; padding: 10pt 10pt 10pt 20px; }
.full_width .search input {
  flex-grow:1;
  padding: 10pt;
  text-align: left; font-weight: 100;
  background-color: transparent;
  outline: none;
  border: transparent;
  color: black;
}

.full_width { position: absolute; top:0; left: 0; width: 80%; margin: 0 10% 0 10%;}
.full_width header { 
  display: flex;
  justify-content: left;
  align-items: center;
  gap:20pt;
  height: 28pt; text-align: left; padding:14pt}
.full_width header .logo {  height: 100%; }
.full_width header a {color: black; font-weight: 500; padding: 0 20pt 0 0;}

.full_width h1 { padding-top: 32pt; color: black; font-weight: 500; font-size: 48pt;}
.full_width  #extraTopics { 
  margin: 10pt 0 10pt 0;
  display: none; text-align: left;}



section.categories {
  display: flex; flex-wrap: wrap;
  gap: 10pt;
  width: 600pt;
  margin: 10pt auto 10pt auto;
}

section.categories>div { width: 180pt; border-radius: 10pt; overflow: hidden; background-color: #667; }
section.categories>div>img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
section.categories>div>a { color: white; padding: 6pt 12pt 12pt 12pt; display: block; text-align: center;}
section.categories>div>a:hover { text-decoration: underline;}

section.cat_quiz_list {
  display: flex; flex-wrap: wrap;
  gap: 10pt;
  width: 600pt;
  margin: 10pt auto 10pt auto;
}


.quiz_scroller {
    width: 100%;
    overflow: auto;
}
section.suggested_quizzes {
    animation: scrollText 600s infinite linear;
    display: flex;
    gap:16px;
    flex-wrap: nowrap;
    margin: 3pt 0 14pt 0;
}  

section.suggested_quizzes>article {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
section.suggested_quizzes>article:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} 


section.cat_quiz>article { display: flex; flex-direction: column; width: 290pt; min-width: 290pt; border-radius: 10pt; overflow: hidden; border: 1px solid #667;  }
section.cat_quiz>article>div>img { width: 100%; aspect-ratio: 2 / 1;  object-fit: cover; }

section.cat_quiz>article>div.q_title { flex-grow: 1; } 
section.cat_quiz>article h2 { text-align: left; padding: 6pt 12pt 0 12pt; font-weight: 300; font-size: 14pt; line-height: 1.1em; }
section.cat_quiz>article small { display: block;text-align: left; padding: 6pt 12pt 6pt 12pt;}

section.cat_quiz>article a {  font-weight: 400; }
section.cat_quiz>article a:hover { text-decoration: underline; }

section.cat_quiz>article .creator { text-align: right; padding: 6pt 16pt 12pt 12pt; }

section.suggested_quizzes>article {
  width: 240pt; min-width: 240pt;
}
section.suggested_quizzes>article>div.q_title small {
  height: 3em;
  line-height: 1.3em;
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* Number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.q_easy, .q_med, .q_hard {
  border-width: 1pt;
  border-style: solid;
  padding: 0pt 4pt 1pt 4pt;
  border-radius: 1pt;
}
.q_easy { color: lightgreen; border-color: lightgreen;} 
.q_med { color: darkkhaki; border-color: darkkhaki;}  
.q_hard { color: lightcoral; border-color: lightcoral;} 

section.limited_width { width: 600pt; margin: 0 auto 0 auto; }

@media all and (max-width: 990px) and (orientation:portrait) { 

  h1, h2, h3, p { padding: 1pt 10pt 4pt 10pt;}

  .signature { margin-left: 9pt;}

  section.limited_width { width: 100%; margin: 0; }
  section.limited_width>div>div { width: 140pt; min-width: 140pt;}

  .user_view { margin: 0; border-radius: 0; margin-bottom: 12pt;}

  section.categories,section.cat_quiz {
    width: 100%;
  }
  section.categories>div, section.cat_quiz>div {
    width: 100%;
  }

  body, input, textarea { text-align: left; }

  body { 
    font-weight: 300;
    width: 100%;
  }
  footer { text-align: left; }
  footer li { display: block; padding: 2pt 0 2pt 0 }

  .quiz_scroller { width: 100%; padding: 0; margin: 0; }
  section.suggested_quizzes { overflow: auto;
    animation: none; padding: 6pt; margin: 0;
  }


  section.posts>div {
    animation: none; padding: 6pt;
    overflow: auto;
  }

  section.mods { overflow: auto; text-align: left;}
  section.mods>div {
    animation: none; margin: 6pt;
    align-items: flex-start;
    justify-content: flex-start;
  }


  .quiz_scroller,
  section.suggested_quizzes,
  section.posts>div,
  section.mods {
      overflow: auto; /* or scroll */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
  }
  .quiz_scroller::-webkit-scrollbar,
  section.suggested_quizzes::-webkit-scrollbar,
  section.posts>div::-webkit-scrollbar,
  section.mods::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}


  .main_image b { bottom:32pt; left: 15pt; } 
  .main_image ul { bottom: 10pt; left: 15pt; font-size: 11pt;}
  .user { border-radius: 0;}
  .main_image { margin-top:0 }

  .full_width .search { width: 100%; }
  .dp>div { min-width:100%;}
  .full_width header a { display: none;}
  .full_width .subtitle h1 { font-size: 16pt;}
}

/*dark mode */
/*
@media (prefers-color-scheme: dark) {
  body {
      background-color: black;
      color: white;
  }
  h1 { color: rgb(194, 225, 194);}
  body a { color: rgb(154, 255, 154);}
  hr {   
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #333, #666, #333);
  }
  .quiz .popup {
    background-color: #333;
    color: white;
  }
}
*/