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

		variables

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

:root{
	--height: calc(95svh - (var(--outline) * 4) - (var(--margin) * 2) - var(--title-size));
	--width: calc(var(--height) * 1.226692836113837);
	--outline: 0.5svw;
	--margin: 1svw;
	--font-size: 3svw;
	--title-size: calc(var(--font-size) * 1.5);
}

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

	 the whole thing

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

main{
	margin: 0 auto;
}

h1{
	font-size: var(--title-size);
	margin-top: calc(var(--margin) * 2);
}

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

		page top deco

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

#twinkle{
	background-image: url("../background/03.gif");
	filter: drop-shadow(0.4svh 0.4svh rgba(var(--shadow-rgb),0.33));
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: calc(3 * var(--margin));
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
}

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

	cute picture :+)

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

h1::before{
	content: "";
	display: block;
		height: var(--height);
		width: var(--width);
	margin: var(--margin) auto;
	margin-bottom: calc(var(--margin) * 1.5);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	border: var(--outline) solid var(--white);
	outline: var(--outline) solid var(--black);
}

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

		paragraphs

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

p, ol, ul{
	width: 70%;
	margin: 6svh auto;
	background-color: var(--white);
	filter: drop-shadow(0.33em 0.33em rgba(var(--shadow-rgb),0.33));
	border: calc(0.75 * var(--outline)) solid var(--aqua2);
	outline: calc(0.5 * var(--outline)) solid var(--white);
}

p{
	padding: 1em;
}

ol, ul{
	padding: 1em 2em;
	padding-left: 3em;
}