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

		variables

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

:root{
	--size: 66svw;
}

body{
	background-color: var(--color-background);
}

h1{
	color: var(--color-title);
}

h2, h3{
	color: var(--color-headings);
}

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

section table th{
	background-color: var(--color-table-heading);
}


main > div > table:last-child th{
	background-color: var(--color-table-heading-2);
}


main > div > table tr:nth-of-type(odd) th{
	background-color: var(--color-table-rowhead-1);
}

main > div > table tr:nth-of-type(even) th{
	background-color: var(--color-table-rowhead-2);
}

main > div table th, 
main > div table:first-child td, 
main > div table:first-child tr, 
section:last-of-type tr:nth-child(2) + tr{
	border-color: var(--color-table-border);
}

section tr:nth-child(2) td summary{
	background-color: var(--color-seed-1);
}

section tr:nth-child(3) td summary{
	background-color: var(--color-seed-2);
}

section tr:nth-child(4) td summary{
	background-color: var(--color-seed-3);
}

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

		basic style

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

p{
	text-indent: 2em;
}

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

	need smaller words?

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

.small{
	font-size: 0.85em;
	word-spacing: 0.1em;
}

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

	i hate the word wednesday

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

.wed{
	font-size: 0.9em;
}

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

	adds shadow

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

img, iframe, h2, table{
	filter: drop-shadow(0.1em 0.1em 0.1svh rgba(var(--paper-shadow-rgb),0.4));
}

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

		headings

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

h1, h2, h3{
	text-align: center;
}

h1{
	font-size: 2.5em;
	color: var(--white);
	text-shadow: 
	  0.033em 0.033em var(--black),
	  -0.033em 0.033em var(--black),
	  -0.033em -0.033em var(--black),
	  0.033em -0.033em var(--black),
		  0.04em 0.04em var(--black),
		  -0.04em 0.04em var(--black),
		  -0.04em -0.04em var(--black),
		  0.04em -0.04em var(--black)
	  ;
/*	filter: drop-shadow(0 0 0.1em var(--white2));*/
}

h1::before{
	content: "";
	display: block;
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	height: calc(var(--size) / 3);
	width: 100%;
	margin-top: -0.5em;
	margin-bottom: 0.33em;
}

h2::after{
	--size: 0.75em;
	content: "";
	display: inline-block;
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	height: var(--size);
	width: var(--size);	
	margin-left: 0.2em;
}

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

		main page content

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

header, main, footer{
	width: var(--size);
	margin: 2.5svw auto;
}

header, footer{
	text-align: center;
}

header, main, footer, section table{
	filter: drop-shadow(0.33svw 0.33svw 0.2svw rgba(var(--shadow-rgb),0.7));
}

main > div, footer{
	background-color: var(--white);
	padding: 1em;
	box-sizing: border-box;
	border: 0.2svw solid;
	border-radius: 1.5svw;
}

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

			header

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

header{
	margin-top: 1.25svw;
}

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

	footer

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

footer{
	width: calc(var(--size) / 3);
}

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

		DIARY ENTRIES!!!!

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

main > div{
	padding-left: 3.25em;
	background-size: 1.5em auto;
		background-repeat: no-repeat round;
		background-position: 1em 0;
	margin-bottom: 2.5svw;
}

main > div p{
	width: calc(100% - 0.75em);
}

main > div > table, section table{
	background-color: var(--white2);
	border: 0.13svw solid var(--black);
	margin: 1em 0.5em 0.5em 1em;
}

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

		ALL TABLES!!!!!!!! HELL YEAH

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

table{
	border-spacing: 0.33svw;
	border-radius: 1.5svw;
}

table th{
	border: 0.1svw solid var(--black);
}

table tr:first-child th{
	border-top-right-radius: 1.33svw;
	border-top-left-radius: 1.33svw;
}

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

		"CULTIVATION" TABLE

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

section{
	position: absolute;
		top: 0;
	width: calc(var(--size) / 2.5 - (2 * 1em));
	margin: 0.75em;
	z-index: 999;
}

section:first-of-type{
	left: 0;
}

section:last-of-type{
	right: 0;
}

section table{
	margin: 0!important;
	width: 100%;
	box-sizing: border-box;
}

section th{
	border-bottom: 0.1svw solid var(--black);
	padding: 0.25em 0.5em;
	height: calc(var(--size) / 9.5);
}

section table p{
	margin: 0;
	padding: 0.25em;
	text-indent: 0;
	font-size: 0.9em;
}

section:last-of-type table td{
	text-align: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

section:last-of-type table tr:nth-child(3) td,
section:last-of-type table tr:nth-child(4) td,
section:last-of-type table tr:nth-child(5) td{
	border-top: dashed 0.1svw;
	transform: translateY(0.25em);
	padding-top: 0.25em;
	padding-bottom: 0.35em;
}

section table summary{
	border: 0.1svw solid var(--black);
	padding-left: 0.25em;
}

section table tr:last-child summary{
	border-bottom-right-radius: 1.25svw;
	border-bottom-left-radius: 1.25svw;
}

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

	status table (floating right)
		
..........................*/

main > div > table:first-child{
	float: right;
	width: 50%;
}

main > div > table:first-child th{
	width: 27%;
	vertical-align: text-top;
	border-top-right-radius: 0;
}

main > div > table:first-child td{
	padding: 0 0.5em;
}

main > div > table:first-child tr{
	border-bottom: 0.1svw solid var(--black);
}

main > div > table:first-child tr:last-of-type th{
	border-bottom-left-radius: 1.25svw;
}

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

	review table (at the bottom)
		
..........................*/

main > div > table:last-child{
	width: calc(100% - 0.5em);
	text-align: center;
	box-sizing: border-box;
	margin: 0;
	margin-bottom: 0.5em;
}

main > div > table:last-child th{
	border-bottom: 0.1svw solid;
}

main > div > table:last-child td{
	padding: 0.33em 1em;	
}

main > div > table:last-child td > span::after{
	content: " \2022 ";
	font-size: 0.8em;
}

main > div > table:last-child td > span:last-child::after{
	content: " ";
	display: none;
}