:root {
  --bg-image:  url("/redux/tsbg.png");
 --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("/redux/tsguy1.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/tsguy2.gif");
--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/tsguy2.gif");
--titlefont: "Times";
}

[data-selected-theme="default"] {
  --bg-image: url("/redux/tsbg.png");
 --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("/redux/tsguy1.gif");
 --titlefont: "Qindret";
  --text-accent: #efa80e;
}
@font-face {
  font-family: "Splatoon";
  src: url("/splatoon-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Qindret";
  src: url("Qindret.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@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;
  
}
.pagedoll
{
position: absolute;
bottom: 1%;
right:105%;
background-image: var(--pagedoll);
background-size: cover;
width: 200px;
height: 250px;
z-index: 4;
}
.flexbaby {
background-image: var(--landing);
background-repeat:no-repeat;
background-size: contain;  
background-position: center;
height: 100%;
width: 100%; 
display: flex;
justify-content:center;
align-items: center;  
  
}


.box {
background-color: var(--bodycolor);
height: 35%;
width: 90%;
border: 5px solid var(--color-accent);
box-shadow: 10px 10px;
overflow-y: scroll;
overflow-x: hidden;
  
}
#text {
padding: 1.5%;  
height: 33.5%;
width: 88.5%;  
  
}
.box h1 {
width: 100%;
text-align: center;
font-size: 26px;  
  
}
.box h2 {
width: 100%;
text-align: center;

  
  
}
.navbox {
background-color: var(--bodycolor);
height: 55%;
width: 90%;
border: 5px solid var(--color-accent);
box-shadow: 10px 10px;  
overflow-y: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.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;
}
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);
  
}
.littlebox {
background-color: var(--bodycolor);
height: 15%;
width: 90%;
border: 5px solid var(--color-accent);  
box-shadow: 10px 10px;  
overflow-y: scroll;
display: flex;
justify-content:center;
align-items: center;  
flex-wrap: wrap;
  
}
.littlebox img {
 max-width: 150px; 
  
  
}
.title {
width: 100%;
height: 10vh;
text-align: center;
display: flex;
justify-content:center;
align-items: center;  
font-size: 4vw;
color: var(--color-text);
font-family: var(--titlefont);

  
}
.guysbox {
width: 70%;
height: 80%;
display: flex;
justify-content:center;
align-items: center;  
background: var(--color-background);  
border: 5px solid var(--color-accent);  
padding: 5px;
box-shadow: 10px 10px;
 margin: auto;  
}
.beneath {
 display: flex;
justify-content:center;
align-items: flex-start; 
height: 150%;
width: 70%;
flex-wrap: wrap;
overflow-y: hidden;
scrollbar-width: none;
}
.beneath::-webkit-scrollbar {
  display: none;
}

.whitespace {
width:5%;
height: 100%;
 margin: auto;  
  
}
.boxdiv {
width:100%;
height: 30px;
 margin: auto;  
  
}
.column {
 display: flex;
justify-content:center;
align-items: flex-start; 
height: 100%;
width: 44%;
flex-wrap: wrap;  
padding: 5px; 
padding-top: 20px;
  margin: auto; 
}
.divider {
width: 100%;
height: 20%;
 margin: auto;  
  
}
.theme-switcher {
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 40px;
background: var(--color-background);
border: 2px solid var(--color-accent);
display: flex;
justify-content: space-evenly;
font-size: 20px;
font-family: var(--fontmain);
box-shadow: 10px 10px;
  
}
@media only screen and (max-width: 600px) {
  .theme-switcher {
  top: 0;
  bottom: 100;
  
  }
}
button[data-theme] {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 100px;
  font-size: inherit;
  color: var(--color-text);
  text-align: center;
}

.webringbox {
  width: 85%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/acht/minidome/thbg.png");
  background-size: cover;
  background-repeat: no-repeat;
  flex-wrap : wrap;
  gap: 5px;
  padding: 5px;
  border-radius: 20px;
  
}

.gtext {
font-family: "cookie";
color: pink;
font-size: 20px;
  
}
#alterhuman-ring table {
  
max-height: 100px;  
  
  
}
#alterhuman-ring td {
  
border: none;
  
  
}
#fictionfolk td {
  max-height: 100px;
  border: none;
  
}
#fictionfolk tr {
  max-height: 100px;
  border: none;
  
}
#fictionfolk table {
  height: 85px;
  border: none;
  font-size: 20px;
}
#kemono-ring table {
  
max-height: 100px;  
  
  
}
#umwr table {
  
max-height: 200px;  
  
  
}
#sogma table {
  
max-height: 200px;  
  
  
}
#pvz-ring table {
  
max-height: 200px;  
border: none;
  
}
#touhou-ring table {
  
max-height: 200px;  
border: none;
  
}
#pvz-ring td {
  border: none;
}

#p-ring {
 display: flex;
 justify-content: center;
 align-items: center;
  
  
}
#p-ring .ring-container {
 width: 240px;
height: 175px;
  
  
}

.webring-prev .Hallownest-bugs-img {
  
 height: 20px; 
 width: auto;
  
}
.webring-next .Hallownest-bugs-img {
  
 height: 20px; 
 width: auto;
  
}
.fanlistings {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 width: 100%;
 gap: 2px;
  
}