@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");
}

html {
  scroll-behavior:smooth;
}

::selection {
  color:#000000;
  background:#a0522d;
}

body {
  margin:0;
  color:#ffffff;
  font-size:1rem;
  background:#000000;
  line-height:1.2rem;
  font-family:"Ari-W9500", sans-serif;
}

h1 {
  font-weight:bold;
}

a {
  color:#a0522d;
}

a:hover {
  text-decoration:none;
}

#back {
  top:0;
  left:0;
  position:fixed;
}

details > summary, #tag-filters label {
  cursor:pointer;
}

.center {
  text-align:center;
}

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

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

.mobile-only {
  display:none;
}

.pc-only {
  display:block;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
}

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

.pinned {
  color:#000000;
  margin:1rem 0;
  min-width:100%;
  font-size:smaller;
  padding:.5rem 1rem;
  background:#a0522d;
  border:3px solid #a0522d;
}

.pinned summary {
  margin:.5rem;
  color:#000000;
  font-size:1.5rem;
  font-weight:bold;
  padding-bottom:.5rem;
  border-bottom:2px dotted #000000;
}

.pinned details > summary {
  list-style-type:none;
}

.pinned details > summary::-webkit-details-marker {
  display:none;
}

.pinned details > summary::before {
  content:"→";
  margin-right:.18rem;
}

.pinned details[open] > summary::before {
  content:"↓";
  margin:0 .5rem;
}

#status > details[open] {
  padding-bottom:.5rem;
}

#status ul {
  margin:0;
  padding:0;
  background:#a0522d;
}

#status li {
  padding:.2em;
  list-style-type:none;
}

#status li:nth-child(odd) {
  color:#000000;
  font-size:1.2em;
  font-weight:bold;
}

#status li:nth-child(even) {
  color:#a0522d;
  background:#000000;
  padding-inline:.8em;
}

#status li a {
  color:#a0522d;
}

#status li a:hover {
  text-decoration:none;
}

.post {
  color:#ffffff;
  min-width:100%;
  background:#000000;
  margin-bottom:1rem;
  border:3px solid #a0522d;
  padding:.1rem .8rem .2rem .9rem;
}

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

.post div + img {
  margin:.5rem 0 .2rem 0;
}

.post-header {
  color:#a0522d;
  padding:.5rem 0;
  font-weight:bold;
}

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

.post a {
  color:#a0522d;
}

.post p {
  margin:0;
  padding:.5rem 0;
  border-top:2px dotted #a0522d;
}

more {
  display:block;
  margin:.2em 0 .5em 0;
}

.post a:hover {
  text-decoration:none;
}

.post li {
  list-style-type:square;
}

.readmore summary {
  color:#a0522d;
  font-weight:bold;
  padding:0 0 .5rem 0;
  list-style-type:none;
}

.readmore summary:after {
  content:"click to reveal spoilers";
}

.readmore[open] > summary:after {
  content:"click to hide spoilers";
}

.readmore[open] > summary {
  border-bottom:0;
  padding-bottom:0;
}

.readmore p {
  border-top:0;
}

.tags {
  padding:.4rem 0;
  border-top:2px dotted #a0522d;
}

.tags a, .tags span {
  color:#a0522d;
  font-size:small;
  padding:.2rem .5rem;
  text-decoration:none;
}

.tags a:hover {
  font-weight:bold;
}

.tagged:has(input:checked) article {
  display:none;
}

.tagged:has(#all:checked) article,
.tagged:has(#tv:checked) article[class~="tv"],
.tagged:has(#movie:checked) article[class~="movie"],
.tagged:has(#book:checked) article[class~="book"],
.tagged:has(#music:checked) article[class~="music"],
.tagged:has(#video-game:checked) article[class~="video-game"],
.tagged:has(#rewatch:checked) article[class~="rewatch"],
.tagged:has(#review:checked) article[class~="review"] {
  display:inline-block;
}

#tag-filters label {
  margin-left:.5rem;
  background:#a0522d;
  margin-block:.3rem;
  display:inline-block;
  padding:0 .5rem .1rem 0;
  border:2px solid #000000;
}

#tag-filters label:hover {
  background:#a0522d;
  text-decoration:underline;
}

#tag-filters label:has(input:checked) {
  color:#a0522d;
  background:#000000;
}

#tag-filters input {
  appearance:none;
}

#credit p {
  margin-top:0;
}

#credit a:after {
  content:"↗";
}

#credit a {
  color:#a0522d;
}

#credit a:hover {
  text-decoration:none;
}

.outlink:after {
  content:"↗";
}

.emote {
  margin:1px;
  vertical-align:bottom;
  image-rendering:pixelated;
}

@media only screen and (max-width:800px) {
  body {
    background:#a0522d;
  }
  
  #back {
    display:none;
  }
  
  .pinned {
    border:0;
    margin:1em 0 0 0;
    padding:0;
    max-width:100%;
    outline:1px solid #a0522d;
  }
  
  .mobile-only {
    display:block;
  }
  
  .pc-only {
    display:none;
  }
  
  main {
    margin:auto;
    height:auto;
    max-width:100%;
  }
  
  .post {
    border:0;
    padding:0;
    margin:.5rem 0;
    max-width:100%;
    outline:1px solid #a0522d;
  }
  
  .post p {
    padding:.5rem;
  }
  
  .post-header {
    padding:.5rem;
  }
  
  .readmore summary {
    padding-left:.5rem;
  }
}