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

		variables

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

:root{
	--outline: 0.5svw;
}

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

		basic styling

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

body{/*
	background-image: url("background/02.png");
	background-repeat: repeat;
		background-position: 0;
		background-size: 8%;*/
}

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

		main container

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

main{
	width: 80svw;
	margin: auto;
}

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

	cute casette tape hehe

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

#casette{
	display: block;
		height: calc(70svh - 5em);
		width: 75svh;
	margin: 0 auto 0.66em auto;
	object-fit: contain;
	filter: drop-shadow(1svw 1svw rgba(var(--shadow-rgb),0.25));
/*	animation: shake 1s alternate infinite linear;*/
}

/* THIS ANIMATION SETS MY COMPUTER ON FIRE.
maybe i should make a gif isntead */

@keyframes shake{
	from{
		transform: rotate(-2deg);
	}
	to{
		transform: rotate(12deg);
	}
}

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

	title + leading para!

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

h1, h1 + p{
	text-align: center;
	margin: 0.5em auto;
}

h1{
	color: var(--yellow);
	text-shadow:
		0.05em 0.05em var(--black),
		-0.05em -0.05em var(--black),
		-0.05em 0.05em var(--black),
		0.05em -0.05em var(--black),
		0.066em 0.05em var(--aqua2),
		-0.1em -0.066em var(--aqua0)
		;
	letter-spacing: 0.066em;
	filter: drop-shadow(0.1em 0.1em rgba(var(--shadow-rgb),0.33));
}

h1 + p{
	width: 75%;
	text-shadow: 0.075em 0.05em var(--aqua2);
}

h1 + p > a{
	color: var(--white);
}

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

	YES YES THE SONGS NOW

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

section{
	width: calc(100% - 6svw / 2);
	height: 66svh;
	margin: 6svh auto;
	background-color: var(--white);
	display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: space-around;
	border: var(--outline) solid var(--aqua2);
	outline: var(--outline) solid var(--white);
}

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

	text half of the box

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

h2, .hugme{
	margin: 0;
}

section > div:not(.singsong){
	height: 100%;
	display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: space-evenly;
}

section > div > .hugme{
	height: calc(100% - 6rem);
	width: calc(100% - 2em);
	background-color: var(--aqua0);
	outline: calc(0.5 * var(--outline)) solid var(--aqua2);
	text-shadow: 0.05em 0.05em var(--aqua);
}

section > div > .hugme p{
	margin-top: 0.5em;
}

.hugme{
	line-height: 1.5;
}

blockquote{
/*	background-color: var(--banana);*/
	margin: 0.5em 0 0.5em 1em;
	padding: 0.25em;
}

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

	song half of the box

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

.singsong{
	margin: 1em;
}

.singsong table{
	width: 100%;
	background-color: var(--banana);
	border-collapse: collapse;
}

.singsong th{
	background-color: var(--yellow);
}

.singsong td{
	padding-left: 0.33em;
}

.singsong th, td{
	border: 0.1svw solid var(--black);
}

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

	alternates halves!!

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

section:nth-of-type(even) .singsong{
	order: 1;
}

section:nth-of-type(even) div:not(.singsong){
	order: 2;
}