*
{
	margin: 0;
	padding: 0;
			box-sizing: border-box; /* Opera/IE 8+ */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
}

:root {
	--darkbg:	#1F1B1F;
	--purple:	#825582; /* #70566D */
	--darker:	#4C404C; /* #42273B */
	--turquo:	#229D5C;
	--yellow:	#FFE44E;
	--gray:	#303030;
	--blue:	#4F8CFF;
}

html
{
	width: 100%;
	height: 100%;
}

body
{
	width: 100%;
	height: auto;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--darkbg);
	font-family: "Roboto", "Futura", "Calibri", "Rockwell", "Verdana", sans-serif;
	font-size: 100%;
	overflow: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Sarpanch:wght@800&display=swap');

h1, h2, h3, h4, h5, nav
{
	font-family: "Myriad", "Sarpanch", sans-serif;
	line-height: normal;
}

h1
{
	color: var(--purple) !important;
	font-size: 200%;
	font-weight: bolder;
	margin: 30px 0;
	text-align: center;
}
h2
{
	color: var(--purple) !important;
	font-size: 150%;
	font-weight: bold;
	margin: 20px 0;
}
h3
{
	color: white;
	font-size: 150%;
	font-weight: bold;
	margin: 10px 0;
}
h4
{
	color: white;
	font-size: 120%;
	font-weight: bold;
}
h5
{
	color: var(--purple);
	font-size: 120%;
	font-weight: bold;
}

hr
{
	color: var(--darker);
	margin: 30px 0;
}

section
{
	padding: 30px;
}

footer
{
	padding: 30px;
}
footer p
{
	font-family: "Myriad", "Sarpanch", sans-serif;
	color: var(--purple);
	font-size: 90%;
	font-weight: bold;
	text-align: center;
}
footer p#footer-lastupdate
{
	font-family: "Roboto", "Futura", "Calibri", "Rockwell", "Verdana", sans-serif;
	color: var(--purple);
	font-size: 80%;
	font-weight: regular;
	font-style: italic;
	text-align: right;
}

p
{
	color: white;
	text-align: left;
	padding: 10px 0;
}
a, a:link
{
	color: var(--turquo);
	text-decoration: none;
}
a.current
{
	color: var(--darker);
	text-decoration: none;
	pointer-events: none;
}
a:hover
{
	text-decoration: underline;
	color: var(--yellow);
}

img
{
	margin: 10px;
	max-width: 80%;
	/* max-height: 80vh; */
}

img.icon
{
	color:  white;
	position: relative;
	width: 30px;
	height: 30px;
	margin: 5px;
	vertical-align: middle;
}
img.icon.png
{
	border-radius: 50%;
}
img.icon.svg
{
	filter: invert(50%);
}
img.logo
{
	width: 100px;
	height: 100px;
}

table
{
	color: white;
	margin: 10px;
	border: 1px solid #4C404C;
}
td
{
	padding: 10px;
	border: 1px solid #4C404C;
}

ul
{
	color: white;
	margin: 0 0 0 0;
	line-height: 200%;
}
li
{
	color: white;
	margin: 0 0 0 10px;
	text-align: left;
}

pre
{
	padding: 10px;
	border: 1px solid white;
	border-radius: 5px;
	background-color: var(--gray);
	color: white;
	overflow: auto;
}
code
{
	border-radius: 3px;
	background-color: var(--gray);
	color: white;
}

figcaption
{
	color: white;
}



content
{
	height: 100vh;
	display: flex;
	overflow-x: hidden;
	perspective: 1px;
	perspective-origin: 0 0;
}

#content
{
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	line-height: 145%;
}



/* Home logo */

#lexou-duck
{
	display: flex;
	align-items: center;
	margin: 10px;
}
#lexou-duck img.icon
{
	position: inherit;
}



/* Navigation menu */

#navbar, #template_navbar
{
	position:fixed;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1;
}

.treeview
{
	user-select: none; /* Prevent text selection */
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.treeview_leaf
{
	color: var(--darker);
	display: inline-block;
	margin-right: 5px;
}
.treeview_node
{
	color: white;
	font-size: 80%;
	display: inline-block;
	margin-right: 5px;
	cursor: pointer;
}
/* Hide the nested list */
ul.nested
{
	display: none;
}
/* Show the nested list when the user clicks on the caret/arrow */
li.open > ul.nested
{
	display: block;
}
/* Rotate the treeview arrow icon when clicked on */
li.open > span.treeview_node
{
	transform: rotate(90deg);
}

li.open > a
{
	line-height: 140%;
}

/* Hide nav menu checkbox */

.side-menu
{
	display: none;
}
.menu-icon
{
	display: none;
}



#parallax
{
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	height: 100%;
	min-height: 100vh;
	z-index: 0; /* -1 breaks overflow behavior because CSS is dumb */
	transform-style: preserve-3d;
}

.parallax-layer
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
	transform-origin: 0 0;
	        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
	-webkit-mask-image: -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.bg-0 { transform: translateZ(-0px) scale(1); }
.bg-1 { transform: translateZ(-1px) scale(2);	right:  -400%; }
.bg-2 { transform: translateZ(-2px) scale(3);	right:  -800%; }
.bg-3 { transform: translateZ(-3px) scale(4);	right: -1200%; }

.bg-0.page { background-image: url("/pages/bg_0.svg"); }
.bg-1.page { background-image: url("/pages/bg_1.svg"); }
.bg-2.page { background-image: url("/pages/bg_2.svg"); }
.bg-3.page { background-image: url("/pages/bg_3.svg"); }

.bg-0.page-art { background-image: url("/pages/art/bg_0.svg"); }
.bg-1.page-art { background-image: url("/pages/art/bg_1.svg"); }
.bg-2.page-art { background-image: url("/pages/art/bg_2.svg"); }
.bg-3.page-art { background-image: url("/pages/art/bg_3.svg"); }

.bg-0.page-music { background-image: url("/pages/music/bg_0.svg"); }
.bg-1.page-music { background-image: url("/pages/music/bg_1.svg"); }
.bg-2.page-music { background-image: url("/pages/music/bg_2.svg"); }
.bg-3.page-music { background-image: url("/pages/music/bg_3.svg"); }

.bg-0.page-games { background-image: url("/pages/games/bg_0.svg"); }
.bg-1.page-games { background-image: url("/pages/games/bg_1.svg"); }
.bg-2.page-games { background-image: url("/pages/games/bg_2.svg"); }
.bg-3.page-games { background-image: url("/pages/games/bg_3.svg"); }

.bg-0.page-tools { background-image: url("/pages/tools/bg_0.svg"); }
.bg-1.page-tools { background-image: url("/pages/tools/bg_1.svg"); }
.bg-2.page-tools { background-image: url("/pages/tools/bg_2.svg"); }
.bg-3.page-tools { background-image: url("/pages/tools/bg_3.svg"); }

.bg-0.page-maths { background-image: url("/pages/maths/bg_0.svg"); }
.bg-1.page-maths { background-image: url("/pages/maths/bg_1.svg"); }
.bg-2.page-maths { background-image: url("/pages/maths/bg_2.svg"); }
.bg-3.page-maths { background-image: url("/pages/maths/bg_3.svg"); }

.bg-0.page-data { background-image: url("/pages/data/bg_0.svg"); }
.bg-1.page-data { background-image: url("/pages/data/bg_1.svg"); }
.bg-2.page-data { background-image: url("/pages/data/bg_2.svg"); }
.bg-3.page-data { background-image: url("/pages/data/bg_3.svg"); }

.bg-0.page-contact { background-image: url("/pages/contact/bg_0.svg"); }
.bg-1.page-contact { background-image: url("/pages/contact/bg_1.svg"); }
.bg-2.page-contact { background-image: url("/pages/contact/bg_2.svg"); }
.bg-3.page-contact { background-image: url("/pages/contact/bg_3.svg"); }



/* Mobile responsiveness */



@media (max-width: 800px)
{

#lexou-duck
{
	font-size: 6vmin;
}

nav
{
	max-height: 0;
	transition: max-height .5s ease-out;
}

.side-menu:checked ~ nav
{
	max-height: 100vh;
	overflow-y: auto;
}

.side-menu:checked ~ .menu-icon img
{
	content: url(/assets/icon_exit.svg);
}

#navbar, #template_navbar
{
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--darkbg);
}

#content
{
	width: 90%;
	margin-top: 10%;
	margin-left: 5%;
	margin-right: 5%;
	line-height: 130%;
}

nav > ul.treeview
{
	padding: 15%;
}
ul.treeview
{
	font-size: 5vmin;
}

li
{
	margin: 0 0 0 5vmin;
}

img.icon
{
	width: 8vmin;
	height: 8vmin;
}

.menu-icon
{
	display: block;
	cursor: pointer;
	float: right;
	margin: 10px;
}

#parallax
{
	display: none;
}

}