:root {
  --site-bg:#000000;
  --post-bg:#141414;
  --post-text:#ffffff;
  --post-header-text:#a0522d;
  --border-color:#a0522d;
  --selected-bg:#a0522d;
  --selected-text:#000000;
}

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

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

html {
  scroll-behavior:smooth;
}

::selection {
  color:var(--selected-text);
  background:var(--selected-bg);
}

::-webkit-scrollbar {
  width:1em;
}

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

::-webkit-scrollbar-thumb {
  border-radius:.3em;
  background:var(--post-bg);
  border:2px solid var(--selected-bg);
}

::-webkit-scrollbar-thumb:hover {
  cursor:pointer;
  background:var(--selected-bg);
  border:2px solid var(--selected-bg);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-size:1em;
  line-height:1.2em;
  color:var(--post-text);
  background:var(--site-bg);
  background-attachment:fixed;
  font-family:"Ari-W9500", sans-serif;
}

h1, nav, .pinned summary {
  font-weight:bold;
}

details > summary {
  cursor:pointer;
}

a {
  color:var(--post-header-text);
}

a:hover {
  text-decoration:none;
  color:var(--post-header-text);
}

.center {
  text-align:center;
}

.small-text {
  font-size:smaller;
}

.no-border {
  padding:0;
  border:none;
}

.mobile-only {
  display:none;
}

.pc-only {
  display:block;
}

main {
  width:600px;
  margin:auto;
}

.post {
  margin:1em 0;
  min-width:100%;
  border-radius:.5em;
  color:var(--post-text);
  background:var(--post-bg);
  padding:0 .8rem .2rem .8rem;
  border:2px solid var(--border-color);
}

.post img {
  max-width:100%;
}

.post div + img {
  margin-top:1em;
}

.post-header {
  padding:.8em 0;
  font-weight:bold;
  color:var(--post-header-text);
  border-bottom:2px solid var(--border-color);
}

.post time {
  float:right;
  margin:.2em;
  font-size:smaller;
  font-weight:normal;
}

.post li {
  list-style-image:url("images/star.png");
}

.readmore {
  margin-bottom:1em;
}

.readmore summary {
  font-weight:bold;
  list-style-type:none;
  color:var(--post-header-text);
}

.readmore[open] > summary {
  display:none;
}

.readmore[open] {
  padding-top:1em;
  border-top:2px dashed var(--button-bg);
}

.tags {
  padding:.4em 0;
  border-top:2px solid var(--border-color);
}

.tags span {
  font-size:small;
  padding:.2em .5em;
  text-decoration:none;
  color:var(--post-header-text);
}

footer {
  bottom:.5em;
  font-size:small;
  text-align:center;
  padding-bottom:.8em;
  color:var(--sidebar-text);
}

.outlink:after {
  content:"↗";
  line-height:1.2em;
}

@media only screen and (max-width:800px) {
  body {
    padding:0 1em;
  }
  
  main {
    width:100%;
    margin:auto;
  }
}