:root {
  --bg-image:  url("/redux/paper.jpg");
 --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: "Reggae";
  --text-accent: #efa80e;
--titlecolor: white;
}
[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: white;
 --visited: black;
 --img: url("/rehaul/voidcubelite.png");
 --landing: url("/redux/landinglight.png");
 --pagedoll: url("/redux/awia.png");
--titlefont: "Times";
--titlecolor: black;
}

[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: black;
 --visited: gold;
 --img: url("/rehaul/voidcube.png");
 --landing: url("/redux/landingdark.png");
 --pagedoll: url("/redux/awia.png");
--titlefont: "Times";
--titlecolor: white;
}

[data-selected-theme="default"] {
  --bg-image:  url("/redux/paper.jpg");
 --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;
  --titlecolor: white;
}

@font-face {
  font-family: "Wah";
  src: url("Wah.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Reggae";
  src: url("/rehaul/Reggae.ttf") format("truetype");
}
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;
position: relative;  
}
.title {
 width: 100%;
 height: 10%;
 display: flex;
 justify-content: center;
align-items: center; 
}
.titlebox {
 width: 20%;
 height: 90%;  
  display: flex;
 justify-content: center;
align-items: center; 
font-family: var(--titlefont);
 background-color: none;
 font-size: 60px;
margin-right: 50px;
margin-top: 50px;
}
.titlebox h {
 text-shadow: 0 0 30px  green;
color: var(--titlecolor);
  
}  
.column {
width: 50%;
justify-content: space-evenly;
align-items: center;
display: flex;
height: 30%;
  
}

.square {
width: 25%;
height: auto;
display: flex;
align-items: space-evenly;
justify-content: center;
flex-wrap: wrap;  
gap: 5px;  
  
}
.square img {
width: 100%;
height: auto;
  
  
}
.divider {
width: 100%;
height: 10px;
text-align: center;  
  
}