:root {
  --bg-image:  url("/redux/shrine.png");
 --color-background: white;
  --color-text: black;
  --color-accent: #c100ff26;
  --fontmain: "Wah";
  --fontboxsize: 24px;
  --copy: white;
 --bodycolor: rgba(252, 224, 255, 0.25);
 --visited: black;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdef.png");
 --pagedoll: url("/redux/tsguy1.gif");
 --titlefont: "Wah";
  --text-accent: #efa80e;
}
[data-selected-theme="acc"] {
  --bg-image: none;
  --color-background: white;
  --color-text: black;
  --color-accent: #ffcf6e;
  --text-accent: red;
  --fontmain: "Verdana";
  --fontboxsize: 20px;
  --copy: white;
 --bodycolor: #ddd8ff;
 --visited: black;
 --img: url("/rehaul/voidcubelite.png");
 --landing: url("/redux/landinglight.png");
 --pagedoll: url("/redux/tsguy2.gif");
--titlefont: "Times";
}

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

[data-selected-theme="default"] {
  --bg-image:  url("/redux/shrine.png");
 --color-background: white;
  --color-text: black;
  --color-accent: #ffcf6e;
  --fontmain: "Wah";
  --fontboxsize: 24px;
  --copy: white;
 --bodycolor: #c100ff26;
 --visited: black;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdef.png");
 --pagedoll: url("/redux/tsguy1.gif");
 --titlefont: "Wah";
  --text-accent: rgba(193, 0, 255, 0.149);
}
@font-face {
  font-family: "Wah";
  src: url("/redux/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: cover;
  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;
  
}
.pagedoll
{
position: absolute;
bottom: 1%;
right:105%;
background-image: var(--pagedoll);
background-size: cover;
width: 200px;
height: 250px;
z-index: 4;
}

.box {
background-color: var(--bodycolor);
  border-image-slice: 80 80 80 80;
border-image-width: 50px 50px 50px 50px;
border-image-outset: 50px 50px 50px 50px;
border-image-repeat: repeat repeat; 
border-image-source: url("shrineborder.png");
border-style: solid;
width: 50vw;
height: 60vh;
overflow-y: scroll;
overflow-x: hidden;
}
.boxhead {
 font-size: 40px; 
 font-family: var(--titlefont);
color:  var(--color-text);
height:50px;
width: 100%;
text-align: center;
padding: 20px; 
  
}
.title  {
font-size: 60px;
font-family: var(--titlefont);
color: #e2c6ef; -webkit-text-stroke: 2px black;
height:100px;
width: 100%;
text-align: center;
padding: 20px;
  
}
.cubeholder {
width: 100%;
height: 170px;
display: flex;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
overflow-x: scroll;
overflow-y: hidden; 
}
.cubeholder img {
 height: 100px;
 width: 100px;
filter: blur(.5px);  
  
}
.cubeholder img:hover {
 height: 150px;
 width: 150px;
transition: 1s;
box-shadow: 0 0 30px  white;
filter: blur(0px);
  
}
.dibbly
{
width: 100%;
height: 20px;
  
  
}