:root {
  --header-image:url('https://files.catbox.moe/r8i1qu.png');
  --body-bg-image:url('https://files.catbox.moe/gsqk2h.2500w');
  --content:#000000;
}

.center {
  margin-left:70px;
  margin-right:70px;
}

body {
  font-family:'Raleway', sans-serif;
  margin:0;
  background-color:#000000;
  background-size:100%;
  color:#ffffff;
  background-image:var(--body-bg-image);
}

* {
  box-sizing:border-box;
}

#container {
  max-width:880px;
  margin:0 auto;
}

#container a {
  color:#9d37a8;
  font-weight:bold;
}

#header {
  width:100%;
  background-color:black;
  height:150px;
  background-image:var(--header-image);
  background-size:100%;
}

#navbar {
  height:40px;
  background-color:#000000;
  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:#9d37a8;
  font-weight:800;
  text-decoration:none;
}

#navbar li a:hover {
  color:#9d37a8;
  text-decoration:underline;
}

#flex {
  display:flex;
}

aside {
  background-color:#000000;
  width:180px;
  padding:20px;
}

main {
  background-color:#000000;
  flex:1;
  padding:0px;
  order:2;
}

#leftSidebar {
  margin-right:10px;
  position:relative;
  order:1;
}

#rightSidebar {
  order:3;
}

#list {
  margin-left:-18px;
  margin-top:-2px;
  margin-bottom:5px;
}

#sublist {
  margin-left:-18px;
  margin-top:2px;
  margin-bottom:5px;
}

#sublist-div {
  height:155px;
  width:140px;
  overflow:auto;
  border:2px solid darkmagenta;
  padding:8px
}

#backlink {
  position:absolute;
  bottom:15px;
  left:23px;
}

#main {
  height:345px;
  width:100%;
  overflow:auto;
  border:2px;
  padding:20px
}

footer {
  background-color: #000000;
  width:100%;
  height:40px;
  padding:10px;
  text-align:center;
}

h1,h2,h3 {
  color:#9d37a8;
}

h1 {
  text-align:center;
  font-size:25px;
}

h3 {
  text-align:center;
}

strong {
  color:#9d37a8;
}

.box {
  background-color:#000000;
  border:1px solid #000000;
  padding:10px;
}

#topBar {
  width:100%;
  height:30px;
  padding:10px;
  font-size:smaller;
  background-color:#000000;
}

a:link {
  color:#9d37a8;
  background-color:transparent;
  text-decoration:none;
}
  
a:visited {
  color:#9d37a8;
  background-color:transparent;
  text-decoration:none;
}
  
a:hover {
  color:#9d37a8;
  background-color:transparent;
  text-decoration:underline;
}
  
a:active {
  color:#9d37a8;
  background-color:transparent;
  text-decoration:underline;
}

.outlink:after {
content:url(outlink.png);
padding-left:3px;
vertical-align:top;
}

.outlink:hover::after {
content:url(outlink.png);
padding-left:3px;
vertical-align:top;
}

* {
  scrollbar-color:auto;
  scrollbar-color:#9d37a8;
}

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

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

*::-webkit-scrollbar-thumb {
  background-color:#9d37a8;
  border-radius:10px;
  border:3px solid #000000;
}

sbox{
  height:390px;
  width:120px;
  overflow:auto;
  border:3px;
  padding:5px;
  color:#9d37a8
}

::selection {
  background:#9d37a8;
  color:#000;
}

div.indent-a {
  text-indent:30px;
}

.zoom {
  transition:transform .2s;
}

.zoom:hover {
  -ms-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  transform:scale(1.1); 
}

.lightbox {
  display:none;
  position:fixed;
  z-index:999;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:1em;
  background:rgba(0, 0, 0, 0.8);
}

.lightbox:target {
  display:block;
}

.lightbox span {
  display:block;
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

@media only screen and (max-width:800px) {
  #flex {
    -wrap:wrap;
  }
  
  aside {
    width:100%;
  }
  
  main {
    order:1;
  }
  
  #leftSidebar {
    order:2;
  }
  
  #rightSidebar {
    order:3;
  }
  
  #navbar ul {
    flex-wrap:wrap;
  }
}