/*...........................................................

		variables

..........................*/

:root{
	--width: 33svw;
	--spacing: 0.5em;
}

/*...........................................................

	 everything!

..........................*/

body{
	background-image: url("background/00.png"), url("background/02.png");
	background-repeat: repeat-y, repeat;
		background-position: 90.5svw 0, 0;
		background-size: 6svw auto, 8%;
}

main{
	width: 96svw;
	height: calc(96svh - var(--spacing) * 1.5);
	display: flex;
		justify-content: space-between;
		align-items: flex-start;
}

/*..........................

		nav sidebar!!

..........................*/

nav{
	position: relative;
	height: calc(100% - var(--spacing));
	width: var(--width);
	margin-top: var(--spacing);
	margin-left: calc(var(--spacing) * 0.5);
	padding-right: var(--spacing);
}

h1{
	margin: 0;
	margin-bottom: var(--spacing);
}

h1 img{
	filter: drop-shadow(0.2svw 0.2svw rgba(var(--shadow-rgb),0.33));
}

nav a{
	width: 100%;
	box-sizing: border-box;
	display: block;
	position: relative;
	z-index: 999;
	background-color: var(--blue);
	color: var(--white);
	text-shadow: 0.1em 0.1em var(--black);
	border: 0.3svw solid var(--jacket);
	outline: 0.2svw solid var(--white);
	padding: var(--spacing);
	margin-bottom: calc(1.75 * var(--spacing));
	filter: drop-shadow(0.66svw 0.66svw rgba(var(--shadow-rgb),0.33));
}

nav a::first-letter{
	font-size: 0.6em;
}

/*..........................

	slides the links out on hover!

..........................*/

nav a:hover, nav a:target, nav a:focus{
	color: var(--white);
	background-color: var(--red);
	border-color: var(--coral);
	text-shadow: 0.1em 0.1em var(--red2);
	width: 105%;
	box-sizing: border-box;
	transform: translateX(10%);
	padding-left: calc(var(--spacing) * 5);
}

nav a:nth-child(even):hover, nav a:nth-child(even):target, nav a:nth-child(even):focus{
/*	background-color: var(--yellow);*/
}

nav a, nav a:hover, nav a:target, nav a:focus{
	transition: transform 0.15s ease;
}

/*..........................

		cute pic!

..........................*/

#vector{
	--anim-up: 1.5svh;
	--anim-down: 5svh;
	max-width: calc(100% - var(--width));
	max-height: calc(105% - (var(--anim-up) + var(--anim-down)));
	object-fit: contain;
	animation: float 2s ease-in-out infinite alternate;
	filter: drop-shadow(0.33svw 0.33svw rgba(var(--shadow-rgb),0.33));
}

@keyframes float{
	from{
		transform: translateY(calc(-1 * var(--anime-up)));
	}
	to{
		transform: translateY(var(--anim-down));
	}
}

/*..........................

		footer disclaimer

..........................*/

footer{
	font-family: "rainyhearts", "JF Dot Izumi Gothic 16", sans-serif;
	color: var(--black);
	font-weight: normal;
	height: calc(2 * var(--spacing));
	position: fixed;
	bottom: 0;
	font-size: 0.75em;
	text-align: center;
	text-shadow: 0.05em 0.05em var(--aqua2);
	filter: drop-shadow(0.06em 0.06em rgba(var(--shadow-rgb),0.33));
}