@font-face {
   font-family: "r";
   src: url("font/rroboto.ttf");
}
@font-face {
   font-family: "ri";
   src: url("font/roboto-i.ttf");
}
@font-face {
   font-family: "rm";
   src: url("font/rm.ttf");
}
@font-face {
   font-family: "rf";
   src: url("font/rf.ttf");
}
@font-face {
   font-family: "em";
   src: url("font/encode.ttf");
}
/*:root { --cg: hsl(160, 100%, 38%)}*/

* {
   box-sizing: border-box; -webkit-box-sizing: border-box;
   margin: 0; padding: 0; border: none;
   background: transparent; text-decoration: none;
   font: 14px 'r', sans-serif; line-height: 1.4;
   color: hsl(0, 0%, 20%);
}
body { background-color: hsl(202, 5%, 95%); }

span {font: inherit}
a {font: inherit;}
.a { text-decoration: underline;}
/*.a:visited {color: rgb(121, 92, 178); text-decoration: underline;}*/

/*p {padding-top: .5em; }*/
p {font: inherit; margin-top: .8em}
h1 { font-size: 27px; text-shadow: 0px 0px 2px hsl(0, 0%, 60%);}
h2 { font-size: 24px; color: hsl(205, 100%, 50%);
   text-shadow: 0 0 1px hsl(0, 0%, 60%);}
h3 { font-size: 18px; margin: .2em 0 .5em; color: hsl(205, 100%, 50%);
   /*font-family: 'rm', sans-serif;*/
   text-shadow: 0 0 1px hsl(0, 0%, 60%);
}
/*.pd h3 {margin: 25px 0 5px;}*/
b {font-weight: bold}
.b {font-weight: bold}
em { font-weight: 500}
i {font-style: oblique}


ul {padding-inline-start: .7em; font: inherit; list-style-type: "●"}
ol {padding-inline-start: 1.1em; font: inherit;}
li {margin: .5em 0 0; padding: 0 0 0 .7em; font: inherit;}
/*li:before {*/
/*    content:"•";*/
/*   padding-right: 1em;*/
/*}*/
.lw li {margin: .8em 0 0 0; }
.lw li {margin: .8em 0 0 0; }
li p {margin-top: .5em}

table, tr, td, th {
   border-collapse: collapse;
   padding: 2px 7px;
   text-align: center;
   /*border: 1px solid hsl(0, 0%, 80%);*/
}
table { border-bottom: 1px solid hsl(0, 0%, 40%);}
tr { border-top: 1px solid hsl(0, 0%, 80%);}
tr:first-child { border-top: 1px solid hsl(0, 0%, 40%);}


.in {display: inline-block}
.l0 {margin-top: .3em}
.l1 {padding-top: .5em}
.c {color: hsl(205, 100%, 50%);}
code {color: hsl(205, 100%, 50%);}
.shd {
   margin: 0 0 16px; padding: 11px 15px 10px;
   box-shadow: 1px 1px 3px hsl(0, 0%, 60%);
   border-radius: 5px;
   background-color: white;
}
.shdd {
   margin: 0 0 12px; padding: 14px 18px 13px;
   box-shadow: 1px 1px 3px hsl(0, 0%, 60%);
   border-radius: 5px;
   background-color: white;
}
.sha {
   padding: 16px 22px 16px;
   box-shadow: 1px 1px 3px hsl(0, 0%, 60%);
   border-radius: 5px;
   background-color: white;
}
.ishd {
   box-shadow: 1px 1px 4px hsl(0, 0%, 60%);
   border-radius: 5px; background-color: white;
}
.ishs {
   box-shadow: .5px .5px 5px hsl(0, 0%, 60%);
   border-radius: 5px; background-color: white;
}
@media (max-width: 623px) {
   .shd { margin: 0 0 10px; padding: 8px 8px 6px;
      box-shadow: 0 0.5px 2px hsl(0, 0%, 70%);
   }
   .shdd {box-shadow: 0 0.5px 2px hsl(0, 0%, 70%);}
   .ishd {
      box-shadow: 0 0.5px 2px hsl(0, 0%, 70%);
   }
}
.gr { color: hsl(0, 0%, 55%);}
.gre { color: hsl(166, 100%, 41%); }
.gree { color: hsl(166, 100%, 38%);}
/*.red { color: hsl(0, 100%, 50%);}*/
.blu { color: hsl(205, 100%, 50%);}


.fr, .frr {width: 100%; min-width: 400px; margin: 0 auto;}
.fr { max-width: 800px; margin-top: 110px}
.frr { max-width: 700px;}
@media (min-width: 1068px) {
   .fr, .frr { width: 1050px; max-width: none;}
   .fr {margin-top: 80px}
}

.f0 {display: flex; justify-content: space-between; margin: 32px 0 8px;}
.f1 {
   margin: 2.3em 17px 0;
   display: flex; justify-content: space-between;
}
.f3 {display: flex; justify-content: space-between;}
.hp { font-size: 18px; text-shadow: 0px 0px 1.5px hsl(0, 0%, 60%);}

.bl {
   font-family: 'rm', sans-serif;
   color: hsl(202, 100%, 44%);
}


.tn {position: fixed; top: 0; background-color: hsl(202, 5%, 95%);
   width: 100%; padding: 0 12px; z-index:10; }
.sn {position: fixed; top: 110px; left: 0; width: 30%; padding: 0 12px; }
.sm {display: none; position: fixed; top: 110px; left: 0; width: 30%; padding: 0 12px; }

.pc {width: 100% }
.pd {width: 100%;margin-top: 21px; padding: 15px 20px 19px;}
.px {width: 100%; margin: 0 12px; padding: 15px 20px 19px;}
.hc {margin: 5px 0}
a.ac {display: block; position: relative; top: -124px; visibility: hidden;}
a.acc {display: block; position: relative; top: -80px; visibility: hidden;}
@media (max-width: 800px) {
   .sn {display: none}
   .sm {display: none}
   .pd {flex: 0 0 100%;}
}

#hd {
   max-width: 1022px;
   height: 41px; margin: 9px 0 6px; padding: 0 12px;
   display: flex; justify-content: start; align-items: center;
   box-shadow: 0 1px 2px 1px hsl(0, 0%, 50%); border-radius: 5px;
   background-color: hsl(0, 0%, 10%);
}
#h2 {
   display: flex; justify-content: start;
   margin: 10px 0 0; padding: 0 8px;
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 3px hsl(0, 0%, 55%);
}
@media (max-width: 623px) {
.pd {margin-top: 15px; padding: 12px 15px 16px;}
.fr { margin-top: 102px}
   #hd {box-shadow: 0 1px 2px hsl(0, 0%, 50%);}
   #h2 {justify-content: space-around; margin-top: 10px; padding: 0 5px;
      box-shadow: 1px 1px 3px hsl(0, 0%, 70%); }
}
.mh {display: none;}
@media (min-width: 1068px) {
   .mh {display: initial;}
   #hd {margin: 9px auto 0;}
   #h2 {display: none;}
   .sn {display: none;}
}
.me { margin: 0 0 0 16px; padding: 4px 8px 2px;
   font-size: 14px; color: hsl(0, 0%, 100%);}
.mx {color: hsl(162, 70%, 46%)}
.me:hover {color: hsl(162, 70%, 65%)}
.m2 {
   padding: 5px 16px 4px; font-size: 14px; font-family: 'rm', sans-serif;
}
.m2.mx {
}
.m2:hover {color: hsl(162, 70%, 46%)}

#oa {margin: 0 16px 0 auto;}
#ab {margin: 0 13px 0 16px;}
.ala {display: none}

#fo {display: flex; flex-direction: column; margin: 10px 2px 22px;
   justify-content: center;}
@media (min-width: 800px) {
   #fo {flex-direction: row; justify-content: space-between;}
}
@media (min-width: 1068px) {
   #fo { margin-top: 18px}
.mx {color: hsl(162, 70%, 65%)}
.asm {display: none}
.ala {display: initial}
}
.bi {margin: 5px 16px; padding: 0; display: inline-block}
.bii {margin: 8px 16px; padding: 0; display: inline-block}
.be {margin: 0 16px 8px; padding: 0 0 0; font-size: 12px; }
.be p {margin: 5px 0 0}

.sky {
   margin: 0 19px 0 10px; padding: 5px 2px 4px;
   font: 24px "sky", Arial, sans-serif; color: hsl(0, 0%, 100%);
   text-shadow: 0 0 2px hsl(0, 0%, 90%);
}
.sv {width: auto; height: 14px; margin: 6px 18px 0 12px }
#star {color: hsl(162, 70%, 65%); font: 20px sky; text-shadow: none}

.sp {width: 1px; height: 20px; background-color: hsl(0, 0%, 70%)}
.ska {
   margin: 0 24px 0 24px; padding: 0px 5px 1px; width: fit-content;
   font: 18px "em", Arial, sans-serif; color: hsl(0, 0%, 100%);
   letter-spacing: .025em;
   transform: scale(1.2, 1);
}

@media (max-width: 623px) {
   * {line-height: 1.3}
   #hd {height: 38px}
   .sky {margin: 0 10px 0 2px; font-size: 18px;}
   .sv { height: 12px; margin: 5px 9px 0 5px }
   .ska {margin: 0 8px 0 12px; font-size: 15px;}
   .me {font-size: 13px; }
   .m2 {font-size: 13px; padding: 5px 4px 4px;}
   #oa {margin: 0 3px 0 auto;}
   #ab {margin: 0 0px 0 3px;}
   #star {font-size: 19px }
   .bl {font-size: 14px}
}


[tt]::before {
   content: attr(tt);
   pointer-events: none;
   position: absolute;
   opacity: 0;

   transition: all 0.15s ease;
   padding: 5px 10px;
   color: white;
   border-radius: 5px;
   margin-top: 33px;
   margin-left: -15px;
   box-shadow: 0 1px 2px 1px hsl(0, 0%, 50%);
}
[tt]:hover::before {
   opacity: 1;
   background: black;
}