/* Original CSS and site layout by Sadgirl, edited by Missooni. */

:root {
	--body-bg-image: url('images/background.png');
	/* colors */
	--content: #43256E;
}

font-face { 
    font-family: VL-Gothic-Regular; 
    src: url('fonts/VL-Gothic-Regular.tff'); 
}

html * {
	cursor: url('images/sitecursor.png') 6 6, auto;	
    font-family: VL-Gothic-Regular;
	font-size: 18px;
	text-align: center;
	-webkit-font-smoothing: none;
    text-rendering: optimizeLegibility;
	-webkit-font-smoothing: none;
	font-smooth: none;
	font-weight: normal;
    image-rendering: pixelated;
}

::-webkit-scrollbar { cursor: url('images/sitecursor.png') 6 6, auto; } 
.link:hover { cursor: url('images/sitecursor.png') 6 6, auto; } 

body {
	margin: 0;
	background-color: #08031A;
	/* you can delete the line below if you'd prefer to not use an image */
	color: #fceaff;
	background-image: var(--body-bg-image);
}

* {
	box-sizing: border-box;
}

#container {
	border-top: none;
	margin-top:10px;
	max-width: 900px;
	margin: 0 auto;
	height: 100vh;
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
	color: #ED64F5;
	font-weight: bold;
	/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

#header {
	width: 100%;

	/* header color here! */
	max-height: 150px;
	/* this is only for a background image! */
	/* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
	background-size: 100%;
}

#header img {
	width:100%;
	height:auto;
}

#flex {
	display: flex;
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
	border: 3px dashed #F3E5DB;
	border-left: none;
	background-color: rgb(243 229 219 / .5);
	width: 200px;
	padding: 13px;
	font-size: 24px;
}


/* this is the color of the main content area,
between the sidebars! */
main {
	border-radius: 10px;
	border: 3px dashed #F3E5DB;
	border-right: none;
	background-color: rgb(128 151 172 / .4);
	flex: 1;
	padding-left: 20px;
	order: 2;
	height:60vh;
	overflow-y:scroll;
}

/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

*/ #leftSidebar {
	order: 1;
}

#rightSidebar {
	order: 3;
}

footer {
	background-color: #13092D;
	/* background color for footer */
	width: 100%;
	height: 40px;
	padding: 10px;
	text-align: center;
	/* this centers the footer text */
}

h1,
h2,
h3 {
	font-weight: bold;
	color: #f3e5db;
}

h1, h2 {
	text-shadow: -1px -1px 0 #d08088, -0px -1px 0 #d08088, -1px -0px 0 #d08088, 1px 0px 0 #d08088, 0px 1px 0 #d08088, 1px -1px 0 #d08088, -1px 1px 0 #d08088, 1px 1px 0 #d08088, 2px 2px 0 #d08088, 0px 2px 0 #d08088, 2px 0px 0 #d08088, 1px 2px 0 #d08088, 2px 1px 0 #d08088;
}

h1 {
	font-size: 24px;
	}
	
h2, h3 {
	margin: 5px;	
}

strong {
	/* this styles bold text */
	color: #ED64F5;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

@media only screen and (max-width: 800px) {
	#flex {
		flex-wrap: wrap;
	}

	aside {
		width: 100%;
		border: 3px dashed #f3e5db;
		border-top: none;
	}
	
	main {
		border: 3px dashed #f3e5db;
		border-bottom: solid 2px white;	
		border-radius: 0px;
	}

	/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
	main {
		order: 1;
	}

	#leftSidebar {
		order: 2;
	}

	#rightSidebar {
		order: 3;
	}

	#navbar ul {
		flex-wrap: wrap;
	}
}

#paws-accent {
   position: absolute;
   top: 45px;
   left: 73px;
   z-index: -1;
}

#homeButton, #tutorialsButton, #downloadsButton, #linksButton {
	position:relative; 
	width: 174px;
	height: 45px;
	padding-top: -20px;
	margin:auto;
}

#homeButton { 	background: url('images/buttons/b-home.png') no-repeat top left;	}
#tutorialsButton { 	background: url('images/buttons/b-tutorials.png') no-repeat top left;	}
#downloadsButton { 	background: url('images/buttons/b-downloads.png') no-repeat top left;	}
#linksButton { 	background: url('images/buttons/b-links.png') no-repeat top left;	}

#homeButton:hover { 	background: url('images/buttons/h-home.png') no-repeat top left;	}
#tutorialsButton:hover { 	background: url('images/buttons/h-tutorials.png') no-repeat top left;	}
#downloadsButton:hover { 	background: url('images/buttons/h-downloads.png') no-repeat top left;	}
#linksButton:hover { 	background: url('images/buttons/h-links.png') no-repeat top left;	}