:root {
  --main-bg-color: white;
  --text-color: black;
  --text-accent-color: #81BC00 ;
  --box-color: #CCDBDC ;
  --border-color: #a09aff;
  --link-color: #976bf0;
}

body{
background-color: var(--main-bg-color);
background-image: url('/Graphics/starsbck-blue.png');
background-size: 400px;
margin: 0px;
color: var(--text-color);
font-family: "Cantora One", sans-serif;
}
 
#all{
width: 760px;
}

 
#main{
width: 600px;
height: 100vh;
float: left;
background-color: var(--box-color);
background-image: url('/Graphics/natural-paper.png');
background-size: 400px;
overflow: scroll;
overflow-x: hidden;
}

#header{
background-image: url('/Graphics/starsbck-blue.png');
background-size: 400px;
background-color: white;
height: 80px;
border-bottom: 3px solid var(--border-color);
padding: 10px;
text-align: center;
margin: 0px 0px 30px 0px;
}
 
#header h1{
margin: 60px 0px 0px 0px;
font-weight: normal;
font-size: 60px;
line-height: 50px;
text-transform: uppercase;
}

h1, h2, h3{
  font-family: "Rubik Bubbles", sans-serif;
  color: DodgerBlue  ;
  background: url('/Graphics/felt.png') center center;
  background-color: DodgerBlue  ;
  background-size: 400px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip:text;
  background-clip:text; 
  text-shadow: none;
  filter: drop-shadow(3px 3px 1px lightyellow) ;
}

 
.subheader{
font-weight: normal;
font-size: 2em;
margin: 0px 0px -5px 0px;
padding: 10px 10px 0px 10px;
}
 
.posttext{
padding: 0px 15px 0px 15px;
letter-spacing: 1px;
margin-top: 0px;
image-rendering: pixelated;
}

#side{
text-align: center;
width: 125px;
height: 100vh;
float: left;
background-color: var(--box-color);
background-image: url('/Graphics/natural-paper.png');
padding: 0px 10px 0px 10px;
border-width: 0px 3px 0px 3px;
border-style: solid;
border-color: var(--border-color);
}

#side img{width: 113px;}
 
#sideicon{
border: 1px solid var(--border-color);
margin: 15px 0px 10px 0px;
width: 113px;
}
 
.sideheader{
font-weight: normal;
margin: 5px 0px 0px 5px;
font-size: 20px;
}

#side ul{
padding: 0px;
margin: 0px;
}
 
#side li{
list-style-type: none;
margin: 5px 0;
}

 
a{
text-decoration: none;
color: var(--link-color);
font-weight: bold;
}
 
a:visited{
color: var(--link-color);
font-weight: bold;
}
 
a:hover{
color: var(--border-color);
font-weight: bold;
}
 
a:active{
font-weight: bold;
font-style: italic;
}

hr{
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border-color);
}
 
#bg{
position:fixed;
bottom: 0px;
right: 0px;
width: 400px;
}

#bg img{
  width: 100%;
  z-index: 0;
    filter: drop-shadow(4px 4px 3px var(--text-color));
}

#sticker{
position: fixed;
bottom: 200px;
right: 200px;
z-index: 2;
font-size: 1.5em;
}
 
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
z-index: 2;
}

#navbox{
margin: 10px 0px 10px 0px;
width: 100%;
visibility: hidden;
display: none;
}
 
#navbox ul{
margin: 0;
padding: 10px;
text-align: center;
border: 3px solid var(--border-color);
}
 
#navbox li{
margin: 0px 10px;
list-style-type: none;
display: inline;
}

table {
  width: 99%;
  margin: auto;
  table-layout: auto;
}

table img{
  image-rendering: pixelated;
}

td, th{
  background-color: white;
  border-radius: 20px;
  padding: 5px 10px;
}

th{
  background-color: var(--border-color);
}

@media(max-width:1000px){
  
#bg{
width: 300px;
}

}

@media(max-width:760px){
  
 #all{
width: 560;
}

#main{
width: 400px;
}

#header h1{
font-size: 38px;
line-height: 28px;
margin: 75px 0px 0px 0px;
}   
  
}

@media(max-width:560px){
  
  #side{
visibility: hidden 
}

#all{
width: 100%;
}

#main{
width: 100%;
}

#navbox{
  visibility: visible;
  display: block;
}

#bg{
width: 200px;
}

}