@font-face {
   font-family: "Planelagos";
   font-weight: bold;
   src: local("Planelagos"), url("Planelagos.ttf");
   font-display: swap;
}

* {
   margin: 0rem;
   padding: 0rem;
}

body {
   font-family: sans-serif;
   color: #ACE;
   background-color: #000;
   background-image: url("../img/background.png");
   background-attachment: fixed;
   max-width: 45rem;
   margin: 1rem auto;
}
.mirror {
   background-color: #113;
   background-image: url("../img/background-mirror.png");
}

p,h1,h2,h3,h4, ul,ol, figure,details {
   margin: 0.75rem 0rem;
}
footer p {
   text-align: center;
}

h1, h2, h3, h4 {
   font-family: "Planelagos", sans-serif;
   font-weight: bold;
}
h1 {
   text-align: center;
}
h2 {
   background-color: #123;
   background-color: rgba(34,68,102,0.5);
   background-image: linear-gradient(to right,
                     rgba(51,85,119,0.5),
                     rgba(17,51,85,0.5));
   border-bottom: 0.15rem #79B solid;
   margin-top: 1.5rem;
   clear: both;
}
h3 {
   border-bottom: 0.1rem #79B solid;
   margin-top: 1.125rem;
   clear: both;
}

h1 { font-size: 2rem; }
h2,h4 { font-size: 1.5rem; }
h3 { font-size: 1rem; }
@media (max-width: 30rem) {
   h1 { font-size: calc(5vw + 0.5rem); }
   h2,h4 { font-size: calc(2.5vw + 0.75rem); }
}
@media (max-width: 20rem) {
   h1 { font-size: 1.5rem; }
   h2,h4 { font-size: 1.25rem; }
}

header p {
   font-style: italic;
   font-size: 0.9rem;
}

ul, ol {
   margin-left: 2rem;
}
ul ul, ul ol, ol ul, ol ol {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
   margin-left: 1.5rem;
}
li {
   margin: 0.375rem 0rem;
}
.toc li {
   margin: 0rem;
}
@media (min-width: 20rem) {
   .list-4col {
      columns: 2;
      margin-left: 0rem;
   }
   .list-4col li {
      list-style: none;
      margin-left: 0rem;
      text-align: center;
      break-inside: avoid;
      page-break-inside: avoid;
   }
}
@media (min-width: 25rem) {
   .list-4col {
      columns: 3;
   }
}
@media (min-width: 30rem) {
   .list-2col {
      columns: 2;
   }
   .list-2col li {
      break-inside: avoid;
      page-break-inside: avoid;
   }
   .list-4col {
      columns: 4;
   }
}
.icon-list {
   text-align: center;
}
.icon-list li {
   display: inline-block;
   vertical-align: top;
   margin: 0rem 1rem;
   max-width: 10rem;
}
.blogbar {
   text-align: center;
   display: block;
}
.blogbar li {
   display: inline;
}
.blogbar li+li::before {
   content: " | ";
}

.self-scroll {
   overflow: auto;
}

table {
   border-collapse: collapse;
   margin: 0.75rem auto;
}
caption {
   font-size: 0.875em;
   font-style: oblique;
}
td,th {
   text-align: center;
   border: 0.1rem #79B solid;
   padding: 0rem 0.375rem;
}
th {
   background-color: #135;
   background-color: rgba(34,102,170,0.5);
}
td {
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
}
.bitfield th[scope="col"] {
   font-size: 0.75em;
   white-space: nowrap;
}
.imgtable img {
   margin: 0.25rem 0rem;
}

code,kbd,samp, pre {
   font-family: monospace, monospace;
}
code,kbd,samp {
   font-size: 1em;
}
pre {
   overflow: auto;
   font-size: 0.9rem;
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
   border: 0.1rem #79B solid;
   margin: 0.75rem 0.5rem;
   padding: 0.25rem 0.5rem;
   /*max-height: 11.5em;*/
}
pre small {
   font-size: 1em;
   font-style: italic;
   color: #579;
}

.math {
   text-align: center;
}

img {
   max-width: 100%;
   height: auto;
}
figure {
   display: block;
   text-align: center;
}
figcaption {
   font-style: italic;
   text-align: center;
}
.sidepic {
   float: right;
   max-width: 20%;
}
.sidepic img {
   max-width: 100%;
}

blockquote {
   margin: 0.75rem 1.5rem;
   padding: 0.25rem 1rem;
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
   border: 0.1rem #79B solid;
}
blockquote cite {
   font-weight: bold;
}
blockquote time {
   font-size: 0.75rem;
}

a {
   color: inherit;
   font-weight: bold;
}
a[href] {
   color: #FFF;
   font-weight: inherit;
   text-decoration: underline;
}
a[href]:visited {
   color: #DCF;
}
a[href]:focus, a[href]:hover {
   color: #003;
   background-color: #ACE;
   border: none;
   outline: none;
}
a[href^=http]::after {
   content: "⇗";
}
a[download][href]::after {
   content: "⇓";
}
a[download][href$=".zip"]::before {
   content: url("../img/dl-icon-zip.png");
}
.urllink {
   overflow-wrap: break-word;
   word-wrap: break-word;
}
.imglink {
   text-decoration: none;
}
.imglink[href]:focus, .imglink[href]:hover {
   background-color: inherit;
   border: none;
   outline: none;
   filter: drop-shadow(-0.1rem -0.1rem 0px #ACE)
           drop-shadow(0.1rem -0.1rem 0px #ACE)
           drop-shadow(-0.1rem 0.1rem 0px #ACE)
           drop-shadow(0.1rem 0.1rem 0px #ACE);
}
.footlink {
   font-size: 0.75rem;
   vertical-align: super;
}
.back {
   text-align: right;
}
.back a::after {
   content: " ↑";
   font-weight: bold;
}
.download {
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
   border: 0.1rem #79B solid;
   margin: 0.75rem 1.5rem;
   padding: 0.5rem 1rem;
}
.download p {
   margin: 0rem;
}
.download-title {
   font-family: "Planelagos", sans-serif;
   font-weight: bold;
}
.download-label {
   font-weight: bold;
}

details {
   border: 0.1rem #79B solid;
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
}
summary {
   cursor: pointer;
   background-color: #135;
   background-color: rgba(34,102,170,0.5);
   padding: 0.25rem 0.5rem;
}
summary:focus, summary:hover {
   color: #003;
   background-color: #ACE;
   border: none;
   outline: none;
}
details[open] summary {
   border-bottom: 0.1rem #79B solid;
}

.info,
.warning {
   margin: 0.75rem 0.5rem;
   padding: 0rem 0.5rem;
   clear: both;
}
.info {
   border: 0.1rem #79B solid;
   background-color: #013;
   background-color: rgba(0,34,102,0.5);
}
.warning {
   color: #FCC;
   border: 0.1rem #800 solid;
   background-color: #200;
   background-color: rgba(68,0,0,0.5);
}
.info::before,
.info::after,
.warning::before,
.warning::after {
   display: block;
   position: relative;
   content: " ";
   clear: both;
}
.info .sidepic,
.warning .sidepic {
   float: left;
   margin-top: 0.5rem;
}

.youtube a {
   display: block;
   position: relative;
   z-index: 0;
   margin-left: auto;
   margin-right: auto;
   width: 32rem;
   height: 24rem;
}
@media (max-width: 40rem) {
   .youtube a {
      width: 75vw;
      height: 56.25vm;
   }
}
.youtube a::after {
   content: "";
}
.youtube a span {
   position: absolute;
   top: 0.5rem;
   left: 1rem;
   z-index: 1;
   font-size: 1.5em;
   color: #FFF;
   text-shadow: 0.1rem 0.1rem 0.1rem #000;
}
.youtube small {
   font-style: italic;
}
.youtube a:hover span,
.youtube a:focus span {
   color: #ACE;
}
.youtube a img {
   position: absolute;
   top: 0rem;
   left: 0rem;
   z-index: -1;
}

.fm-instr ul {
   display: block;
   margin: 0rem;
}
.fm-instr li {
   display: inline;
   display: inline-block;
   list-style: none;
   font-weight: bold;
   margin: 0rem;
}
.fm-instr li+li::before {
   content: "\00A0 ·\00A0";
}
.fm-instr th:nth-child(1), .fm-instr td:nth-child(1),
.fm-instr th:nth-child(5), .fm-instr td:nth-child(5),
.fm-instr th:nth-child(7), .fm-instr td:nth-child(7),
.fm-instr th:nth-child(10),.fm-instr td:nth-child(10) {
   border-right-width: 0.25rem;
}

.interviewer { color: #CCC; }

/***************************************************************************
  Print-only styles
  This part is trash and needs a complete overhaul, sorry (and some elements
  are just plain broken and apparently browser makers expect us to solve
  everything by throwing more scripts at it…)
 ***************************************************************************/

@media not print {
   .printonly {
      display: none;
   }
}

@media print {
   * {
      color: #000 !important;
      -webkit-print-color-adjust: exact;
      color-adjust: exact;
   }
   body {
      background-color: #FFF !important;
      background-image: none !important;
   }
   h2 {
      background-color: #DEF;
      background-image: linear-gradient(to right,
                        rgba(188,222,255,0.5),
                        rgba(255,255,255,0.5));
      border-bottom-color: #135;
   }
   pre, blockquote, td, .info, .download {
      background-color: #DEF;
      border-color: #579;
   }
   th {
      background-color: #BCD;
      border-color: #579;
   }
   .warning {
      background-color: #FDD;
      border-color: #C00;
   }
   pre {
      max-height: none;
   }
   pre small {
      color: #468 !important;
   }
   a {
      text-decoration: none;
   }
   a[href]::after {
      content: " [https://plutiedev.com/" attr(href) "]";
      font-size: 0.9em;
      color: #468 !important;
   }
   a[href^=http]::after {
      content: " [" attr(href) "]";
   }
   a[href^="#"]::after {
      content: "";
   }
   nav, .toc {
      display: none;
   }
   audio {
      display: none;
   }
   .audio a {
      color: #468 !important;
   }
   .circuit img {
      filter: grayscale(100%) invert(100%) contrast(120%);
   }
   .interviewer {
      background-color: #EEE !important;
      color: #000 !important;
   }
}