/*I use a layout builder made by sadgirl, thank you sadgirl!*/ 
/*https://goblin-heart.net/sadgrl/projects/layout-builder/*/

:root {
  --body-bg-image: url('https://64.media.tumblr.com/f0cd3a4cc4961c94a014378bb18af5ca/b34d6593b928839a-b8/s250x400/4f22ec0534c72ac227dd2ad3ef9b9874aba06127.gifv');
  --leftside-bg-image: url('https://64.media.tumblr.com/5e61b24e7471e499e3da549bea5389db/b34d6593b928839a-c7/s250x400/dac2eae576584f1c581d817e9e59be2c59736d7b.gifv');
  --box-bg-image: url('https://64.media.tumblr.com/8f824d58718b80befc3bc5a7d03f1344/b34d6593b928839a-c8/s250x400/be5f6100966a03825b44ec80fdf1bfffb1d54f3c.gifv');
  --box-bg-image-scd: url('https://64.media.tumblr.com/8f824d58718b80befc3bc5a7d03f1344/b34d6593b928839a-c8/s250x400/be5f6100966a03825b44ec80fdf1bfffb1d54f3c.gifv');
}

/*font*/
@font-face {
  font-family: Tinos;
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Regular.eot');
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Regular.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/Tinos-Regular.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/Tinos-Regular.woff') format('woff');    
}

@font-face {
  font-family: Tinos;
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Bold.eot');
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Bold.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/Tinos-Bold.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/Tinos-Bold.woff') format('woff');
  font-weight: bold;  
}

@font-face {
  font-family: Tinos;
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Italic.eot'); 
  src: url('https://angelhotspot.neocities.org/Font/Tinos-Italic.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/Tinos-Italic.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/Tinos-Italic.woff') format('woff');
  font-style: italic;
}

@font-face {
  font-family: Tinos;
  src: url('https://angelhotspot.neocities.org/Font/Tinos-BoldItalic.eot');
  src: url('https://angelhotspot.neocities.org/Font/Tinos-BoldItalic.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/Tinos-BoldItalic.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/Tinos-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: Pixel Operator;
  src: url('https://angelhotspot.neocities.org/Font/PixelOperator.eot');
  src: url('https://angelhotspot.neocities.org/Font/PixelOperator.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/PixelOperator.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/PixelOperator.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Pixel Operator;
  src: url('https://angelhotspot.neocities.org/Font/PixelOperator-Bold.eot'); 
  src: url('https://angelhotspot.neocities.org/Font/PixelOperator-Bold.eot#iefix') format('embedded-opentype'), url('https://angelhotspot.neocities.org/Font/PixelOperator-Bold.ttf') format('truetype'), url('https://angelhotspot.neocities.org/Font/PixelOperator-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
/*end of font*/

/*body*/
body {
  background-image: url(shrine/background3.gif);
  background-repeat: repeat;
  background-size: auto;
  color: white;
  display: flex;
  margin: 0 auto;
  font-family: "Tinos", "Pixel Operator";
}
/*end of body*/

* {
  box-sizing: border-box;
}

img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  overflow: clip;
}

.erwin { 
    transition: all .2s ease-in-out; 
}

.erwin:hover {
    transform: scale(1.1); 
}

/*layout*/
#container {
  max-width: 7000px;
  margin: 0 auto;
  padding-left: 250px;
  padding-right: 0px;
}

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

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

/*navbar*/
#navbar {
  height: 40px;
  background-color: #13092D;
  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: #ED64F5;
  font-weight: 800;
  text-decoration: none;
}

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

#flex {
  display: flex;
}

/*sidebar*/
aside {
  width: 200px;
  padding: 20px;
  font-size: smaller;
}
/*end of sidebar*/

/*main*/
main {
  background-color: rgba(225,225,225,0);
  flex: 1;
  padding: 5px;
  order: 2;
  color: #ffff
}

#leftSidebar {
  order: 1;
  background: var(--leftside-bg-image);
  color: #ffff;
  background-size: 100px 100px;
  border: 1px solid #ffff;
  border-style:dotted; 
  border-width:4px;
  position: fixed;
  width: 250px;
  height: 620px;
  padding-top: 8px;
  padding-right: 0px;
  padding-bottom: 8px;
  padding-left: 0px;
  overflow-x: hidden;
  top: 20px;
  left: 20px;
  bottom: 20px;
  box-shadow: 0px 0px 20px #3cb500;
}
/*end of main*/

/*footer*/
.footer {
  background-color: rgba(255, 225, 225, 0);
  width: 950px;
  min-height: 80px;
  color: white;
  z-index: 5px;
}
/*end of footer*/

/*text*/
h1, h2, h3 {
  color: #ffff;
}

h1 {
  font-size: 25px;
}

strong {
  color: #ffff;
}
/*end of text*/

/*button*/
.button {
  padding: 6px 8px 6px 8px;
  background: linear-gradient(60deg, #3cb500, #c8c8c8, #3cb500);
  border: 3px outset;
  border-color: #ffff;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  display: block;
  margin: 0px auto;
  font-family: 'Pixel Operator', serif;
  box-shadow: 0px 0px 10px #3cb500;
}

.button:hover {
  background: linear-gradient(60deg, #47d600, #c8c8c8, #47d600);
  box-shadow: 0px 0px 15px #47d600;
}

.button:active {
  padding: 6px 8px 6px 8px;
  background: linear-gradient(60deg, #47d600, #c8c8c8, #47d600);
  border: 3px inset;
  border-color: #47d600;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  display: block;
  margin: 1px auto;
  font-family: 'Pixel Operator';
  box-shadow: 0px 0px 20px #47d600;
}

.button-icon {
  max-height: 25px;
  padding-top: 0px;
}
/*end of button*/

/*box*/
.box {
  background-color: var(--box-bg-image);
  background-size: 20px;
}

.box-scd {
  background-image: var(--box-bg-image-scd);
  border-style: ridge; 
  border-width: 3px;
  border-color: #ffff;
  box-shadow: 0px 0px 10px #3cb500;
}

.box-trd {
  background: url('https://64.media.tumblr.com/8f824d58718b80befc3bc5a7d03f1344/b34d6593b928839a-c8/s250x400/be5f6100966a03825b44ec80fdf1bfffb1d54f3c.gifv');
  padding: 10px;
  border-style: dotted;
  border-width: 3px; 
  border-color: #ffff;
  box-shadow: 0px 0px 10px #3cb500;
} 

p.box-trd {
  font-family: "Pixel Operator";
}
/*end of box*/

/*topbar*/
#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}
/*end of topbar*/

/*glowing text*/
.glow {
  font-size: 18px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 10px #3cb500, 0 0 15px #3cb500, 0 0 20px #3cb500, 0 0 25px #3cb500, 0 0 30px #3cb500;
  }
  
  to {
    text-shadow: 0 0 1px #fff, 0 0 5px #3cb500, 0 0 10px #3cb500, 0 0 15px #3cb500, 0 0 20px #3cb500, 0 0 25px #3cb500, 0 0 30px #3cb500;
  }
}
/*end of glowing text*/

/*scroll bar*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #c8c8c8;
  box-shadow: inset 0 0 5px #ffff;
  box-shadow: outset 0 0 5px #ffff;
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #47d600;
  box-shadow: inset 0 0 5px #3cb500;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #47d600;
  box-shadow: inset 0 0 5px #3cb500;
}

::-webkit-scrollbar-track-piece {
  background: rgba(225,225,225,0);
}

::-webkit-scrollbar-corner
  background: rgba(225,225,225,0);
}
/*end of scroll bar*/

/*98.css*/
.window {
  padding: 3px;
}

.title-bar {
  background: linear-gradient(70deg, #3cb500 55%, #000, #47d600);
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label="Minimize"],
.title-bar-controls button[aria-label].minimize {
  background-image: url("https://angelhotspot.neocities.org/icon/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}

.title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button[aria-label].maximize {
  background-image: url("https://angelhotspot.neocities.org/icon/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Maximize"]:disabled,
.title-bar-controls button[aria-label].maximize:disabled {
  background-image: url("https://angelhotspot.neocities.org/icon/maximize-disabled.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Close"],
.title-bar-controls button[aria-label].close {
  margin-left: 2px;
  background-image: url('https://angelhotspot.neocities.org/icon/close.svg');
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}

.window-body {
  margin: 8px;
  background: #c0c0c0;
}

button, label, input, legend, textarea, select, option, table, ul.tree-view, .window, .title-bar,
li[role=tab] {
  font-family: "Pixel Operator", Arial;
}

button,
input[type="submit"],
input[type="reset"] {
  box-sizing: border-box;
  border: none;
  color: transparent;
  text-shadow: 0 0 #2222;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffff;
  border-radius: 0;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
}

button.default,
input[type="submit"].default,
input[type="reset"].default {
  box-shadow: inset -2px -2px #a0a0a0, inset 1px 1px #a0a0a0, inset 2px 2px #ffff, inset -3px -3px #808080, inset 3px 3px #dfdfdf;
}

.vertical-bar {
  width: 4px;
  height: 20px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #a0a0a0,
    inset 1px 1px #ffff, inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
  box-shadow: inset 2px 2px #a0a0a0, inset -1px -1px #a0a0a0, inset -2px -2px #ffff, inset 3px 3px #808080, inset -3px -3px #dfdfdf;
  text-shadow: 1px 1px #2222;
}

button.default:not(:disabled):active,
input[type="submit"].default:not(:disabled):active,
input[type="reset"].default:not(:disabled):active {
  box-shadow: inset 2px 2px #a0a0a0, inset -1px -1px #a0a0a0, inset -2px -2px #ffff, inset 3px 3px #808080, inset -3px -3px #dfdfdf;
}

@media (not(hover)) {
  button:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover {
    box-shadow: inset -1px -1px #ffff,
    inset 1px 1px #a0a0a0, inset -2px -2px #dfdfdf,
    inset 2px 2px #808080;
  }
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  border: 0;
}

:disabled,
:disabled + label,
input[readonly],
input[readonly] + label {
  color: #808080;
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
:disabled + label {
  text-shadow: 1px 1px 0 #ffff;
}

ul.tree-view {
  display: block;
  background: #ffff;
  box-shadow: inset -2px -2px #ffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  padding: 6px;
  margin: 0;
}

ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: #3cb500;
  color: #ffff;
}

ul.tree-view ul,
ul.tree-view li {
  margin-top: 3px;
}

ul.tree-view ul {
  margin-left: 16px;
  padding-left: 16px;
  /* Goes down too far */
  border-left: 1px dotted #808080;
}

ul.tree-view ul > li {
  position: relative;
}
ul.tree-view ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 6px;
  width: 12px;
  border-bottom: 1px dotted #808080;
}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 7px;
  bottom: 0px;
  width: 8px;
  background-color: #000;
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: -22px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  text-align: center;
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 8px;
  height: 9px;
  line-height: 8px;
  margin-right: 5px;
  padding-left: 1px;
  background-color: #fff;
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

ul.tree-view details > summary::marker,
ul.tree-view details > summary::-webkit-details-marker {
  content: "";
}
/*end of 98.css*/

ul {
  background-color: #000;
}

.stacked {
  position: absolute;
}

.stacked:nth-child(2) {
  position: absolute;
}

.stacked:nth-child(3) {
  position: absolute;
}