:root {
  --color-background: black;
  --color-text: #cee9ff; 
  --color-accent: #cee9ff;
 --fontmain: "butler";
 --fontboxsize: 17px;
  --fontsize: 24px;
--visited: #4f80ea;
--boxbg: black;
--bigboxbg: black;
}

[data-selected-theme="acc"] {
  --color-background: #9aa1b5;
   --color-text: black; 
  --color-accent: black;
 --fontmain: "helvetica";
 --fontboxsize: 17px;
--visited: black;
--boxbg: lightblue;
--bigboxbg: white;
}
[data-selected-theme="acc2"] {
  --color-background: #0d101c;
  --color-text: gold; 
  --color-accent: gold;
 --fontmain: "helvetica";
 --fontboxsize: 17px;
--visited: black;
--boxbg: #0c1a45;
--bigboxbg: black;
}
[data-selected-theme="default"] {
  --color-background: black;
  --color-text: #cee9ff; 
  --color-accent: #cee9ff;
 --fontmain: "butler";
 --fontboxsize: 17px;
  --fontsize: 24px;
--visited: #4f80ea;
--boxbg: black;;
--bigboxbg: black;
}

body {
  background-color: var(--color-background);
     min-height: 150vh;
  color: var(--color-text);
    font-family: var(--fontmain);
      font-size: var(--fontsize);
      overflow-y: auto;
     overflow-x: hidden;
}
@font-face {
  font-family: "butler";
  src: url("/rice/Butler_Medium.otf") format("opentype");
}
.box {
  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("/redux/shrineborder.png");
border-style: solid;
width: 50%;
height: 60%;

}
.Flex {
  
height: 150vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 10px;
  
}
.titleholder {
width: 100vw;
height: 100px;
font-size: 60px;
display: flex;
justify-content: center;
align-items: center;  
 gap: 10px; 

}
.titleholder img {
 height: 100px; 

  
}
.divider {
width: 100vw;
height: 100px;
display: flex;
justify-content: center;
align-items: center;    
  
  
}
.divider img {
height: 100%;  
  
  
}
.top {
 width: 100%;
 height: 40%;
  display: flex;
justify-content: center;
align-items: center;  
padding: 10px;  
  
}
.about {
  
 height: 90%;
 width: 40%;
 border: solid 2px var(--color-accent); 
 padding: 10px;
overflow-y: auto;  
overflow-x: hidden;  
}
.about h2 {
text-align: center;  
  
}
.bottom {
 width: 100%;
 height: 55%;
  display: flex;
justify-content: space-evenly;
align-items: center;  
padding: 10px;  
flex-wrap: wrap; 
}
.left {
height: 90%;
width: 45%;
 border: solid 2px var(--color-accent); 
 padding: 10px;
overflow-y: auto;  
overflow-x: hidden;  
}
.left h2 {
 text-align: center; 
  
}
.right h2 {
 text-align: center; 
  
}
.right {
height: 90%;
width: 45%;
 display: flex;
justify-content: center;
align-items: center;  
 border: solid 2px var(--color-accent); 
 padding: 10px;
overflow-y: auto;  
overflow-x: hidden;  
flex-wrap: wrap;
}
.Books {
  
width: 50%;
height: 45%;
overflow-y: scroll;
overflow-x: hidden;
border: 2px solid  var(--color-accent);
padding: 10px;
background-color: var(--boxbg);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 3px;
}
.Books img {
  
max-height: 200px;  
  
}
 #scale img {
width: 100%; 
height: auto;  
  
}
 #scale {
width: 100%; 
  
  
}