:root {
  --accent:#a0522d;
}

@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 {
  color:#ffffff;
  font-size:1rem;
  scroll-behavior:smooth;
  background-color:#000000;
  font-family:"Ari-W9500", sans-serif;
  cursor:url("/images/cursors/pom.png"), default;
}

ul {
  padding-left:0;
  list-style-type:none;
}

ul li:before {
  content:"›";
  padding-left:8px;
  padding-right:8px;
}

li::marker {
  color:rgba(0, 0, 0, 0);
}

a {
  color:#a0522d;
  background-color:#000000;
  text-decoration:underline;
}

a:hover {
  color:#000000;
  background-color:#a0522d;
  text-decoration:underline;
}

strong {
  color:#a0522d;
}

#container {
  width:800px;
  margin:0 auto;
  align-items:center;
  justify-content:center;
  border:3px solid #a0522d;
}

#header {
  padding:0;
  text-align:center;
  border-bottom:3px solid #a0522d;
}

#headerImg {
  width:95%;
  padding:10px 0 8px 0;
  image-rendering:pixelated;
}

.navbar {
  margin:5px;
  padding:8px 0;
  color:#000000;
  font-size:1.26rem;
  font-weight:bold;
  text-align:center;
  background-color:#a0522d;
}

.navbar a {
  color:#a0522d;
  border:3px solid #000000;
  background-color:#000000;
}

.navbar a:hover {
  color:#000000;
  border:3px solid #000000;
  background-color:#a0522d;
}

.button {
  text-decoration:none;
  padding:1px 6px 1px 3px;
}

.button:hover {
  text-decoration:none;
}

#mainContent {
  margin:0;
  padding:0 5px;
  display:flex;
}

#side {
  width:185px;
  overflow:hidden;
  padding-right:5px;
}

.sidebox {
  margin-bottom:5px;
  border:3px solid #a0522d;
}

.subheader {
  color:#000000;
  font-size:1rem;
  font-weight:bold;
  letter-spacing:3px;
  padding:2px 0 5px 5px;
  background-color:#a0522d;
}

.emote {
  text-align:center;
  padding-bottom:6px;
}

.sideContent {
  color:#ffffff;
  letter-spacing:0;
}

.sideContent ul, li {
  margin:0;
  padding-left:0;
  list-style-type:none;
}

.sideContent ul {
  margin-bottom:10px;
}

.sideContent ul li:before {
  content:"›";
  padding-left:0;
  padding-right:5px;
}

.sideContent font {
  margin-left:5px;
}

.sideContent hr {
  margin-left:10px;
  margin-right:5px;
}

.scroll {
  margin:0 auto;
  overflow:scroll;
  overflow-x:hidden;
  padding:8px 0 5px 10px;
  border:2px solid #000000;
}

#switchcode {
  width:135px;
  margin-bottom:5px;
}

#buttonbox {
  text-align:center;
}

#buttonbox a, #buttonbox a:hover, #buttonbox a:active {
  color:rgba(0, 0, 0, 0);
  background:rgba(0, 0, 0, 0);
}

.siteButton {
  width:86px;
  border:2px solid #a0522d;
  image-rendering:pixelated;
}

#main {
  width:600px;
}

.mainbox {
  padding:0;
  margin-bottom:5px;
  border:3px solid #a0522d;
}

.mainContent {
  color:#ffffff;
  font-size:1.1rem;
  padding:12px 15px;
}

#woven {
  width:600px;
  margin-bottom:2px;
  image-rendering:pixelated;
}

#bottom {
  margin:0;
  display:flex;
}

.bottombox {
  padding:0;
  width:405px;
  margin-bottom:5px;
  border:3px solid #a0522d;
}

.bottomContent {
  padding:15px;
  text-align:center;
}

#castiel, #dean {
  height:200px;
  margin-right:10px;
}

#sam {
  height:200px;
}

#musicPlayer {
  width:185px;
  overflow:hidden;
  padding-left:5px;
}

#musicbox {
  height:260px;
  margin-bottom:5px;
  border:3px solid #a0522d;
}

#musicbox marquee {
  width:100%;
  font-weight:bold;
}

#musicbox button {
  width:169px;
  height:auto;
  padding:5px 0;
  margin:0 5px;
  background:#000000;
  border:2px solid #a0522d;
}

#musicbox button:hover {
  background:#a0522d;
}

#musicContent {
  color:#ffffff;
  letter-spacing:0;
}

#cover {
  width:165px;
  margin:5px 5px 0 5px;
  border:2px solid #a0522d;
}

#footer {
  clear:both;
  padding:3px;
  color:#000000;
  font-size:14px;
  text-align:center;
  background-color:#a0522d;
  border-top:1px solid #a0522d;
}

#footer p {
  margin:0;
}

#footer a {
  color:#000000;
  background-color:#a0522d;
}

#footer a:hover {
  color:#a0522d;
  background-color:#000000;
}

#top {
  right:20px;
  z-index:99;
  bottom:20px;
  color:#a0522d;
  position:fixed;
  padding:5px 8px;
  border:1px solid #a0522d;
  background-color:#000000;
}

#top:hover {
  color:#000000;
  background-color:#a0522d;
}

.help {
  cursor:help;
  text-decoration:dotted underline;
}

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

.wip {
  text-decoration:line-through;
}

.new:after {
  padding-left:5px;
  vertical-align:top;
  content:url("https://foggybear42.neocities.org/images/new.gif");
}

.spoiler {
  color:#2f2f2f;
  background-color:#2f2f2f;
}

.spoiler:active {
  color:#ffffff;
  background-color:rgba(0, 0, 0, 0);
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  
  to {
    transform:rotate(360deg);
  }
}

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

::-webkit-scrollbar {
  width:auto;
  color:#a0522d;
}

::-webkit-scrollbar {
  width:16px;
}

::-webkit-scrollbar-track {
  background:#000000;
}

::-webkit-scrollbar-thumb {
  background:#a0522d;
  border:2px solid #a0522d;
}

::-webkit-scrollbar-thumb:hover {
  background:#000000;
  border:1px solid #a0522d;
}

::-webkit-resizer {
  color:#a0522d;
  background:#000000;
  cursor:url("/images/pointers/pom.png"), pointer;
}

@media only screen and (max-width:800px) {
  #container {
    width:98%;
  }
  
  #mainContent {
    display:block;
  }
  
  #side {
    width:100%;
    padding-right:0;
  }
  
  #side {
    width:100%;
  }
  
  #main {
    width:100%;
  }
  
  #woven {
    width:100%;
  }
  
  #bottom {
    display:block;
  }
  
  .bottombox {
    width:100%;
  }
  
  #musicPlayer {
    width:100%;
    padding-left:0;
  }
}