@font-face {
  font-family:"Ari-W9500";
  src:url('https://foggybear42.net/fonts/ari-w9500.woff') format('woff');
}

@font-face {
  font-weight:bold;
  font-family:"Ari-W9500";
  src:url('https://foggybear42.net/fonts/ari-w9500-bold.woff') format('woff');
}

:root {
  --background:#000000;
  --color:#a0522d;
  --link:#a0522d;
  --bodyfont:"Ari-W9500", sans-serif;
  --accent:#000000;
  --accentborder:#a0522d;
  --header:#000000;
  --headerborder:#a0522d;
}

* {
  margin:0;
  padding:0;
}

body {
  line-height:1.5;
  color:var(--color);
  font:1.15rem var(--bodyfont);
  background:var(--background);
}

main ul {
  padding-left:0;
  line-height:1.5;
  list-style-type:none;
}

main ul li:before {
  content:"›";
  line-height:0.5em;
  padding-right:8px;
}

.hyperfix:after {
  content:"★";
  padding-left:5px;
  line-height:0.5em;
}

p {
  line-height:1.5;
  margin:10px 0 10px 0;
}

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

a:hover, a:focus {
  text-decoration:underline dashed;
}

.outlink:after {
  content:"⤤";
  line-height:0.5em;
}

header#top {
  width:95%;
  margin:25px auto;
  min-width:300px;
  background:var(--header);
  border:1px solid var(--headerborder);
  box-shadow:rgba(0,0,0,0.1) -3px 3px 3px;
}

header#top h1 {
  font-size:1.5em;
  margin-bottom:10px; 
}

.header-icon {
  float:left;
  width:65px;
  height:65px;
  margin-right:20px;
}

nav {
  font-size:1rem;
}

nav ul {
  display:inline;
  list-style:none;
}

nav ul li {
  width:120px;
  text-align:center;
  display:inline-block;
  padding:6px 2px 6px 0;
  border-right:1px solid var(--headerborder); 
}

nav a:link, nav a:visited {
  text-decoration:none;
}

nav a:hover, nav:focus {
  font-weight:bold;
  text-decoration:none;
}

.active, .active a {
  font-weight:bold;
}

main {
  display:grid;
  margin:40px 70px;
  grid-template-columns:repeat(3, 1fr);
}

section {
  margin:20px;
  border:1px solid;
  background:var(--accent);
  padding:15px 15px 5px 15px;
  border-color:var(--accentborder);
  box-shadow:rgba(0,0,0,0.1) -3px 3px 3px;
}

#todo li:before, #shrines li:before {
  content:"□";
  line-height:0.5em;
  padding-right:8px;
  vertical-align:1px;
}

.listheader {
  border-color:var(--accentborder);
}

.handle {
  color:var(--accentborder);
}

header.listheader {
  display:flex;
  margin-bottom:0;
  padding-bottom:5px;
  border-bottom:0.5px solid; 
  justify-content: space-between;
}

h2 {
  font-size:1.1em;
}

h2 .subtitle {
  font-size:0.8em;
  font-weight:normal;
}

.handle {
  cursor:grab;
  font-size:1.5em;
  font-weight:bold;
  line-height:0.5em;
  vertical-align:top;
}

.listicon {
  width:80px;
  float:right;
  height:80px;
  margin:0 0 5px 10px;
}

.listtext {
  padding:10px;
  overflow:auto;
}

.foot {
  padding:10px;
  font-size:0.9em;
  text-align:right;
  border-top:0.5px solid;
}

.foot p {
  margin:0;
}

.foot p:after {
  content:"✎";
  font-size:1.2em;
  line-height:0.5em;
  padding-right:8px;
  display:inline-block;
  transform:scaleX(-1);
}

footer#bottom {
  width:95%;
  padding:5px;
  font-size:1rem;
  min-width:300px;
  margin:25px auto;
  text-align:center;
  background:var(--header);
  border:1px solid var(--headerborder);
  box-shadow:rgba(0,0,0,0.1) -3px 3px 3px;
}

::-webkit-scrollbar {
  width:auto;
  color:var(--accentborder);
}

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

::-webkit-scrollbar-thumb {
  background:var(--accentborder);
  border:2px solid var(--accentborder);
}

::-webkit-scrollbar-thumb:hover {
  background:var(--accent);
  border:1px solid var(--accentborder);
}

::selection {
  color:var(--accent);
  background-color:var(--accentborder);
}

@media screen and (max-width: 899px) {
  header#top {
    margin-top:20px;
    width:calc(100% - 40px);
  }

  header#top h1 {
    font-size:1.4em;
  }

  main {
    margin:auto;
    display:inline;
    width:calc(100% - 40px);
  }

  .listtext {
    height:auto;
    max-height:250px;
  }

  .handle {
    display:none;
  }
  
  .foot {
    font-size:0.85em;
  }

  h2 {
    font-size:1.2em;
  }

  footer#bottom {
    width:75%;
  }
}