@font-face {
     font-family: "linja pimeja";
     src: url("/tokipona/linjapimeja19.woff")
}
@font-face {
     font-family: "insa pi supa lape";
     src: url("/tokipona/supalape.woff")
}
@font-face {
 font-family: "sitelen pona pona";
 src: url("/tokipona/sitelen-pona-pona.otf");
}
html {
 min-height: 100%;
 overflow-y: scroll;
 scrollbar-color: #00e436 #000000;
 scrollbar-width: auto;
}
body {
 background: #fff1e8;
 color:#000000;
 min-height: 100%;
 margin: 0;
}
pre {
 font-size: 12pt;
}
blockquote {
 margin: 6pt;
 padding-inline: 1em;
 border-inline-start: 4px solid #c2c3c7;
}
p {
 line-height: 1.5em;
}
table {
 background: #fff1e8;
 border: 2px solid #83769c;
 border-collapse: collapse;
}
th, td {
    border: 1px solid #c2c3c7;
    padding: 4pt;
}
.header {
 background: #008751;
 color: #fff1e8;
 font-family: sans-serif;
 min-height: 1px;
}
.header_text {
 padding-block: 0.5em;
}
.header a, .header a:visited {
 color: inherit;
}
.header h2, .header h3 {
 display: inline;
}
.footer, .navbar {
 background: #000000;
 color: #fff1e8;
 text-align: center;
 font-family: sans-serif;
 font-size: 0.8em;
}
.navbar {
 background: #404A68 url("/menu_background.gif");
}
.footer {
 padding: 12pt 6pt;
}
.nav_linkmenu a {
 display: inline-block;
 width: 128px;
 height: 32px;
 line-height: 32px;
 background: url("/menu_button.gif");
 font-weight: bold;
 color: #fff1e8;
 text-shadow: 1px 1px 0 #000000;
 text-decoration: none;
}
.nav_linkmenu a:hover, .nav_linkmenu a:focus{
 background: url("/menu_button_hover.gif");
}
.nav_linkmenu a:focus {
 text-decoration: underline 2px;
}
.nav_linkmenu a:active {
 background: url("/menu_button_sel.gif");
}
.footer a, .footer a:visited {
 display: inline-block;
 color: #29adff;
}
.content {
 margin: 0 6pt;
 color: #000000;
 font-family: serif;
}
.content img {
 max-width: 100%;
}
.content a:link, .content a:visited {
 color: #1d2b53;
}
.content a:focus, .content a:hover {
 color: #000000;
}
.info, .warning, .error {
 margin: 6pt;
 padding-inline-start: 0.5em;
 font-family: sans-serif;
 overflow: auto;
}
.info:before, .warning:before, .error:before {
 font-family: monospaced;
 float:inline-end;
 font-size: 3em;
 padding-inline-end: 0.2em;
}
.info:before {
 content: "★";
}
.warning:before {
 content: "⚠";
}
.error:before {
 content: "⛔";
}
.info {
 border-inline-start: 4px solid #83769c;
 background: #29adff;
 color: #1d2b53;
}
.warning {
 border-inline-start: 4px solid #ffa300;
 background: #ffccaa;
 color: #ab5236;
}
.error {
 border-inline-start: 4px solid #ff004d;
 background: #ff77a8;
 color: #7e2553;
}
.spoiler {
 border-inline-start: 4px solid #83769c;
 color:;
 visibility: hidden;
}
.content .linkbuttons a img {
  display: inline-block;
  border: 1px solid #83769c;
  padding: 2px;
}
.content .linkbuttons a img[title] {
  border: 2px solid #00e436;
  padding: 1px;
}
.pona .latin {
 font-family: monospace;
}
.pona.pimeja {
 font-family:"linja pimeja";
 font-size: 2em;
}
.pona.supalape {
 font-family:"insa pi supa lape";
 font-size: 2em;
}
.pona.ponapona {
 font-family:"sitelen pona pona";
 font-size: 1.5em;
}
.itime,.tenpo {
 float: right;
 width: 128pt;
 padding: 2px;
 margin: 4px;
 display: inline-block;
 vertical-align: bottom;
 font-family: sans-serif;
 font-size: 10pt;
}
.itime {
 border: 1px solid #83769c;
 background: #000000;
 color: #fff1e8;
}
.tenpo {
 display: none;
 border: 1px solid #9B6E2D;
 background: #f5ee9b;
 color: #404a68;
}
.itime-bar,.tenpo-bar {
 height: 2px;
 width: 100%;
}
.itime-text,.tenpo-text {
 text-align: end;
}
.def {
 text-decoration: dotted underline;
}
 #itime-progress {
 width: 0%;
 height: 100%;
 background: #00e436;
}
@media screen and (min-width: 480px) {
 html {
  background:#1d2b53 url("/hexagonal_bg.gif");
  background-attachment: fixed;
 }
 body {
  max-width: 608pt;
  box-shadow: 0 0 0 1px #000000;
  margin: auto;
 }
 .header {
 }
 .header_text {
  padding-inline: 2em;
 }
 .content {
  padding-inline: 1em;
  padding-block: 1em;
 }
 .info, .warning, .error {
  padding: 6pt;
  padding-inline-start: 1em;
 }
}
@media screen and (min-width:768pt) {
 body {
  box-shadow: 0 0 0 1px #000000;
  max-width: 768pt;
  margin: 24pt auto;
 }
}
@media (prefers-color-scheme: dark) {
 body {
     background: #000000;
     color: #fff1e8;
 }
 .content {
     color: #fff1e8;
 }
 .content a:link, .content a:visited {
     color: #29adff;
 }
 .content a:focus, .content a:hover {
     color: #fff1e8;
 }
 .warning {
     background: #ab5236;
     color: #ffccaa;
     border-inline-start-color: #ffec27;
 }
 .info {
     background: #1d2b53;
     color: #29adff;
     border-inline-start-color: #83769c;
 }
 .error {
     background: #7e2553;
     color: #fff7a8;
     border-inline-start-color: #ff004d;
 }
 table {
     background: #000000;
     border-color: #83769c;
 }
 th,td {
     border-color: #5f574f;
 }
}