body{
	background-attachment: fixed;
}

::-moz-selection{
	background: var(--selection-bg);
	color: var(--selection-text);
}

::selection{
	background: var(--selection-bg);
	color: var(--selection-text);
}

a{
	color: var(--link);
}

a:hover{
	color: var(--link-hover);
}

a, a:hover{
	transition: color .3s ease;
}

header, main{
	width: 66svw;
	max-width: 118svh;
	margin: auto;
	box-sizing: border-box;
}

header{
	display: flex;
		justify-content: space-evenly;
		align-items: center;
}

h1{
	font-size: calc(70svw / 11);
	margin: 0;
	text-shadow: 
	  0.033em 0.033em var(--white2),
	  -0.033em 0.033em var(--white2),
	  -0.033em -0.033em var(--white2),
	  0.033em -0.033em var(--white2),
		  0.04em 0.04em var(--white2),
		  -0.04em 0.04em var(--white2),
		  -0.04em -0.04em var(--white2),
		  0.04em -0.04em var(--white2)
	  ;
}

h1, header nav, header > section > p{
	filter: drop-shadow(0.5svw 0.5svw 0.2svw rgba(var(--shadow-rgb),0.2));
}

header > section{
	text-align: center;
}

header > section p{
	background-color: var(--white2);
	display: block;
	width: 55%;
	margin: 0 auto;
	margin-bottom: 0.66em;
	padding: 0.15em 0;
	text-align: center;
	border: 0.25svw solid var(--icon-bg);
	outline: 0.15svw solid var(--black);
}

.heartbeat{
	color: var(--pink);
	animation: heartbeat 1s ease-in-out infinite alternate;
}

@keyframes heartbeat{
	from{opacity:1}
	to{opacity: 0.4}
}

#icon{
	--size: 20svw;
	box-sizing: border-box;
	width: var(--size);
	height: var(--size);
	background-color: var(--icon-bg);
	padding: 0.5em;
	border: 0.5svw solid var(--icon-border);
	outline: 0.2svw solid var(--icon-outline);
	transform: translateY(12%);
	box-shadow: 0.55svw 0.55svw 0.5svw 0.3svw rgba(var(--shadow-rgb),0.3);
}

main{
	background-color: var(--main-bg);
	padding: 1em 2em;
	border: 0.5svw solid var(--main-border);
	outline: 0.2svw solid var(--black);
	box-shadow: 1svw 1svw 0.5svw rgba(var(--shadow-rgb),0.2);
	margin-bottom: 3svw;
	border-radius: 1em;
}

main > div{
	background-color: var(--white);
		background-repeat: no-repeat;
		background-position: 1em 1em, calc(100% - 1em) 1em;
		background-size: 0.9em auto;
	padding: 0.25em;
	margin: 1em auto;
	margin-bottom: 2em;
	border-radius: 0.5em;
}

main > div p{
	text-indent: 1.4em;
	padding: 0 1.45em;
}

main > div:last-child{
	margin-bottom: 1em;
}

h2{
	text-align: center;
}

h2::before, h2::after{
	display: block;
}

main > div > div{
	--gutter: 0.25em;
	display: flex;
		justify-content: space-between;
	background-color: var(--table-container-bg);
	padding: var(--gutter);
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

main > div > div table:first-of-type{
	border-bottom-left-radius: 0.25em;
}

main > div > div table:last-of-type{
	border-bottom-right-radius: 0.25em;
	text-align: center;
}

main > div > div table{
	width: calc(50% - (var(--gutter) / 2));
	background-color: var(--table-bg);
	border-collapse: collapse;
}

main > div > div table td{
	background-color: var(--white);
}

main > div > div table:first-of-type td{
	padding-left: 0.44em;
	padding-right: 0.1em;
	border-bottom: 0.2svw solid var(--table-cell-border);
	width: 75%;
}

main > div > div table:first-of-type tr:last-child td{
	border-bottom: 0;
}

main > div > div table:last-of-type th{
	color: var(--table);
}

main > div > div table:last-of-type th::before, main > div > div table:last-of-type th::after{
	content: "ž";
	color: var(--heartcute);
	margin: 0 0.33em;
}

main > div > div table:last-of-type td{
	border-bottom-right-radius: 0.25em;
	border-top: 0.2svw solid var(--table-notes-border);
	padding: 0.25em 0.33em;
}

main > div > div table td{
	font-size: 0.88em;
	line-height: 1.5;
}