:root {
		--backgroundSize: 100px;
		
		/*if you want to change the color of the sections change this variable!*/
		--containercolor: white;
		--textcolor:black;
		--postcolor:white;
	}

* { 
	box-sizing: border-box;
}

body {
box-sizing: border-box;
  margin:0;
  height: 100vh;
  background-image: url(https://i.imgur.com/TcCCRQe.png);
  background-size: var(--backgroundSize);
  color: var(--whiteish);
  display: grid;
  place-items: center;
  
}

body:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@keyframes movingBackground {
  from { background-position: 0 0;}
  to {background-position: var(--backgroundSize) var(--backgroundSize);}
}


/* fonts here! */
@font-face {
  font-family:'Nintendo-DS-BIOS';
  src: url('https://clovermart.neocities.org/Nintendo-DS-BIOS.ttf');
  }
  
  @font-face {
  font-family:'Jacquard';
  src: url('https://clovermart.neocities.org/Jacquard24-Regular.ttf');
  }

/* The Top banner*/
.banner{
  top:0;
  left:0;
  background-size: 80px;
  /*background-image: url('https://i.imgur.com/iUSE6Si.gif');*/
  background-repeat: repeat-x;
  z-index:10;
  width:100%;
  height:80px;
  position:absolute;
  /*filter: drop-shadow(0px 2px 6px navy);*/
  
}
/* Container holding the image and the text */
/* container holding everything*/
.bigContainer {
      border-collapse: separate;
      border-spacing: 25px;
      z-index: 5;
	    height:90%;
	    width:80%;
	    display: inline-block;
	    overflow-x:auto;
	    padding: .5em;
	    box-sizing: border-box;
	    overflow-y:visible;
	    display: flex;
      justify-content: center;
      align-items: center;
	  }

/* Container holding the image and the text */
/* section to the right*/
.container1 {
    border-collapse: separate;
      border-spacing: 25px;
	    margin:auto;
      background-color:var(--containercolor);
      /*Adds drop shadow to the container or div*/
      /*filter: drop-shadow(0px 5px 10px navy);*/
      
      /*controls whether this box has a scrollbar when theres not enough room*/
      overflow-y:scroll;
      overflow-x:hidden;
      
      color:var(--textcolor);
      text-align: center;
      line-height:0.3;
      border-collapse: separate;
	    background-clip:padding-box;
	    width:70%;
	    height:90%;
	    display: inline-block;
	    vertical-align: middle;
	    padding: 20px;
	    box-sizing: border-box;
    
      
	    img {
    	   display: inline-flex;
    	   margin:auto;
    	   overflow:hidden;
    	   max-height: 90%;
    	   object-fit: contain;
    	   object-position: center;
    	   /*space in between images!
    	   If the padding property has four values:

            padding: 25px 50px 75px 100px;
            top padding is 25px
            right padding is 50px
            bottom padding is 75px
            left padding is 100px
    	   */
    	   padding:10px 10px 10px 10px;
       }
	    
	    
	    
}
	  
.post{
  img{
    border: 1px solid #ddd;
  display: inline-flex;
  margin:auto;
  overflow:hidden;
  max-height: 1000px;
  object-fit: contain;
  object-position: center;
  }
}

	  
/* the container for the menu */
.menu {
      border-collapse: separate;
	    background-clip:padding-box;
	    width:20%;
	    height:90%;
	    display: inline-block;
	    background-color:var(--containercolor);
	    /*filter: drop-shadow(0px 5px 10px navy);*/
	    padding: 20px;
	    box-sizing: border-box;
	    overflow-x:hidden;
	    overflow-y:auto;
	    vertical-align: middle;
	    align-content: center;
     
              
    
	    text-align: center;
	    margin: auto;
	    color:var(--textcolor);
	    img {
	      display: block;
	      margin:auto;
	      object-fit: contain;
	      object-position: center;
	    }
	  }
	  	  
/*menu buttons*/
.button {
  
  margin:30px 20px;
  width:70%;
  padding:auto;
  display: inline-block;
  font-size: 1.5rem;
  /*what cursor changes into i think*/
  cursor: pointer;
  font-family:'Jacquard';
 
}	  


/* control what linked text looks like*/	  
a{
  
  font-style: normal;
  text-decoration: none;
}
/* unvisited link */
a:link {
 
  text-decoration: none;
}

/* visited link */
a:visited {
  
  text-decoration: none;
}
/* mouse over link */
a:hover {

  text-decoration: none;
}
/* selected link */
a:active{

  text-decoration: none;
}	  







/*scrollbar stuff!*/

::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--containercolor)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--containercolor);
      border: 2px solid var(--textcolor);
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--textcolor);
    }

	  
          
/*These are for fonts! Headers while p stands for paragraph*/

h1, h2, h3, h4, h5, h6, p  { 
  text-align: center;
	
}
h1 {
  position:relative;
  font-family:'Jacquard';
	font-size: 5rem;
	letter-spacing: 1px;
	
	/*font weight has to do with the bold or not bold, outline, or normal*/
	font-weight:normal;
	text-align: center;
	
	/*text decoration has to do with stuff like underlines*/
	text-decoration: none;
	background-clip: text;
	-webkit-background-clip: text;
}
h2{
  position:relative;
  font-family:'Nintendo-DS-BIOS';
	font-size: 2rem;
	letter-spacing: 2px;
	font-weight:normal;
	text-align: center;
	text-decoration: none;
	background-clip: text;
	-webkit-background-clip: text;
}
p{
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: none;
  font-size:1.3rem;
  font-family: 'Nintendo-DS-BIOS';
}