:root {
  --header-image:url('header.png');
  --content:black;
}

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

@font-face {
  font-family:Im-Fell;
  src: url('https://files.catbox.moe/6vxrgu.otf');
}

body {
  font-family:'Im-Fell';
  margin:0;
  background-color:black;
  color:#ffffff;
  background-image:url("bg.gif");
}

* {
  box-sizing:border-box;
}

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

#container a {
  color:#1dace4;
  font-weight:bold;
}

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

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

#navbar li a:hover {
  color:#1dace4;
  text-decoration:underline;
}

#flex {
  display:flex;
}

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

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

#leftSidebar {
  order:1;
}

#rightSidebar {
  order:3;
}

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

h1,h2,h3 {
  color:#1dace4;
}

h1 {
  font-size:25px;
}

strong {
  color:#1dace4;
}

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

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

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

a:link {
  color:#1dace4;
  background-color:transparent;
  text-decoration:none;
}

a:visited {
  color:#1dace4;
  background-color:transparent;
  text-decoration:none;
}

a:hover {
  color:#1dace4;
  background-color:transparent;
  text-decoration:underline;
}

a:active {
  color:#1dace4;
  background-color:transparent;
  text-decoration:underline;
}

* {
  scrollbar-color:auto;
  scrollbar-color:#1dace4;
}

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

*::-webkit-scrollbar-track {
  background:black;
}

*::-webkit-scrollbar-thumb {
  background-color:#1dace4;
  border-radius:10px;
  border:3px solid black;
}

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

::selection {
  background:#1dace4;
  color:black;
}

.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;
}

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

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

.zoom {
  transition:transform .2s;
}

.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;
}

.help {
  cursor:help;
  font-weight:bold;
  text-decoration:dotted underline;
  color:#1dace4;
}