@font-face {
  font-family:"Good Old DOS";
  src:url("/assets/Good_Old_DOS.woff") format("woff");
}

@font-face {
  font-family:"Jogan Soft";
  src:url("/assets/JoganSoft-Regular.woff") format("woff");
}

:root, .theme-dark {
  --text:#ebd5ab;
  --accent1:#628141;
  --accent2:#76916c;
  --background:#1b211a;
}

.theme-light { 
  --text:#1b211a;
  --accent1:#628141;
  --accent2:#76916c;
  --background:#ebd5ab;
}

button[aria-pressed="true"] {
  background:var(--text);
  color:var(--background);
}

body {
  margin:auto;
  padding:15px;
  color:var(--text);
  font-size:1em;
  max-width:900px;
  font-family:"Jogan Soft";
  background-color:var(--background);
}

h1 {
  display:block;
  font-size:2em;
  font-weight:bold;
  text-align:center;
  margin:0.2em 0 0.5em 0;
}

p {
  display:block;
  text-align:center;
  margin:1em 0 1em 0;
}

b {
  font-weight:bold;
}

b {
  font-style:italic;
}

ul {
  margin:auto;
  display:block;
  max-width:700px;
  padding-left:20px;
  list-style-type:square;
}

li {
  display:list-item;
}

a:link, a:visited {
  color:var(--text);
  cursor:pointer;
  text-decoration:underline;
}

a:hover, a:active {
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}

.outlink:after {
  content:"↗";
  font-size:1em;
  line-height:1em;
}

back {
  opacity:.5;
}

name {
  color:var(--accent1);
  display:block;
  margin:2em 0 0 0;
  font-weight:bold;
  text-align:center;
}

text {
  display:block;
  text-align:left;
  margin:1em 0 0 0;
}

sound {
  color:var(--accent2);
  display:block;
  text-align:left;
  margin:1em 0 0 0;
  font-style:italic;
  text-decoration:none;
}

click {
  margin:0;
  color:var(--accent2);
  display:block;
  text-align:left;
  font-style:italic;
  text-decoration:none;
}

list {
  margin:auto;
  display:block;
  max-width:700px;
}

list > a:link, a:visited {
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}

list > a:hover, a:active {
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}

.item {
  margin:5px 0;
  display:flex;
  color:var(--text);
  padding:5px 8px;
  text-decoration:none;
  border:1px solid var(--accent1);
  background-color:var(--accent1);
  justify-content:space-between;
}

.item:nth-child(even) {
  border:1px solid var(--accent2);
  background-color:var(--accent2);
}

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

.item:nth-child(even):hover {
  color:var(--accent2);
  background-color:var(--background);
}

#switch {
  top:8px;
  left:8px;
  border:0;
  outline:0;
  z-index:5;
  font-size:2em;
  cursor:pointer;
  position:absolute;
  color:var(--text);
  background:transparent;
}

footer {
  margin-top:15px;
  text-align:center;
}

::selection {
  color:var(--background);
  background-color:var(--accent1);
}

::-webkit-scrollbar {
  color:var(--accent1);
}

::-webkit-scrollbar-track {
  background:var(--background);
}

::-webkit-scrollbar-thumb {
  background:var(--accent1);
}

::-webkit-scrollbar-thumb:hover {
  background:var(--accent2);
}

::-webkit-resizer {
  color:var(--accent1);
  background:var(--background);
}