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

		variables

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

:root{
	--red: hsl(359, 61%, 67%);
	--red2: hsl(357, 63%, 75%);
	--green: hsl(74, 50%, 71%);
	--green2: #A5BD5B;
	--beige: #DABDB9;
	--yellow: #F3CC9B;
	--black2: #635A60;
	--grey: #DDD5D0;

	--shadow-color: 9deg 23% 48%;
	--red-texture: var(--red) url("/background/texture/red2.png");
	--green-texture: var(--green) url("/background/texture/green2.png");

	/* scrollbar */

	--scrollbar-track: var(--white-texture);
	--scrollbar-thumb: var(--red-texture);

	--text-shadow-black:
		0.033em 0.033em var(--black2),
		-0.033em 0.033em var(--black2),
		-0.033em -0.033em var(--black2),
		0.033em -0.033em var(--black2),
			0.04em 0.04em var(--black2),
			-0.04em 0.04em var(--black2),
			-0.04em -0.04em var(--black2),
			0.04em -0.04em var(--black2);

	/* green heading text shadow */
	--heading-shadow-1:
		drop-shadow(0.3px 0.5px 0.7px hsl(var(--heading-shadow-color-1) / 0.21))
		drop-shadow(0.4px 0.8px 1px hsl(var(--heading-shadow-color-1) / 0.21))
		drop-shadow(1px 2px 2.5px hsl(var(--heading-shadow-color-1) / 0.21));
	--heading-shadow-color-1: 77deg 70% 35%;

	/* red heading text shadow */
	--heading-shadow-2:
		drop-shadow(0.3px 0.5px 0.7px hsl(var(--heading-shadow-color-2) / 0.21))
		drop-shadow(0.4px 0.8px 1px hsl(var(--heading-shadow-color-2) / 0.21))
		drop-shadow(1px 2px 2.5px hsl(var(--heading-shadow-color-2) / 0.21));
	--heading-shadow-color-2: 0deg 70% 30%;
}

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

		basic style

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

body{
	background-image: url("/background/gg03.png"), url("/background/07.gif");
		background-attachment: fixed;
		background-color: var(--beige);
		background-size: 5% auto;
	display: grid;
		grid-auto-columns: minmax(0,1fr);
		grid-template-columns: 15% auto 15%;
		grid-template-areas: 'left center right' 'left footer right';
		gap: var(--gap);
	margin: var(--gap) auto;
	text-align: center;
	max-width: 90svw;
}

p{
	max-width: 55ch;
}

p img:not(.sticker){
	max-height: 1em;
}

p[tabindex="0"]{
	max-width: 50ch;
}

.sticker{
	margin: 0.5em 0.75em;
	margin-bottom: 0;
	max-width: 42%;
	max-height: 50svh;
}

.sticker.right{
	float: right;
	margin-right: 0;
}

.sticker.left{
	float: left;
	margin-left: 0;
}

.pretend{
	margin: 1em auto;
	width: 50ch;
	display: flex;
		align-items: center;
		justify-content: space-evenly;
	text-align: center;
}

.pretend img{
	max-width: 30%;
}

.sticker, .pretend{
	filter: var(--drop-text-shadow);
}

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

		links

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

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

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

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

		side images :+D

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

.side{
	display: grid;
		grid-template-rows: auto auto auto;
		justify-content: center;
		justify-items: center;
		align-items: center;
		align-content: space-between;
	height: var(--full-height);
	position: sticky;
		top: var(--gap);
	filter: var(--drop-shadow-medium);
}

.side img{
	max-width: 100%;
}

.side:nth-of-type(1){
	grid-area: left;
}

.side:nth-of-type(1) img:nth-child(2){
	height: 55%;
}

.side:nth-of-type(2){
	grid-area: right;
}

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

		main text box!!!!!!!!!

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

main{
	--bg-size: 3svw;
	grid-area: center;
	filter: var(--drop-shadow-low);
	box-shadow: var(--shadow-elevation-high);
	background-color: var(--red);
		background-image: url("/background/06.png")!important;
		background-size: calc(var(--bg-size) * 0.5)!important;
		background-position: 
			calc(var(--bg-size) * -0.15)
			calc(var(--bg-size) * 0.1)!important;
	padding: var(--bg-size)!important;
	border: var(--border-level-1);
		border-radius: var(--border-radius-level-1);
}

main > div{
	box-shadow: 0.10em 0.08em 0.36em 0.1em hsla(22, 32%, 85%, 0.9) inset!important;
	padding: 1em 1.5em!important;
}

main > div >*{
	filter: var(--drop-text-shadow);
}

h1, h2{
	box-shadow: var(--shadow-elevation-low-text);
}

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

		headings....

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

h1, h2{
	margin: 0.75em auto;
	color: var(--white);
	border: var(--border-level-2);
		border-style: outset;
		border-radius: var(--border-radius-level-2);
}

h2{
	max-width: 95%;
}

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

	the actual text

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

h1 div, h2 div{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
		padding: 0.5em;
		padding-bottom: 0.66em;
	background-repeat: no-repeat;
	text-shadow: var(--text-shadow-black);
	filter: var(--heading-shadow);
}

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

		green heading

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

h1:nth-of-type(odd), h2:nth-of-type(odd){
	margin-top: auto;
	background: var(--green-texture);
	border-color: var(--green);
}

h1:nth-of-type(odd) div, h2:nth-of-type(odd) div{
	filter: var(--heading-shadow-1);
}

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

		red heading

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

h1:nth-of-type(even), h2:nth-of-type(1), h2:nth-of-type(even){
	background: var(--red-texture);
	border-color: var(--red2);
}

h1:nth-of-type(even) div, h2:nth-of-type(1) div, h2:nth-of-type(even) div{
	filter: var(--heading-shadow-2);
}

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

	background images

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

h1 div{
	background-position: 2% 15%, 98% 15%, 2% 85%, 98% 85%;
}

h1 div:first-of-type, h1 div:last-of-type{
	background-image: 
		url("/stickers/cutie/2_summer/V24.png"),
		url("/stickers/cutie/3_autumn/F06.png"),
		url("/stickers/cutie/3_autumn/F06.png"),
		url("/stickers/cutie/2_summer/V24.png")
		;
	background-size: 3.5% auto, 4.5% auto, 4.5% auto, 3.5% auto;
}

h1:nth-of-type(2) div{
	font-size: 0.88em;
	padding: 0.66em;
	padding-bottom: 0.75em;
	background-image: 
		url("/stickers/cutie/2_summer/V24.png"),
		url("/stickers/cutie/2_summer/V24.png"),
		url("/stickers/cutie/1_spring/B09.png"),
		url("/stickers/cutie/1_spring/B09.png")
		;	
	background-size: 3.5% auto, 3.5% auto, 4% auto, 4% auto;
}

h2:first-of-type div{
	background-image: 
		url("/stickers/cutie/2_summer/D23.png"),
		url("/stickers/cutie/2_summer/D21.png")
		;	
	background-size: auto 66%;
	background-repeat: no-repeat;
	background-position: 7% 50%, 93% 50%;
}

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

	these tables are a mess but i will not be fixing them

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

table{
	width: 100%;
	border: var(--border-level-2);
		border-color: var(--grey);
		border-style: inset;
		border-radius: var(--border-radius-level-2);
		border-spacing: 0.5rem 0;
	margin: 1.5rem auto;
	padding: 1rem 0.5rem;
	padding-bottom: 0.5rem;
   box-shadow: 0.1rem 0.08rem 0.6rem -0.12rem hsla(22, 32%, 85%, 0.45) inset;
}

td{
	font-size: 0.9em;
}

table:first-of-type{
	width: 55ch;
	padding: 0.5em 0.33em;
	padding-top: 0.75em;
}

table:first-of-type td{
	padding: 0.33em 0;
	padding-top: 0.55em;
}

table:first-of-type tr:last-child td{
	padding-bottom: 0;
}

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

		table heading

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

th{
	padding-top: 0.5ch;
	background: var(--green-texture);
	border: var(--border-level-2);
		border-color: var(--green);
		border-style: outset;
		border-radius:var(--border-radius-level-3);
	text-shadow: 
	  0.033em 0.033em var(--white),
	  -0.033em 0.033em var(--white),
	  -0.033em -0.033em var(--white),
	  0.033em -0.033em var(--white),
		  0.05em 0.05em var(--green2),
		  -0.05em 0.05em var(--green2),
		  -0.05em -0.05em var(--green2),
		  0.05em -0.05em var(--green2),
	  		0.1em 0.1em var(--green2)
		;
}

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

		cute flowers!!!

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

th:only-child::before, th:only-child::after{
	content: "\273F";
	font-size: 0.8em;
}

th:only-child::before{
	margin-right: 0.4em;
}

th:only-child::after{
	margin-left: 0.4em;
}

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

	THIS IS THE MESSY PART. I DON'T EVEN WANNA TOUCH IT RN.

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

.picsdata td{
	display: flex;
		flex-flow: row nowrap;
		align-items: flex-end;
		align-content: stretch;
		justify-content: space-evenly;
		gap: 0.25em;
}

.picsdata td:not(.picsdata tr:nth-child(3n) td){
	padding: 0.5em 0;
}

.picsdata tr:nth-child(3n) td{
	font-size: 0.9em;
	margin-bottom: 0.5em;
}

.picsdata img{
	object-fit: contain;
}

:is(.bokuimg, .kinimg) > img{
	max-height: 6em;
}

:is(.tinyimg, .bokuimg) > img{
	width: calc(100% / 6);
}

:is(.kinimg, .acimg) > img{
	max-width: calc(100% / 5);
}

.tinyimg img{
	max-height: 4em;
}

.picsdata td.bigimg{
	align-items: center;
}

.bigimg img{
	/* height: 10em; */
	max-width: calc(100% / 4.5);
	margin-top: 0.33em;
}

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

		footer

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

footer{
	margin: var(--gap) auto;
	margin-bottom: 0;
	filter: var(--drop-shadow-medium);
}