:root {
  --color-background: black;
  --color-text: #cee9ff; 
  --color-accent: #cee9ff;
 --fontmain: "Lexie";
 --fontboxsize: 17px;
  --fontsize: 24px;
--visited: #4f80ea;
--boxbg: black;
--bigboxbg: black;
--anchor: blue;
--bg: url("alatusbg.png");
--title: "bastion";
}

[data-selected-theme="acc"] {
  --color-background: #9aa1b5;
   --color-text: black; 
  --color-accent: black;
 --fontmain: "helvetica";
 --fontboxsize: 17px;
--visited: black;
--boxbg: lightblue;
--bigboxbg: white;
--anchor: blue;
--blogtitle: "Times";
--bg: none;
--title: "bastion";
}
[data-selected-theme="acc2"] {
  --color-background: #0d101c;
  --color-text: gold; 
  --color-accent: gold;
 --fontmain: "helvetica";
 --fontboxsize: 17px;
--visited: black;
--boxbg: #0c1a45;
--bigboxbg: black;
--anchor: blue;
--blogtitle: "Times";
--bg: none;
--title: "bastion";
}
[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;
--anchor: blue;
--blogtitle: "Cursive";
--bg: url("alatusbg.png");
--title: "bastion";
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
    font-family: var(--fontmain);
      font-size: var(--fontsize);
      overflow-y: hidden;;
     overflow-x: hidden;
}
@font-face {
  font-family: "bastion";
  src: url("/moon/DarkBastion.ttf") format("truetype");
}
@font-face {
  font-family: "lexie";
  src: url("/moon/Lexie.ttf") format("truetype");
}
.Flex {
  
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 10px;
background-image: var(--bg);
background-size: cover;
background-repeat: no-repeat;
image-rendering: pixelated;
      overflow-y: hidden;;
     overflow-x: hidden;
  
}
.titleholder {
width: 100vw;
height: 100px;
font-size: 100px;
display: flex;
justify-content: flex-end;
align-items: center;  
padding-right: 60px;
font-family: var(--title);
}