/*
DOCS:


NavBar (nav,navbar): Just a navbar. 
Main Title / Splash: Use as the first element. 
Generic Block (color/image): just a fullscreen div.
Halves Block: half width
Thirds Block: third width
Background Change Block: will change body background, transparent. Use data-image and a src or data:image.
Slow Background Scroll/Parallax Block: Use in a generic to add stuff to the background that scrolls slowly. use data-speed (multiplier, default 1.5) to control speed.
---------
*/

/*IMPORT FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


/*Control the main colors here! Override using inline styles.*/
:root{
  --text: hsla(220, 15%, 20%, 1);
  --main: hsla(187, 61%, 74%, 1);
  --background: hsla(333, 21%, 92%, 1);
  --background-accent: hsla(0, 0%, 49%, 1);
  --accent: hsla(8, 67%, 52%, 1);
}


p {
  font-family: "Roboto Condensed"; /*define you own.*/
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Alice"; /*define your own*/
}


/*set all*/
*{
  color:var(--text);
}



/* body + scrollbar */
body{
  background-color:var(--background);
  padding:0px;
  margin:0px;
  color:var(--text);
  overflow-x:hidden;
  width:100%;
  height:100%;
}
body::-webkit-scrollbar {
  width: 5px;
}
 
body::-webkit-scrollbar-track {
  background-color:var(--background);
}
 
body::-webkit-scrollbar-thumb {
  background-color: var(--background-accent); 
}



/*div styling to get backgrounds working*/
div{
  overflow:hidden;
  
  background: url() no-repeat center center fixed;
  
  background-repeat:no-repeat;
  background-position:center center;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* about div content positions */
div.ycenter{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color:inherit;
}
div.xcenter{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  color:inherit;
}
div.tcenter {
  text-align:center;
}
div.left{
  float:left;
}
div.right{
  float:right;
}


/*navbar stuff and quick fixes*/
div.nav div{
  color:inherit;
}
div.nav div.right{
  translate: -10px 0px;
}
div.nav div.left{
  translate: 10px 0px;
}
div.nav{
  height:30px;
  width:100vw;
  background-color:var(--text);
  color:var(--background);
  position:fixed;
  z-index:9999;
  opacity:0.8;
}


/*splash page*/
div.splash,div.s{
  font-size:50px;
  width:100vw;
  height:90vh;
}
div.splash div.ycenter{
  font-size:50px;
}
div.s div.ycenter{
  font-size:50px;
}



div.g, div.generic{
 width:100vw;
  height:100vh;
}
div.half,div.halves,div.h{
  width:calc(50% - 3px);
  height:100%;
  display:inline-block;
  vertical-align: top;
}
div.third,div.thirds,div.t{
  width:calc(33% - 2px);
  height:100%;
  display:inline-block;
  vertical-align: top;
}

/*todo*/
div.bgchange{
  
}
div.parallax{
  
}