:root {
  --header-image: url(https://mxalice.art/images/selfheader.png);
  --body-bg-image: url(https://mxalice.art/images/seasonal/autumn/pumpkinbg.gif);
  --divider: url(https://mxalice.art/images/seasonal/autumn/ghost_divider.gif);
  /* colors */
  --bg1: #71594c;
  --bg2: #4b3930;
  --bg3: #312621;
  --text: #e1ccb2;
  --accent: #dd6b32;
}
@font-face {
  font-family: txt;
  src: url(https://mxalice.art/fonts/AUTUMNichigayamincho.ttf);
}
@font-face {
  font-family: header;
  src: url(https://mxalice.art/fonts/AUTUMNpickyside.otf);
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #dd6b32 #312621;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #312621;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #dd6b32;
    border-radius: 10px;
    border: 3px none #ffffff;
  }
/* Start https://www.cursors-4u.com */ 
* {cursor: url(https://cur.cursors-4u.net/food/foo-5/foo439.cur), auto !important;}
/* End https://www.cursors-4u.com */
body {
  font-family: 'txt', sans-serif;
  font-size:14pt;
  margin: 0;
  background-size: 65px;
  color: var(--text);
  background-image: var(--body-bg-image);
  overflow:hidden;
}
* {
  box-sizing: border-box;
}
#container {
  max-width: 900px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
 }
#container a {
  color: var(--accent);
  font-weight: bold;
}
#header {
  width: 100%;
  height: 150px;
  background-image: var(--header-image);
  background-size: 100%;
  background-position:center;
}
#navbar {
  height: 40px;
  background-color: var(--bg3);
  width: 100%;
}
#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}
#navbar li {
  padding-top: 10px;
}
#navbar li a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
#navbar li a:hover {
  color: var(--text);
  text-decoration: underline;
}
#flex {
  display: flex;
}
aside {
  background-color: var(--bg2);
  width: 220px;
  padding: 20px;
  font-size: smaller;
  overflow:auto;
  height:575px;
}
main {
  background-color: var(--bg1);
  flex: 1;
  padding: 20px;
  order: 2;
  overflow:auto;
  height:575px;
}
*/ #leftSidebar {
  order: 1;
}
#rightSidebar {
  order: 3;
}
footer {
  background-color: var(--bg3);
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}
h1, h2, h3 {
  color: var(--accent);
  font-family:'header',sans-serif;
  font-weight:normal;
  margin:5px;
}
h1 {
  font-size:40pt;
}
h2 {
  font-size:30pt;
}
h3 {
  font-size:22pt;
  margin:0;
}
strong {
  color: var(--accent);
}
.small {
  font-size:10pt;
}
.box {
  background-color: var(--bg3);
  border: 1px solid var(--accent);
  padding: 10px;
  overflow:auto;
  height:300px;
}
#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: var(--bg3);
}
img {
  width:100%;
  border: 1px solid var(--accent);
  border-radius:0;
}
td {
  width:25%;
}
.featured {
  width:75%;
  margin:0 auto;
  display:block;
}
ul {
  margin-left:-10px;
}
ul li {
  color:var(--accent);
}
ul li span {
  color:var(--text);
}
.divider {
  background-image:var(--divider);
  background-position:center;
  background-size:contain;
  height:20px;
  margin:1em;
}
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }
  aside {
    width: 100%;
  }
  main {
    order: 1;
  }
  #leftSidebar {
    order: 2;
  }
  #navbar ul {
    flex-wrap: wrap;
  }
}