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

		variables

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

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

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

	 the whole thing

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

main{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	padding-bottom: calc(var(--margin) * 1.25);
}

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

	cute picture :+)

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

h1::before{
	content: "";
	display: block;
		height: var(--height);
		width: var(--height);
	margin: var(--margin);
	margin-bottom: calc(var(--margin) * 2);
	background-image: url("vector/GIFLATER.png");
		background-position: center bottom;
		background-size: contain;
		background-repeat: no-repeat;
	background-color: var(--navy);
	border: var(--outline) solid var(--white);
	outline: var(--outline) solid var(--black);
	box-shadow: 1.5svw 1.5svw rgba(var(--shadow-rgb),0.25);
}

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

	CAUTION + warnings

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

h1{
	margin: 0;
}

p{
/*	background-color: rgba(var(--shadow-rgb),0.05);*/
	width: 50%;
	font-size: calc(var(--font-size) * 0.7);
	filter: drop-shadow(0.06em 0.06em rgba(var(--shadow-rgb),0.33));
}

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

			LINK!

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

a{
	color: var(--white);
	font-size: calc(var(--font-size) * 0.95);
	font-weight: bold;
	font-family: "Determination Sans Web", "Determination Sans";
	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));
	margin-bottom: 0.33em;
}

a span:hover{
	color: var(--yellow);
}

a span, a span:hover{
	transition: color .1s linear;	
}