.layer1 {
  position:absolute;
  z-index:1;
}

.layer2 {
  position:absolute;
  z-index:2;
}

#drag {
  cursor:move;
}

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

#rightSidebar {
  margin-left:10px;
  order:3;
}

:root {
  --header-image:url('');
  --body-bg-image:url('images/bg.png');
  --content:#000;
}

#flex {
  display:flex;
}

* {
  box-sizing:border-box;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

body {
  font-family:'Nunito',sans-serif;
  margin:0;
  color:#fceaff;
  background-color:black;
  background:rgba(0, 0, 0, 0.5); 
  background-image:var(--body-bg-image);
}

html, body{
  padding:0px;
  margin:0px;
  font-family:'Raleway',sans-serif;
  color:#FFF;
  height:100%;
}

main {
  background-color:#000;
  flex:1;
  padding:20px;
  order:2;
  border:3px solid #632A6E;
}

aside {
  background-color:#000;
  width:360px;
  padding:0px 12px 12px 12px;
  font-size:smaller;
  border:3px solid #632A6E;
}

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

footer {
  background-color:#000;
  width:100%;
  height:50px;
  padding:7px 8px 8px 8px;
  text-align:center;
  border:3px solid #632A6E;
}

h1,h2,h3 {
  color:#632A6E;
  text-align:center;
}

h1 {
  font-size:25px;
}

strong {
  color:#632A6E;
}

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

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

#container a {
  font-weight:bold;
}

.box {
  background-color:#000000;
  border:2px solid #632A6E;
  padding:10px;
  overflow:auto;
  height:330px;
}

ul li {
  list-style-type:square;
}

@media only screen and (max-width: 800px) {
  .pagedoll {
    opacity:0;
    height:1px;
  }
  
  #flex {
    flex-wrap:wrap;
  }
  
  #header {
    width:100%;
    height:0px;
    background-size:100%;
  }
  
  main {
    order:1;
    width:100%;
  }
  
  aside {
    width:100%;
  }
  
  footer {
    height:50px;
  }
  
  #leftSidebar {
    order:2;
    width:100%;
    margin-top:15px;
    margin-right:0px;
    padding-bottom:100px;
  }
  
  #rightSidebar {
    order:3;
    width:100%;
    margin-top:15px;
    margin-left:0px;
  }
}

a:link {
  color:#632A6E;
  text-decoration:underline;
}

a:visited {
  color:#632A6E;
  text-decoration:underline;
}

a:hover {
  color:#632A6E;
  text-decoration-line:none;
}

a:active {
  color:#632A6E;
  text-decoration:underline;
}

::selection {
  background:#632A6E;
  color:#000;
}

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

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

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

::-webkit-scrollbar {
  width:auto;
  color:#632A6E;
}

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

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

::-webkit-scrollbar-thumb {
  background:#632A6E;
  border-radius:10px;
  border:3px solid #000;
}

::-webkit-resizer {
  background:#000;
}
  
[data-title] {
  position:relative;
  cursor:default;
}

[data-title]:hover::before {
  content:attr(data-title);
  position:absolute;
  bottom:-26px;
  display:inline-block;
  padding:3px 6px;
  border-radius:2px;
  background:#000;
  color:#10e61b;
  font-size:12px;
  white-space:nowrap;
}

[data-title]:hover::after {
  content:'';
  position:absolute;
  bottom:-10px;
  left:8px;
  display:inline-block;
  color:#fff;
  border:8px solid transparent;	
  border-bottom:8px solid #000;
}

#transmasc_ring {
  margin: 0 auto;
  padding: 5px;
  height: 150px;
  width: 60px;
}

#transmasc_ring table {
  margin: 0 auto;
}

#transmasc_ring table tr td {
  padding: 5px;
}

#transmasc_ring .webring-prev {
  text-align:right;
}

#transmasc_ring .webring-info {
   text-align:center;
}

#transmasc_ring .webring-next {
  text-align:left;
}

#transmasc_ring .webring-links {
}

#leftarrow{
  height: 50px;  
  content: url(https://goooby.neocities.org/graphics%20made%20by%20me/left%20arrow%20blue%202.png)
}

#rightarrow{
  height: 50px;
  content: url(https://goooby.neocities.org/graphics%20made%20by%20me/right%20arrow%202.png)
}

#middleflag{
  height: 20px;
  content: url(https://goooby.neocities.org/graphics%20made%20by%20me/heart_transmasc.png)
}

#xenicRing #xenicFlag {
	background: url('images/xenic/middleflag.png')!important;
}

#xenicRing #next-arrow {
	background: url('images/xenic/rightarrow.png')!important;
}

#xenicRing #prev-arrow {
	background: url('images/xenic/leftarrow.png')!important;
}

:root {
  --greenify-background-image:url('BACKGROUND URL') !important;
  --greenify-background-color:#000 !important;
  --greenify-border:5px solid green !important;
  --greenify-border-radius:5px !important;
  --greenify-width:270px !important;
  --greenify-height:175px !important;
  --greenify-padding:1rem !important;
  --greenify-title-font:'Arial' !important;
  --greenify-title-color:green !important;
  --greenify-title-size:35px !important;
  --greenify-title-align:center !important;
  --greenify-title-margin:10px !important;
  --greenify-title-height:25px !important;
  --greenify-title-spacing:3px !important;
  --greenify-title-weight:bold !important;
  --greenify-text-family:sans-serif !important;
  --greenify-text-color:lightblue !important;
  --greenify-text-size:14px !important;
  --greenify-text-align:center !important;
  --greenify-text-spacing:1px !important;
  --greenify-text-height:1em !important;
  --greenify-link-family:sans-serif !important;
  --greenify-link-color:limegreen !important;
  --greenify-link-decoration:none  !important;
  --greenify-link-weight:bold  !important;
  --greenify-link-size:13px  !important;
}