/*
	Comment
*/

* {box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
	cursor: url("https://www.videogamesprites.net/FinalFantasyTactics/Objects/Inventory/MageMasher.gif"), url("https://www.videogamesprites.net/FinalFantasyTactics/Objects/Inventory/MageMasher.gif"), default;
	a {cursor: url("https://www.videogamesprites.net/FinalFantasyTactics/Objects/Inventory/Excalibur.gif"), url("https://www.videogamesprites.net/FinalFantasyTactics/Objects/Inventory/Excalibur.gif"), default;
	  }


div {
	scrollbar-color:  #2e2eb8 #dddddd;
	scrollbar-width: auto;
  }


body {
	background-color: #ccd0ee;
	margin: 0 auto;
	padding: 0;
	color: #000;
	overflow: hidden;
	background-image: url('../images/background-patt.png');
	background-repeat: repeat;
	background-size: cover;
  }
  
  
img {
	width: 100%;
	height: auto;
  }
  
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}  
  
.top-box {
	font-family: 'Quicksand', sans-serif;
	font-size: 20px;
	background-color: #cbe9f3;
	border: 6px outset;
	margin: 0 auto;
	margin-top: 2vh;
	margin-bottom: 1vh;
	height: 150px;
	max-height: 20vh;
	width: 70%;
	color: #000;
	display: flex;
 	justify-content: center;
 	align-items: center;
	overflow-y: hidden;
	overflow-x: hidden;
	filter: drop-shadow(5px 5px 5px black);
	position: relative;
  }
  
.navbar {
                position: absolute;
				bottom:0px;
				height: 30px;
               
                /* navbar color */
                width: 100%;
				border: 1px solid black;
            }

            .navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
				
            }

            .navbar li {
                padding-top: 10px;
				display:inline;
				 list-style-type: none;
                justify-content: space-evenly;
            }

            /* navigation links*/
            .navbar li a {
                color: #eec2ff;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            .navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }
			
.navi {
	position: absolute;
	bottom:0px;
	height: 30px;
    width: 100%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 8px;
    	button {
        background-color: transparent;
		height:30px;
		line-height: 8px;
		text-align: center;
		font-size: 18px;
        width: 100%;
        padding: .5em;
		margin-left: 10%;
        border: 2px;
		border-style:ridge;
        border-radius: 10px;
        background-color: rgba(135, 170, 181, 0.6);
        }
    	li, ul, ol {
		width: 23%;
        margin: .1em;
        display: inline-block;		      
        }
		li a {
                font-weight: 800;
                text-decoration: none;
				color: #4500AD
            }
		li a:hover {
                color:  #d09af0;
                text-decoration: underline;
            }
		
    } 

.middle-section {
	margin-top: 10px;
	filter: drop-shadow(5px 5px 5px black);
	margin-left: 15%;
	width: 70%;
}

.leftbox-two {
	width: 180px;
	max-width: 25vh;
	min-width: 5vh;
    float: left;
    padding-left: 20px;
   	border: 6px outset;
	margin: 0 auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	height: calc(90vh - 150px);
	background-color: #87aab5;
	text-align: left;
	border-radius: 5px;
	border: 6px outset;
	overflow-x: hidden;
	}
	
.rightbox {
	width: 180px;
	max-width: 25vh;
	min-width: 5vh;
    float: right;
    padding-left: 20px;
   	border: 6px outset;
	margin: 0 auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	height: calc(90vh - 150px);
	background-color: #87aab5;
	text-align: left;
	border-radius: 5px;
	border: 6px outset;
	font-size: 14px;
	font-style: italic;
	overflow-x: hidden;
	}

.main {
	background-color: #cbe9f3;
	border: 6px outset;
	margin-top: 10px;
	margin-right: 0;
	height: calc(90vh - 150px);
	width: calc(100% - 380px);
	min-width: 30vh;
	margin-left: 10px;
	color: #000;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align: left;
	padding: 1em;
	border-radius: 5px;
	order:2;
	top: 0; /* Stay at the top */
	display: inline-block;
	position: absolute;
  }

.main p{
	padding-left: 15px;
	padding-right: 15px;
	}  

.row {
	width: 100%;
	margin: .5em auto;
	&::after {clear: both;}
  }

.header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
		.column {
			background-color: #d09;
			width: 100%;
			height: 150px;
			margin: auto;
			border-radius: 5px;
			padding: 2em;
		}
  }  
  
/* If I want an element to disappear at small sizes:
@media only screen and (max-width: 700px) {
    .rightbox {
        display: none;
    }
} */




  
.column {
	float: left;
	padding: 10px;
  }  
  
.leftbox {
	width: 10%;
	height: 100%;
	background-color: #87aab5;
	text-align: left;
	padding-right: 5px;
	border-radius: 5px;
	overflow-x: hidden;
	order:2;
	border-style: double;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	position: absolute;
  }  
  


.centerbox {
	width: 90%;
	height: 100%;
	background-color: #cbe9f3;
	text-align: left;
	margin-left: 10%;
	padding: 1em;
	border-radius: 5px;
	overflow-y: scroll;
	overflow-x: hidden;
	order:2;
	top: 0; /* Stay at the top */
	border-style: double;
	position: absolute;
  }  
  
.footerbox {
	background-color: #ff0;
	float: right;
	margin: 1em;
	padding: 1em;
	width: 40%;
  }  
  
  
  

.sidebar {
	background-color: #87aab5;
	width: 10%;
	padding: 0px;
    font-size: 14px;
	order: 1;
	position: sticky;
	top: 0;
             
            }



/* Text stuff */
h1 {
    color: #eec2ff;
	background-color: #195061;
    border: 2px solid #d09af0;
    padding: 5px;
	font-size: 25px;
  }

h2 {
	color: #eec2ff;
	background-color: #195061;
    border: 2px solid #d09af0;
    padding: 5px;
	font-size: 19px;
	
  }

h3 {
	color: #1d157d;
  }

h4 {
	color: #5e4e8c;
	background-color: #87aab5;
    border: 2px solid #5e4e8c;
    margin-left: 10px;
	margin-right: 10px;
	margin-bottom:5px;
	margin-top:5px;
	padding: 5px;
	font-size: 18px;
	text-decoration: underline;
  }	
	
b {
	color: #1d157d;
  }


a {
 	   color: blue;
  }

a:hover {
	   color: #d09af0
	   }  

.box {
                background-color: #195061;
                border: 1px solid #d09af0;
                padding-left: 10px;
				padding-right: 10px;
				a {
					color: #cbe9f3;
				  }
				
				a:hover {
	  				color: #d09af0
	  			  }
  }
			
.box-two {
	background-color: #e6f9ff;
	border: 2px solid #7f8588;
	padding-left: 20px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 14px;
  
 }
 
 
/* ---------------- */
/*    FONT LINKS    */
/* ---------------- */

	/* <uniquifier>: Use a unique and descriptive class name */
	/* <weight>: Use a value from 100 to 900. This controls thickness */

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


.noto-serif-<uniquifier> {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.literata-base {
  font-family: "Literata", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}