:root {
  --bg-image:  url("/redux/abtdef.jpeg");
 --color-background: white;
  --color-text: darkgreen;
  --color-accent: #ffcf6e;
  --fontmain: "Wah";
  --fontboxsize: 24px;
  --copy: white;
 --bodycolor: #E0E9AA;
 --visited: black;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdef.png");
 --pagedoll: url("https://tesseractcube.neocities.org/gangle/awia.gif");
 --titlefont: "Qindret";
  --text-accent: #efa80e;
}
[data-selected-theme="acc"] {
  --bg-image: url("/redux/tsbglight.png");
  --color-background: white;
  --color-text: black;
  --color-accent: #ffcf6e;
  --text-accent: red;
  --fontmain: "Verdana";
  --fontboxsize: 20px;
  --copy: white;
 --bodycolor: white;
 --visited: black;
 --img: url("/rehaul/voidcubelite.png");
 --landing: url("/redux/landinglight.png");
 --pagedoll: url("/redux/awia.png");
--titlefont: "Times";
}

[data-selected-theme="acc2"] {
  --bg-image:url("/redux/tsbgdarl.png");
 --color-background: black;
  --color-text: gold; 
  --color-accent: #7d640b;
 --fontmain: "Verdana";
  --text-accent: #ffcf6e;
 --fontboxsize: 20px;
 --copy: black;
 --bodycolor: black;
 --visited: gold;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdark.png");
 --pagedoll: url("/redux/awia.png");
--titlefont: "Times";
}

[data-selected-theme="default"] {
  --bg-image: url("/redux/abtdef.jpeg");
 --color-background: white;
  --color-text: black;
  --color-accent: #ffcf6e;
  --fontmain: "Wah";
  --fontboxsize: 24px;
  --copy: white;
 --bodycolor: #fff3b7;
 --visited: black;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdef.png");
 --pagedoll: url("https://tesseractcube.neocities.org/gangle/awia.gif");
 --titlefont: "Qindret";
  --text-accent: #efa80e;
}

@font-face {
  font-family: "Wah";
  src: url("Wah.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
body {
  background-image: var(--bg-image);
  background-color: var(--bodycolor);
  background-repeat:no-repeat;
     background-size: stretch;
  color: var(--color-text);
  font-size: var(--fontboxsize);
  font-family: var(--fontmain);
  overflow-y: hidden;
   overflow-x: hidden;
}
.flex {
height: 95vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: flex-start;
overflow-y: scroll;
flex-wrap: wrap;
position: relative;  
}
.title {
 width: 100%;
 height: 10%;
 display: flex;
 justify-content: flex-end;
align-items: center; 
}
.titlebox {
 width: 20%;
 height: 90%;  
  display: flex;
 justify-content: center;
align-items: center; 
 border-image-slice: 32 32 32 32 fill;; 
border-image-width: 20px 20px 20px 20px;
border-image-outset: 20px 20px 20px 20px;
border-image-repeat: stretch stretch; 
border-image-source: url("/redux/grassborder.png");
border-style: solid;
image-rendering: pixellated; 
 background-color:  var(--bodycolor);
 font-size: 60px;
margin-right: 50px;
margin-top: 50px;
}
.white {
 width: 20%;
 height: 90%;  

}
.pagedoll
{
position: absolute;
bottom: 8.5%;
left:22%;
background-image: var(--pagedoll);
background-size: cover;
width: 300px;
height: 250px;
z-index: 4;
pointer-events: none
}
.sidebar {
background-color: var(--bodycolor);
height: 55%;
width: 10%;
overflow-y: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
 border-image-slice: 32 32 32 32 fill;;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 20px 20px 20px 20px;
border-image-repeat: repeat repeat; 
border-image-source: url("/redux/grassborder.png");
border-style: solid;
image-rendering: pixellated; 
}
.navling {
height: 10%;
width: 90%;
border: 2px solid var(--color-accent);
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.holder {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 70px;
padding: 10px;  
  
  
}
.abtbox {
background-color: var(--bodycolor);
height: 55%;
width: 50%;
 border-image-slice: 32 32 32 32 ;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 20px 20px 20px 20px;
border-image-repeat: repeat repeat; 
border-image-source: url("/redux/grassborder.png");
border-style: solid;
image-rendering: pixellated; 
overflow-y: scroll;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;  
  
  
  
}
.abtbox p {
width: 100%; 
padding: 10px;  
}
.whitespace {
width:5%;
height: 55%;

  
}
a:visited{
 text-decoration: none;
 color: var(--text-accent); 
  
  
}
a:hover {
 text-decoration: none;
 color: var(--color-accent);   
  
  
}
a {
text-decoration: none;
 color:  var(--color-text);
  
}
.boxdiv {
width:100%;
height: 30px;
 margin: auto;  
  
}
.divider {
width: 100%;
height: 5%;
 margin: auto;  
  
}