* { margin: 0; padding: 0; font-size: 15px; text-transform: lowercase; }

body {
  background: #ffffff;
  color: #000;
  color-scheme: light dark;
  margin: 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #ffffff;
  }
}

ul, ol { padding-left: 1.5em; }

#page, .page {
  width: 30em;
  text-align: justify;
}

.topnav, .titlebar {
  overflow: hidden;
}

.topnav, .titlebar, .tab {
  margin-bottom: 1em;
}

.titlebar:empty { display: none; }

.nav { line-height: 1.4; }

a, .nav {
  text-decoration: underline;
  color: #0000ee;
}

.nav-placeholder {
  text-decoration: none;
  opacity: 0.5;
}

a[href=""] { text-decoration: none; opacity: 0.5; }

.topnav a, .topnav .nav-placeholder { margin-right: 0.25em; }

.tab { line-height: 1; }

.tab button,
.tab > a,
.tab label {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  line-height: 1;
  margin: 0!important;
  text-decoration: underline;
  vertical-align: top;
}

.tab > a,
.tab label {
  color: #0000ee;
}

.tab button a { color: inherit; text-decoration: inherit; }

.tab button.active,
#tab-sozai:checked ~ .shell label[for="tab-sozai"],
#tab-widgets:checked ~ .shell label[for="tab-widgets"],
#tab-code:checked ~ .shell label[for="tab-code"],
#tab-fonts:checked ~ .shell label[for="tab-fonts"] {
  text-decoration: none;
  color: inherit;
}

.tab-toggle {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.tabcontent { display: none; }

#tab-sozai:checked ~ .shell #sozai,
#tab-widgets:checked ~ .shell #widgets,
#tab-code:checked ~ .shell #code,
#tab-fonts:checked ~ .shell #fonts {
  display: block;
}

table, th, td {
  border: 1px solid;
}

.bw {
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .bw {
    mix-blend-mode: screen;
  }
}

#poem {
  width: 16em;
  margin-top: 1em;
  padding-top: 1em;
  font-style: italic;
  padding-left: 1em;
  border-top: 1px dotted;
}

#poem span {
 font-style: normal;
}

#poem:first-child {
  border-top: none;
}