body {
  background-image: var(--bg-image);
  background-color: var(--bodycolor);
  background-repeat:no-repeat;
     background-size: 100% 100%;
     min-height: 150vh;
       overflow-y: hidden;
 color: var(--color-text); 
    font-family: var(--fontmain);
    font-size: var(--fontboxsize);
}
@font-face {
  font-family: "Reggae";
  src: url("/rehaul/Reggae.ttf") format("truetype");
}
@font-face {
  font-family: "Splatoon";
  src: url("/splatoon-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Reggae";
  src: url("/rehaul/Reggae.ttf") format("truetype");
}
@font-face {
  font-family: "conduit";
  src: url("/peri/Conduit.ttf") format("truetype");
}
@font-face {
  font-family: "sans";
  src: url("/vriska/sans.ttf") format("truetype");
}
@font-face {
  font-family: "cookie";
  src: url("/gangle/candycookies.ttf") format("truetype");
}

@font-face {
  font-family: "Connie";
  src: url("/acht/Connie.ttf") format("truetype");
}
@font-face {
  font-family: "butler";
  src: url("/rice/Butler_Medium.otf") format("opentype");
}
:root {
  --bg-image: url("/rehaul/images/between.jpg");
  --color-background: #0e6132;
  --color-text: gold; 
  --color-accent: gold;
  --anim1: #f0e226;
  --anim2: #fffbc7;
  --anim3: #ffb042;
  --anim4: #f0e226;
 --animbase: #f0e226;
 --fontmain: "Reggae";
 --fontboxsize: 17px;
 --copy: black;
 --bodycolor: white;
--visited: black;
--pcolor: #10ed52;
--pfont: Courier;
--acolor: #25c4f9;
--afont: Arial;
--fcolor: pink;
--ffont: cookie;
--rcolor: black;
--rfont: butler;
--vcolor: #9180f2;
--vfont: sans;
}

[data-selected-theme="acc"] {
  --bg-image: none;
  --color-background: #9aa1b5;
  --color-text: black;
  --color-accent: #6680cc;
  --anim1: #b8b6e0;
  --anim2: #b5b2eb;
  --anim3:  #b8b6e0;
  --anim4:  #b8b6e0;
  --animbase: #b8b6e0;
  --fontmain: "Verdana";
  --fontboxsize: 18px;
  --copy: white;
  --bodycolor: #0b1124;
  --visited: black;
}
[data-selected-theme="acc2"] {
  --bg-image: none;
  --color-background: #0d101c;
  --color-text: white;
  --color-accent: #6680cc;
  --anim1: #b8b6e0;
  --anim2: #b5b2eb;
  --anim3:  #b8b6e0;
  --anim4:  #b8b6e0;
  --animbase: #b8b6e0;
  --fontmain: "Verdana";
  --fontboxsize: 18px;
  --copy: white;
  --bodycolor: #0b1124;
  --visited: #dce2fa;
}
[data-selected-theme="default"] {
  --bg-image: url("/rehaul/images/between.jpg");
  --color-background: #0e6132;
  --color-text: gold; 
  --color-accent: gold;
  --anim1: #f0e226;
  --anim2: #fffbc7;
  --anim3: #ffb042;
  --anim4: #f0e226;
 --animbase: #f0e226;
 --fontmain: "Reggae";
 --fontboxsize: 17px;
 --copy: black;
  --bodycolor: white;
--visited: black;
}

.theme-switcher {
position: absolute;
right: 0;
left: 0;
width: 250px;
height: 100px;
background: var(--color-background);
border: 2px solid var(--color-accent);
display: flex;
justify-content: space-evenly;
  
}
button[data-theme] {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 100px;
  font-size: inherit;
  color: var(--color-text);
  border: 2px solid var(--color-accent);
}

button[data-theme] + button[data-theme] {
  padding-left: 5px;
}
.bigcontainer {
  padding: 10px;
  height: 70vh; /* Adjust the height of the container as desired */
  overflow-y: scroll; /* Enable vertical scrolling */
  background: var(--color-background);
  width: 660px;
  justify-content: center;
  align-items: center; 
  left: 60px;
  border: 3px dashed var(--color-accent);
}
.bigcontainer h {
  text-align: center;
}
.section {
  display: flex;
            justify-content: center;
            align-items: center;
             flex-wrap: nowrap;
  gap: 2vw; 
  width: 100%;
}
.header3 {
    padding:10px;
  text-align: center;
  font-size: 55px;
  top: 70px;
  animation: green-animation 10s  infinite;
  text-shadow: 0 0 5px  white;
  color: var(--animbase);
}
a {
color: black;
text-decoration: none;
} 
.ps {
list-style: url(peris.png)  ;
color: var(--pcolor);
font-family: var(--pfont);
margin-left: 60px;
  
}
.po {
list-style: url(perio.png)  ;
color: var(--pcolor);
font-family: var(--pfont);
margin-left: 60px;
  
}
.pf {
list-style: url(perif.png)  ;
color: var(--pcolor);
font-family: var(--pfont);
margin-left: 60px;
  
}

.as {
list-style: url(achts.png)  ;
color: var(--acolor);
font-family: var(--afont);
margin-left: 60px;
  
}
.ao {
list-style: url(achto.png)  ;
color: var(--acolor);
font-family: var(--afont);
margin-left: 60px;
  
}
.af {
list-style: url(achtf.png)  ;
color: var(--acolor);
font-family: var(--afont);
margin-left: 60px;
  
}
.fs {
list-style: url(fens.png)  ;
color: var(--fcolor);
font-family: var(--ffont);
margin-left: 60px;
  
}
.fo {
list-style: url(feno.png)  ;
color: var(--fcolor);
font-family: var(--ffont);
margin-left: 60px;
  
}
.ff {
list-style: url(fenf.png)  ;
color: var(--fcolor);
font-family: var(--ffont);
margin-left: 60px;
  
}

.rs {
list-style: url(rices.png)  ;
color: var(--rcolor);
font-family: var(--rfont);
margin-left: 60px;
  
}
.ro {
list-style: url(riceo.png)  ;
color: var(--rcolor);
font-family: var(--rfont);
margin-left: 60px;
  
}
.rf {
list-style: url(ricef.png)  ;
color: var(--rcolor);
font-family: var(--rfont);
margin-left: 60px;
  
}


.vs {
list-style: url(vriss.png)  ;
color: var(--vcolor);
font-family: var(--vfont);
margin-left: 60px;
  
}