@font-face {
  font-family: champ;
  src: url(images/style/font-champ-bold.ttf) format('truetype');
  font-display: swap
}

:root {
  --txtClr: #333;
  --bgClr: hsl(0, 0%, 100%);
  --bg: linear-gradient(to right, hsl(214, 100%, 90%) 0%, hsl(214, 100%, 98%) 20%, hsl(214, 100%, 98%) 50%, hsl(214, 100%, 98%) 80%, hsl(214, 100%, 90%) 100%);
  --a0Clr: hsl(60, 100%, 97%);
  --a1Clr: hsl(50, 100%, 95%);
  --a2Clr: hsl(50, 100%, 85%);
  --a3Clr: hsl(45, 100%, 77%);
  --a4Clr: hsl(50, 100%, 28%);
  --b0Clr: hsl(213, 100%, 96%);
  --b1Clr: hsl(214, 100%, 93%);
  --b2Clr: hsl(214, 100%, 84%);
  --b3Clr: hsl(214, 65%, 43%);
  --b4Clr: hsl(214, 100%, 25%);
  --o1Clr: hsl(30, 100%, 45%);
  --r1Clr: hsl(0, 100%, 60%);
  --hdrImg: url(images/hdr/hdr-main-lite.svg);
  --hdrAdvImg: url(images/hdr/hdr-adv-lite.svg);
  --h1Shadow2: 2px 2px 2px hsl(0, 0%, 100%), inset 1px 1px 1px hsl(24, 100%, 100%);
  --h1Shadow: 1px 1px 1px hsl(0, 0%, 100%), -1px -1px 1px hsl(0, 0%, 100%);
  --trans: all linear 0.5s;
  --boldWt: bold;
  --boldPct: 100%
}

:root[theme=dark] {
  --txtClr: hsl(0, 0%, 90%);
  --bgClr: hsla(214, 20%, 10%, 100%);
  --bg: linear-gradient(to right, hsl(214, 50%, 10%) 0%, hsl(214, 20%, 9%) 20%, hsl(214, 20%, 9%) 50%, hsl(214, 20%, 9%) 80%, hsl(214, 50%, 10%) 100%);
  --a0Clr: hsl(220, 50%, 20%);
  --a1Clr: hsl(220, 65%, 26%);
  --a2Clr: hsl(220, 50%, 30%);
  --a3Clr: hsl(50, 90%, 85%);
  --a4Clr: hsl(50, 100%, 90%);
  --b0Clr: hsl(210, 80%, 9%);
  --b1Clr: hsl(210, 80%, 12%);
  --b2Clr: hsl(210, 100%, 25%);
  --b3Clr: hsl(214, 100%, 84%);
  --b4Clr: hsl(214, 100%, 94%);
  --o1Clr: hsl(50, 100%, 50%);
  --r1Clr: hsl(0, 100%, 65%);
  --hdrImg: url(images/hdr/hdr-main-dark.svg);
  --hdrAdvImg: url(images/hdr/hdr-adv-dark.svg);
  --h1Shadow: 2px 2px 1px var(--bgClr), -2px 2px 1px var(--bgClr), -2px -2px 1px var(--bgClr), 2px -2px 1px var(--bgClr);
  --trans: all linear 0.5s;
  --boldWt: 900;
  --boldPct: 106%
}

.imgBg {
  background-color: aqua;
  border: 3px solid aqua;
  border-radius: 3px
}

b {
  font-weight: var(--boldWt);
  font-size: var(--boldPct)
}

.bg {
  background-color: var(--bgClr)
}

.bga1 {
  background-color: var(--a1Clr)
}

.bga2 {
  background-color: var(--a2Clr)
}

.bgb1 {
  background-color: var(--b1Clr)
}

.bgb2 {
  background-color: var(--b2Clr)
}

.fga3 {
  color: var(--a3Clr)
}

.fga4 {
  color: var(--a4Clr)
}

.fgb3 {
  color: var(--b3Clr)
}

.fgb4 {
  color: var(--b4Clr)
}

.fgo1 {
  color: var(--o1Clr)
}

.fgr1 {
  color: var(--r1Clr)
}

@media all {
  body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--txtClr)
  }

  html {
      font-size: 16px;
      font-family: Verdana,Arial,Tahoma,sans-serif;
      line-height: 1.52
  }

  .mid {
      max-width: 800px;
      margin: auto;
      background: 0 0
  }

  img {
      max-width: 100%;
      min-width: 8px;
      height: auto
  }

  article {
      margin-left: 2px
  }

  h1 {
      color: var(--b3Clr);
      text-shadow: var(--h1Shadow);
      margin: 0 0 1.3rem;
      font: normal 2.6rem/3rem champ,Verdana,Arial;
      text-align: center
  }

  h2 {
      margin: 3.7rem 0 .8rem;
      font: 2rem champ,Verdana;
      color: var(--r1Clr)
  }

  h3 {
      margin: 2.1rem 0 .6rem;
      font-weight: 400;
      font-size: 1.3rem;
      color: var(--b3Clr)
  }

  h4 {
      margin: 1.4rem 0 .6rem;
      font-weight: 400;
      font-size: 1.2rem;
      font-variant: small-caps;
      color: var(--o1Clr)
  }

  h1+h2 {
      margin-top: 2rem
  }

  h1+h3 {
      margin-top: 1rem
  }

  h2+h3 {
      margin-top: 1rem
  }

  textarea {
      color: var(--b3Clr);
      background-color: var(--b1Clr);
      padding: 5px;
      border-radius: 10px;
      font-size: 1.1rem;
      font-family: Verdana,Arial,Tahoma,sans-serif
  }

  .large {
      font-size: 1.1rem;
      color: var(--b3Clr)
  }

  .larger {
      font-size: 1.2rem;
      color: var(--o1Clr);
      transition: var(--trans)
  }

  .largest {
      font-size: 1.6rem;
      color: var(--a4Clr)
  }

  .huge {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--b3Clr)
  }

  p {
      min-width: 10ch;
      max-width: 68ch;
      padding: .25rem 0;
      overflow: auto
  }

  p a {
      display: inline-block;
      padding: .1rem .3rem;
      border: solid 1px var(--b2Clr);
      border-radius: .6rem;
      background-color: var(--a0Clr)
  }

  p a:hover {
      border: solid 1px var(--a3Clr);
      background-color: var(--a2Clr);
      cursor: pointer
  }

  a:link {
      color: var(--b4Clr)
  }

  a:visited {
      color: var(--b3Clr)
  }

  .nobr {
      white-space: nowrap
  }

  .center,.centerfull {
      margin-left: auto;
      margin-right: auto;
      text-align: center
  }

  .full {
      overflow-x: scroll;
      overflow-y: hidden;
      width: 96vw;
      margin-left: -48vw;
      margin-right: -48vw;
      position: relative;
      left: 50%;
      right: 50%;
      box-shadow: 0 0 3px 2px var(--b2Clr)
  }

  .example {
      margin: 1.3rem .6rem 1.9rem 3rem;
      background-color: var(--b1Clr);
      padding: .3rem .6rem .6rem;
      border: 2px solid var(--bgClr);
      border-radius: .6rem;
      box-shadow: .2rem .2rem .3rem #002c66;
      overflow: hidden
  }

  .example h3,.example .h3 {
      font-size: 1.1rem;
      margin: .1rem -.1rem;
      padding: .1rem .3rem;
      background: var(--a1Clr);
      border-radius: .5rem;
      color: var(--b4Clr)
  }

  .center80 {
      margin: 1.3rem auto .8rem;
      padding: .5rem;
      max-width: 66ch;
      background: linear-gradient(170deg,var(--b0Clr) 0%,var(--b1Clr) 90px,var(--b1Clr) calc(100% - 90px),var(--b2Clr) 100%);
      border: .15rem solid var(--b2Clr);
      border-radius: 1.9rem
  }

  .center80 h3 {
      margin: .3rem 0 1.3rem .6rem;
      color: var(--b3Clr)
  }

  .center80 p {
      margin: .6rem 0 .5rem
  }

  .indent50px {
      margin-left: 2rem
  }

  .mono {
      font-family: courier new,Courier,monospace;
      font-size: 20px;
      line-height: 24px
  }

  .times {
      font: 700 130% times new roman,serif
  }

  .head {
      margin: .2rem 0 .6rem;
      padding: .5rem;
      color: var(--fgClr);
      text-align: center;
      background: var(--a1Clr) 0%;
      border: 2px solid var(--a2Clr);
      border-radius: 25px;
      font: 700 1.1rem Verdana
  }

  p+ul {
      margin-top: -1rem
  }

  li {
      color: var(--b4Clr);
      list-style-type: disc;
      padding-top: .5rem
  }

  li:hover {
      color: var(--b3Clr)
  }

  ul ul {
      margin-left: -9px
  }

  ul p {
      text-indent: 0
  }

  ul.large {
      margin-top: 3px
  }

  ul.large>li {
      font-size: 1rem;
      margin-top: 9px;
      padding: 2px 12px 4px 9px;
      color: var(--b4Clr);
      border-radius: 10px;
      background-color: var(--b1Clr);
      list-style-image: url(images/style/disc.svg)
  }

  ul.large>li:hover {
      background-color: var(--a1Clr)
  }

  ul.larger {
      margin-top: 3px
  }

  ul.larger>li {
      font-size: 1rem;
      margin-top: 10px;
      padding: 10px;
      color: var(--b4Clr);
      background-color: var(--b1Clr);
      border-radius: 10px;
      list-style-image: url(images/style/disc.svg)
  }

  ul.larger>li:hover {
      background-color: var(--b2Clr)
  }

  ul.none {
      text-indent: 1.5rem
  }

  ul.none li {
      list-style: none
  }

  ul.disc {
      text-indent: -1.5rem
  }

  ul.disc li {
      list-style: none
  }

  ul.disc li::before {
      content: "\25CF"!important;
      margin-right: 9px;
      color: var(--b2Clr);
      font-size: 140%;
      line-height: 100%
  }

  ul.dart {
      text-indent: -1.5rem
  }

  ul.dart li {
      list-style: none
  }

  ul.dart li::before {
      content: "\27A4"!important;
      margin-right: 9px;
      color: var(--a4Clr);
      font-size: 110%;
      line-height: 90%
  }

  ul.star {
      text-indent: -1.5rem
  }

  ul.star li {
      list-style: none
  }

  ul.star li::before {
      content: "\273A"!important;
      margin-right: 9px;
      color: var(--a3Clr);
      font-size: 110%;
      line-height: 100%
  }

  ul.gear {
      text-indent: -1.5rem
  }

  ul.gear li {
      list-style: none
  }

  ul.gear li::before {
      content: "\2699"!important;
      margin-right: 9px;
      color: var(--a3Clr);
      font-size: 130%;
      line-height: 100%
  }

  .so {
      background: url(images/style/so.svg) no-repeat 3rem 25%;
      padding: 0 0 .6rem 100px;
      color: var(--b3Clr);
      font-size: 1.1rem
  }

  p.so {
      margin: 3px
  }

  li .so {
      padding: 0 0 .6rem 6.6rem;
      margin-top: 4px
  }

  .so ul {
      margin-top: .4rem
  }

  .simple {
      overflow: auto
  }

  .simple table {
      border-collapse: collapse;
      background-color: var(--b1Clr)
  }

  .simple .tbl {
      background-color: var(--b0Clr);
      padding-left: .4rem;
      padding-right: .4rem;
      border-radius: .3rem
  }

  .simple th,.simple td {
      border: solid .1rem var(--bgClr);
      padding: .3rem
  }

  .simple th {
      background-color: var(--b2Clr)
  }

  .beach {
      overflow: auto
  }

  .beach p {
      background-color: var(--b0Clr)
  }

  .beach table {
      border-collapse: collapse;
      background-color: var(--b0Clr)
  }

  .beach th,.beach td {
      border: solid .1rem var(--bgClr);
      padding: .3rem;
      color: var(--b4Clr)
  }

  .beach th {
      background-color: var(--a2Clr);
      color: var(--a4Clr)
  }

  .history {
      min-height: 3rem;
      margin: 1.6rem 2rem 1.3rem;
      padding: .6rem .8rem .7rem 5rem;
      color: var(--txtClr);
      border: .2rem solid var(--a1Clr);
      text-indent: .6rem;
      border-radius: .6rem;
      background: var(--a1Clr) url(images/style/scroll.svg) no-repeat;
      background-position: .3rem .3rem;
      box-shadow: inset 0 0 1.1rem 0 var(--a2Clr)
  }

  .history p {
      margin: .5rem 0 .3rem
  }

  .words {
      margin: .9rem 2rem 1.6rem;
      padding: .3rem .3rem .4rem 4rem;
      background: var(--b1Clr) url(images/style/word.svg) no-repeat;
      background-position: .3rem .2rem;
      background-repeat: no-repeat;
      border: .1rem solid var(--b2Clr);
      border-radius: .6rem;
      min-height: 2.1rem
  }

  .words p {
      margin: .5rem 0 .3rem
  }

  .info {
      margin: .9rem 2rem 1.6rem;
      padding: .6rem .3rem .7rem 4rem;
      background-image: url(images/style/info.svg),linear-gradient(170deg,var(--bgClr) 0%,var(--b2Clr) 100%);
      background-position: 9px .4rem;
      background-repeat: no-repeat;
      border: .1rem solid var(--b2Clr);
      border-radius: 1.9rem;
      box-shadow: inset 0 0 .9rem .2rem var(--b2Clr);
      min-height: 2.3rem
  }

  .info p {
      margin: .5rem 0 .3rem
  }

  .fun {
      padding: .2rem 1.3rem 0 1.4rem;
      margin: 1rem;
      border-radius: 3rem;
      border: 2px solid var(--bgClr);
      box-shadow: 1rem 1rem 1rem -1rem var(--b3Clr),1rem -1rem 1rem -1rem var(--a3Clr),-1rem 1rem 1rem -1rem var(--a3Clr),-1rem -1rem 1rem -1rem var(--a3Clr);
      background: linear-gradient(170deg,var(--bgClr) 0%,var(--bgClr) 50%,var(--a0Clr) 100%)
  }

  .funz {
      margin: 12px 20px;
      padding: 5px 10px 5px 12px;
      border-radius: 32px;
      box-shadow: 18px 18px 18px -18px var(--b3Clr),18px -18px 18px -18px var(--a3Clr),-18px 18px 18px -18px var(--a3Clr),-18px -18px 18px -18px var(--b3Clr);
      background: linear-gradient(170deg,var(--bgClr) 0%,var(--bgClr) 50%,var(--a0Clr) 100%)
  }

  .fun h3 {
      margin-top: .9rem
  }

  p.fun {
      padding: .6rem 1.3rem .6rem 1.4rem
  }

  .def {
      margin: 1.6rem 1rem 1.3rem;
      padding: .3rem 1.1rem;
      border-radius: 1rem;
      background: linear-gradient(160deg,var(--a0Clr) 0%,var(--a0Clr) 100%);
      border: 2px solid var(--bgClr);
      box-shadow: 0 0 .9rem var(--a2Clr)
  }

  .def h3 {
      margin-top: 1rem
  }

  .hide {
      color: var(--a2Clr);
      background-color: var(--a2Clr);
      border: 1px solid var(--a3Clr);
      padding: 3px 15px
  }

  .hide:hover {
      color: var(--txtClr);
      background-color: var(--a1Clr);
      border: 1px solid var(--a2Clr)
  }

  .dotpoint {
      margin: 0 0 .6rem .2rem;
      padding: .3rem .6rem .3rem 1.1rem;
      color: var(--b4Clr);
      background: linear-gradient(-5deg,var(--a0Clr) 0%,var(--a1Clr) 100%);
      font-size: 1rem;
      border: 2px solid var(--a2Clr);
      border-radius: 25px;
      border-left: 9px solid var(--b2Clr)
  }

  .dotpoint p {
      font-size: 1rem
  }

  .dotpoint h3 {
      margin-top: 1rem
  }

  .questions {
      min-height: 3rem;
      margin: 2rem .3rem;
      padding: .6rem .3rem .7rem 118px;
      border: 1px solid var(--b3Clr);
      border-radius: .6rem;
      font-size: 1.1rem;
      background-image: url(images/style/questions.svg),linear-gradient(120deg,var(--a0Clr) 0%,var(--a1Clr) 100%);
      background-repeat: no-repeat
  }

  .questionshuh {
      min-height: 3rem;
      margin: 2rem;
      padding: .6rem .3rem .7rem 7.4rem;
      border: 1px solid var(--b3Clr);
      border-radius: .6rem;
      font-size: 1.1rem;
      background: var(--b0Clr) url(images/style/questions.svg) no-repeat
  }

  .questions a {
      padding: 5px 3px;
      font-weight: 400;
      font-size: 1.1rem
  }

  .activity {
      font-size: 1.1rem;
      background: var(--b1Clr) url(images/style/activity-div.svg) no-repeat;
      padding: .6rem .3rem .7rem 11.3rem;
      border: 1px solid var(--b3Clr);
      border-radius: .6rem;
      margin: 2.1rem 2.1rem 1.9rem
  }

  .activity a {
      font-size: 1.1rem;
      font-weight: 400;
      padding: 0
  }

  .rel-title {
      font-weight: 700;
      font-size: 1.1rem
  }

  .related {
      min-height: 3.1rem;
      border-top: .2rem solid var(--b2Clr);
      border-bottom: .2rem solid var(--b2Clr);
      margin-top: .6rem;
      margin-bottom: .6rem;
      padding-top: .8rem;
      padding-bottom: 9px;
      font-weight: 700;
      font-size: 1.1rem;
      background-image: url(images/style/related.svg),linear-gradient(120deg,var(--b0Clr) 0%,var(--b1Clr) 100%);
      background-repeat: no-repeat;
      clear: none
  }

  .related a {
      display: list-item;
      margin-top: .1rem;
      margin-left: 180px;
      font-weight: 400;
      list-style-type: circle
  }

  .shadow {
      padding: .2rem 1.5rem;
      border-radius: 2.1rem;
      background: var(--b2Clr);
      box-shadow: inset .3rem .3rem .6rem var(--b0Clr),inset -.3rem -.3rem .6rem var(--b3Clr)
  }

  .video {
      float: left;
      min-width: 80px;
      min-height: 37px;
      margin-right: -80px;
      font-size: 12px
  }

  .intbl {
      text-indent: 0;
      display: inline-table;
      text-align: center;
      vertical-align: 40%;
      margin: 0 .1rem;
      border-collapse: collapse
  }

  .intbl em {
      display: table-row;
      text-align: center;
      border-bottom: .12ch solid;
      font-size: 93%;
      font-style: inherit;
      line-height: 130%
  }

  .intbl strong {
      display: table-row;
      text-align: center;
      font-weight: inherit;
      font-size: 93%;
      line-height: 120%
  }

  .intbl em:before,.intbl em:after,.intbl strong:before,.intbl strong:after {
      content: "\2005"
  }

  .hilite {
      background-color: var(--a2Clr);
      padding-left: .3rem;
      padding-right: .3rem
  }

  sup .intbl em {
      line-height: 100%
  }

  sup .intbl strong {
      line-height: 100%
  }

  .flexx {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: .6rem
  }

  .flexx .col {
      text-align: center
  }

  .flexy {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.3rem;
      margin-bottom: .6rem
  }

  .flexy .col {
      text-align: center
  }

  .flexy .rt {
      text-align: left;
      max-width: 60ch
  }

  .box {
      display: inline-block;
      text-align: center;
      vertical-align: top;
      margin: 0 10px 20px 0
  }

  .box:not(:last-child) {
      margin-bottom: 2%
  }

  .box+.box {
      margin-left: 2%
  }

  .tbl {
      display: table;
      table-layout: auto;
      margin-right: auto;
      margin-left: auto;
      border-collapse: separate;
      border-spacing: 0 .6rem;
      background: linear-gradient(to bottom right,var(--t0Clr) 0%,var(--t0Clr) 50%,var(--t0Clr) 100%);
      border: 1px solid var(--b0Clr);
      padding: 0 .5rem;
      border-radius: .6rem
  }

  .tbl .row {
      display: table-row;
      height: 1.6rem
  }

  .tbl .row .lt,.tbl .row .left {
      display: table-cell;
      text-align: right;
      padding: 0 .6rem 0 0;
      color: var(--a4Clr);
      font-size: 1.05rem;
      vertical-align: baseline
  }

  .tbl .row .rt,.tbl .row .right .tbl .row .rtlt .tbl .row .rtct .tbl .row .rtrt {
      display: table-cell;
      padding: 0 0 0 .4rem;
      color: var(--b3Clr);
      font-size: 1.1rem;
      font-weight: 400;
      vertical-align: baseline;
      white-space: nowrap
  }

  .tbl .row .rtlt {
      text-align: left;
      white-space: normal
  }

  .tbl .row .rtct {
      text-align: center;
      white-space: normal
  }

  .tbl .row .rtrt {
      text-align: right;
      white-space: normal
  }

  .tbl .row img {
      vertical-align: middle
  }

  .tbl .row i {
      font-size: .9rem;
      color: var(--txtClr)
  }

  .tbl p {
      margin: .6rem auto;
      color: var(--b3Clr)
  }

  .two {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      align-items: end;
      margin: auto;
      width: fit-content;
      row-gap: 10px;
      background: linear-gradient(to bottom right,var(--b1Clr) 0%,var(--b0Clr) 50%,var(--b1Clr) 100%);
      padding: .5rem;
      border-radius: .6rem
  }

  .two .lt {
      grid-column: 1/span 1;
      text-align: right;
      padding: 0 .7rem 0 0;
      color: var(--a4Clr);
      font-size: 1.05rem;
      vertical-align: baseline;
      align-self: start
  }

  .two .rt {
      grid-column: 2/span 1;
      padding: 0 0 0 .4rem;
      color: var(--b3Clr);
      font-size: 1.1rem;
      font-weight: 400;
      vertical-align: baseline;
      white-space: nowrap
  }

  .two .rt.flow {
      white-space: normal
  }

  .two .ct {
      grid-column: 1/-1;
      text-align: center
  }

  .two .rt sup {
      vertical-align: baseline;
      position: relative;
      top: -.4rem
  }

  .floatLt {
      float: left;
      margin: 0 10px 10px 0;
      text-align: center
  }

  .floatRt {
      float: right;
      margin: 0 0 10px 10px;
      text-align: center
  }

  .overline {
      border-top: .11rem solid
  }

  .bar {
      display: inline-block;
      text-decoration: none;
      position: relative
  }

  .bar:after {
      content: '';
      display: block;
      width: 100%;
      height: 50%;
      position: absolute;
      top: .25rem;
      left: 0;
      border-top: .11rem solid
  }

  .js {
      position: relative;
      border-radius: 10px;
      text-align: center;
      margin: auto;
      border: 1px solid var(--b0Clr)
  }

  .jsCanvas {
      color: var(--txtClr);
      background-color: var(--bgClr)
  }

  .can {
      border-radius: 10px;
      background-color: var(--b0Clr)
  }

  .pop {
      padding: .4rem;
      border-radius: .5rem;
      background-color: var(--b2Clr);
      box-shadow: .4rem .4rem .3rem 0 rgba(40,40,40,.75);
      transition: all linear .5s;
      text-align: center
  }

  .control {
      border-radius: .6rem;
      padding: .3rem;
      transition: all linear .3s;
      background: linear-gradient(to bottom right,var(--b0Clr) 0%,var(--b1Clr) 100%)
  }

  .wow {
      padding: .3rem 1.1rem;
      border-radius: 1rem;
      background: linear-gradient(120deg,var(--a0Clr) 0%,var(--a1Clr) 100%);
      border: .1rem solid var(--bgClr);
      box-shadow: 0 0 .9rem var(--a2Clr)
  }

  .sect {
      background-color: var(--b1Clr);
      border-radius: .3rem;
      padding: .1rem;
      margin: .2rem;
      border: 1px inset
  }

  .label {
      color: var(--txtClr);
      padding: .1rem;
      outline-style: none
  }

  .item {
      color: var(--txtClr);
      background-color: var(--a0Clr);
      padding: .15rem;
      font: 1.2rem Arial;
      outline-style: none
  }

  .item:hover {
      background-color: var(--b2Clr)
  }

  .input {
      color: var(--txtClr);
      background-color: var(--b1Clr);
      border: 2px inset var(--b1Clr);
      border-radius: .6rem;
      padding: 3px;
      font: 1.2rem Arial;
      outline-style: none;
      text-align: center
  }

  .input:hover {
      box-shadow: inset 2px 2px 2px var(--b2Clr),inset -2px -2px 2px var(--b2Clr)
  }

  .output {
      color: var(--txtClr);
      background-color: var(--a1Clr);
      border: 1px solid var(--b2Clr);
      border-radius: .6rem;
      padding: 3px;
      font: 1.2rem Arial;
      text-align: center
  }

  .outbig {
      padding: .5rem;
      background: linear-gradient(120deg,var(--b0Clr) 0%,var(--b1Clr) 100%);
      border-radius: 1.9rem;
      border: .1rem solid var(--b2Clr)
  }

  .select {
      font: 1.1rem Arial;
      color: var(--txtClr);
      background: var(--b0Clr);
      padding: 1px;
      line-height: 1.9rem;
      text-align: center;
      cursor: pointer
  }

  .radioz {
      color: var(--txtClr);
      background-color: var(--b2Clr);
      border: 1px solid #fff;
      border-radius: .3rem;
      padding: .3rem;
      margin: .2rem
  }

  .radio {
      font: 1.2rem Arial;
      background: var(--b0Clr);
      padding: 2px 10px;
      border-radius: .6rem;
      line-height: 1.9rem;
      text-align: left
  }

  .radio input {
      cursor: pointer
  }

  .radio input+label {
      cursor: pointer
  }

  .radio input:checked+label {
      font-weight: 700
  }

  .script {
      color: var(--bgClr)
  }

  .copyrt {
      font: .7rem Arial;
      color: #79a
  }

  .btn {
      text-align: center;
      margin: .1rem;
      padding: 0 .5rem;
      text-decoration: none;
      font: bold 0.9rem/1.6rem Arial,sans-serif;
      color: var(--b3Clr);
      border: .1rem solid var(--b2Clr);
      border-radius: .6rem;
      cursor: pointer;
      background: linear-gradient(to top right,var(--b2Clr) 0%,var(--b2Clr) 30%,var(--bgClr) 100%);
      outline-style: none;
      user-select: none
  }

  .btn:hover,.btn.lo:hover,.btn.hi:hover {
      background: linear-gradient(to top,var(--a2Clr) 0%,var(--b0Clr) 100%);
      color: var(--txtClr)
  }

  .btn.yy {
      border: solid .1rem rgba(255,220,130,.5);
      background: linear-gradient(to top right,rgba(255,220,130,1) 0%,var(--bgClr) 100%)
  }

  .btn.lo {
      border: solid .1rem var(--b2Clr);
      background: linear-gradient(to top right,var(--b2Clr) 0%,var(--b2Clr) 100%)
  }

  .btn.hi {
      border: solid .1rem #fff;
      background: linear-gradient(to top right,var(--a2Clr) 0%,var(--a1Clr) 50%,var(--a0Clr) 100%);
      box-shadow: .1rem .1rem .3rem var(--b2Clr)
  }

  .playbtn {
      display: inline-block;
      position: relative;
      margin-right: .2em;
      padding: .6em;
      border-radius: 100%;
      background: linear-gradient(to top right,var(--b2Clr) 0%,var(--b2Clr) 20%,var(--bgClr) 100%);
      border: none;
      cursor: pointer;
      outline-style: none;
      user-select: none
  }

  .playbtn:hover {
      background: linear-gradient(to top right,var(--a2Clr) 0%,var(--b0Clr) 100%)
  }

  .playbtn:before,button:after {
      content: " ";
      position: absolute
  }

  .playbtn:active {
      top: .05em;
      box-shadow: 0 .02em .03em rgba(0,0,0,.4)
  }

  .play:before {
      left: .4em;
      top: .26em;
      border: .33em solid transparent;
      border-left-width: .52em;
      border-left-color: var(--b3Clr)
  }

  .play:hover:before {
      border-left-color: var(--txtClr)
  }

  .pause:before,.pause:after {
      display: block;
      left: .33em;
      top: .32em;
      width: .22em;
      height: .54em;
      background-color: var(--b3Clr)
  }

  .pause:after {
      left: .62em
  }

  .pause:hover:before,.pause:hover:after {
      background-color: var(--txtClr)
  }

  .slider {
      background: 0 0
  }

  .slider::-moz-range-progress {
      background-color: var(--b3Clr);
      height: .5rem
  }

  .slider::-moz-range-track {
      background-color: var(--b2Clr)
  }

  #menuLt {
      display: table-cell;
      width: 7rem;
      height: 3.8rem;
      vertical-align: middle;
      padding: 0 0 0 1.9rem;
      text-decoration: none;
      background: transparent url(images/style/arrow-tall-left.svg) no-repeat left center
  }

  #menuRt {
      display: table-cell;
      width: 7rem;
      height: 3.8rem;
      vertical-align: middle;
      padding: 0 1.9rem 0 0;
      text-decoration: none;
      background: transparent url(images/style/arrow-tall-right.svg) no-repeat right center
  }

  #menuWide {
      display: block
  }

  #menuTiny {
      display: block;
      position: fixed;
      right: .2rem;
      top: .2rem;
      height: 3.6rem;
      text-align: left;
      margin: 0
  }

  #menuSlim {
      display: none;
      position: fixed;
      left: 100px;
      right: 100px;
      top: 6px
  }

  .menu {
      height: 2.5rem;
      text-align: center;
      margin: 0 auto .3rem
  }

  .menu ul {
      display: inline;
      margin: 0;
      padding: 0;
      font-size: 0
  }

  .menu li {
      display: inline-block;
      position: relative;
      margin: 0;
      padding: .4rem .1rem;
      border: 1px solid var(--a1Clr);
      background-color: var(--a0Clr)
  }

  .menu li:hover {
      background-color: var(--b2Clr)
  }

  .menu li:before {
      content: none
  }

  .menu li a {
      font-size: .9rem;
      text-decoration: none;
      padding: .4rem .4rem .3rem;
      height: 1.6rem;
      color: var(--txtClr)
  }

  .menu li ul {
      display: block;
      position: absolute;
      right: 0;
      top: 27px;
      z-index: 1
  }

  .menu li li {
      display: block;
      background-color: var(--b1Clr)
  }

  .menu ul ul {
      display: none
  }

  .menu ul li:hover>ul {
      display: block
  }

  #hdr {
      position: absolute;
      top: 0;
      width: 100%;
      height: 300px;
      margin: auto;
      z-index: -1;
      background: var(--hdrImg) no-repeat fixed center top
  }

  .adv #hdr {
      position: absolute;
      top: 0;
      width: 100%;
      height: 300px;
      margin: auto;
      z-index: -1;
      background: var(--hdrAdvImg) no-repeat fixed center top
  }

  #logo {
      position: absolute;
      left: 7px;
      top: 70px
  }

  #logo img {
      width: 104px;
      height: 69px
  }

  #cookOK {
      position: absolute;
      right: 2px;
      top: 42px;
      border-radius: .6rem;
      background-color: var(--b1Clr);
      padding: 3px .5rem;
      font: .9rem Arial
  }

  #adHide {
      position: absolute;
      right: 3px;
      top: 78px;
      text-align: center;
      font: 1rem Verdana;
      padding: 2px
  }

  #adsHide1 {
      display: inline
  }

  #adsShow1 {
      display: none
  }

  #linkto {
      height: 48px;
      margin: 0 0 95px auto;
      width: 270px
  }

  #linkfb,#linktw,#linkpi,#linkgp,#linkem,#linkus,#linkli {
      display: block;
      width: 48px;
      height: 48px;
      float: left;
      margin-left: 5px;
      text-indent: -9999px;
      background: transparent url(images/style/links48.svg) no-repeat
  }

  #linkfb:hover,#linktw:hover,#linkpi:hover,#linkgp:hover,#linkem:hover,#linkus:hover,#linkli:hover {
      background-color: var(--b2Clr);
      border-radius: .2rem
  }

  #linkfb {
      background-position: 0 0
  }

  #linktw {
      background-position: -50px 0
  }

  #linkpi {
      background-position: -100px 0
  }

  #linkgp {
      background-position: -150px 0
  }

  #linkem {
      background-position: -250px 0
  }

  #linkus {
      background-position: -300px 0;
      width: 50px
  }

  #linkli {
      background-position: -350px 0
  }

  .hov:hover {
      background-color: var(--a1Clr);
      border-radius: .5rem
  }

  #search {
      display: block;
      position: relative;
      height: 3rem;
      margin: -4px auto 10px;
      width: 330px
  }

  #searchFld {
      width: 16rem;
      margin: 1px;
      padding: .3rem;
      border-radius: .4rem;
      font-size: 1.1rem;
      color: var(--b4Clr);
      background-color: var(--a0Clr);
      border-color: var(--b2Clr);
      text-align: left
  }

  #searchFld:hover {
      background-color: var(--b2Clr)
  }

  #searchBtn {
      width: 50px;
      height: 50px;
      vertical-align: middle;
      margin-bottom: 1px;
      border: 1px solid var(--a2Clr);
      border-radius: .3rem;
      background: var(--a0Clr) url(images/style/search.svg) no-repeat;
      cursor: pointer;
      border-style: outset
  }

  #searchBtn:hover {
      background-color: var(--b2Clr)
  }

  ::placeholder {
      color: var(--b3Clr);
      opacity: 1
  }

  .foot {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-content: flex-start;
      align-items: flex-start;
      background-color: var(--b0Clr);
      margin-top: 30px;
      padding: 10px 0;
      border-top: 1px solid blue
  }

  .footCol {
      order: 0;
      flex: 0 1 auto;
      align-self: auto;
      text-align: left
  }

  .footHdr {
      font: 700 1.1rem Arial;
      margin: 0 0 5px -6px
  }

  .footItem {
      margin: 0 0 2px
  }

  .footCol a {
      padding: 3px;
      text-decoration: none
  }

  #footMenu {
      text-align: center;
      margin: .8rem auto .5rem
  }

  #copyrt {
      margin: .6rem auto .3rem;
      text-align: center;
      font: .9rem Arial;
      color: var(--o1Clr)
  }

  #themeIcon1 {
      margin: .1rem;
      vertical-align: top
  }

  #themeIcon2 {
      margin-top: .4rem;
      vertical-align: top
  }

  .themelite,.themedark {
      display: inline-block;
      width: 48px;
      height: 34px;
      text-indent: -9999px;
      background: transparent url(images/style/theme.svg) no-repeat
  }

  .themelite {
      background-position: 0 0
  }

  .themedark {
      background-position: -50px 0
  }

  #themeSwitch {
      position: absolute;
      left: 3px;
      top: 80px;
      width: 60px;
      height: 34px
  }

  #themeSwitch input {
      opacity: 0;
      width: 0;
      height: 0
  }

  #themeSlider1 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #2196f3;
      cursor: pointer;
      transition: .4s
  }

  #themeSlider1:before {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      left: 0;
      bottom: 4px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      transition: .4s;
      box-shadow: 0 0 15px #2020203d;
      background: #fff url(images/style/theme-lite.svg) center no-repeat
  }

  #themeSlider1:hover {
      box-shadow: 0 0 5px 5px var(--b4Clr)
  }

  input:checked+#themeSlider1 {
      background-color: var(--b3Clr)
  }

  input:checked+#themeSlider1:before {
      transform: translateX(24px);
      background: #fff url(images/style/theme-dark.svg) center no-repeat
  }

  #themeSlider1.round {
      border-radius: 30px;
      height: 30px
  }

  #themeSlider1.round:before {
      border-radius: 50%
  }
}

@media(max-width: 700px) {
  html {
      font-size:14px
  }

  .example {
      margin: .9rem .3rem 1.9rem 1.3rem
  }

  .related a {
      margin-left: 170px
  }

  .def {
      padding: .2rem .6rem
  }

  #search {
      margin-top: 1px;
      margin-bottom: 25px
  }

  #searchFld {
      width: 14rem
  }

  #linkto {
      margin: 0 0 130px auto
  }

  #menuLt {
      display: none
  }

  #menuRt {
      display: none
  }

  #menuWide {
      display: none
  }

  #menuTiny {
      display: block;
      position: fixed;
      right: .2rem;
      top: .2rem;
      height: 3.6rem;
      text-align: left;
      margin: 0
  }

  #menuSlim {
      display: none;
      position: fixed;
      left: 10px;
      right: 10px;
      top: 6px
  }

  #adHide {
      display: none
  }

  #adsHide1 {
      display: none
  }

  #adsShow1 {
      display: none
  }
}

@media print {
  .noprint {
      display: none
  }

  #logo {
      position: absolute;
      left: 0;
      top: 0
  }

  #hdr {
      display: none
  }

  #adTop {
      display: none
  }

  #adend {
      display: none
  }

  #footer {
      display: none
  }

  #gtran {
      display: none
  }

  #adHide {
      display: none
  }

  #adsHide1 {
      display: none
  }

  #adsShow1 {
      display: none
  }

  #linkto {
      display: none
  }

  #linktort {
      display: none
  }

  #menuWide {
      display: none
  }

  #menuSlim {
      display: none
  }

  #menuTiny {
      display: none
  }

  #search {
      display: none
  }

  .related {
      display: none
  }

  #menuLt {
      display: none
  }

  #menuRt {
      display: none
  }

  #advText {
      display: none
  }

  .bg {
      height: 6.3rem
  }

  #bodybg {
      background: 0 0
  }

  body {
      background: 0 0
  }

  h1 {
      color: var(--b4Clr)
  }
}