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

		variables

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

:root{
	--seme-height: 10svh;
	--green2: #96BF37;
	--blue2: #587CC4;
	--red2: #ce4358;
	--outline-color: var(--blue2);
}

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

		basic style

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

body{
   --sidebar-width: 10em;
	margin: var(--gap) auto;
	text-align: center;
	width: 75svw;
}

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

	cute banner at the top

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

#seme{
	--seme-height: 10svh;
	width: 100%;
	background-image: url("/background/gg01.png");
	filter: var(--drop-shadow-medium);
	position: absolute;
}

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

		shadows

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

h1{
	text-shadow: var(--text-shadow-white);
	filter: var(--drop-shadow-medium);
}
main > a{
	filter: var(--drop-shadow-low);
}

main > section > div:first-child{
	box-shadow: var(--shadow-elevation-medium);
}

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

main > section > div:first-child span{
	text-shadow: var(--literal-text-shadow);
}

main > section > div:first-child span > span{
	text-decoration: underline dotted var(--grey);
}

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

	main content!!!!!

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

main{
	padding-top: calc(var(--seme-height) / 2);
}

main > a:first-of-type{
	color:var(--blue2);
	opacity: 0.8;
}

main > a:first-of-type:hover{
	color: var(--red2);
	opacity: 1;
}

main > a:first-of-type, main > a:first-of-type:hover{
	transition: color .3s ease, opacity .2s ease;
}

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

	cute box that describes sticker set

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

section > div:first-child{
	--size: 18svw;
	display: grid;
		grid-auto-columns: repeat(auto-fit, minmax(0, 1fr));
			grid-template-columns: auto var(--size);
			grid-template-rows: var(--size) auto;
		grid-template-areas: 'main img' 'main date';
		gap: var(--gap);
		align-items: stretch;
		align-content: space-between;
	margin: calc(2 * var(--gap)) auto;
}

section > div:first-child > div:last-child, section > div:first-child > span{
	padding: 0.5em!important;
}

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

	main textbox

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

section > div:first-child > div{
	grid-area: main;
	padding: 0.25em 0.5em!important;
		display: flex;
			flex-flow: column wrap;
			align-items: center;
			justify-content: center;
}

section > div:first-child p{
	max-width: 55ch;
}

h2{
	margin-top: 0.5em;
	/* text-shadow: var(--text-shadow-white); */
}

h2::before, h2::after{
   --size: 0.66em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
	margin: 0 0.5em;
}

#yummy h2::before, #yummy h2::after{
   --size: 0.75em;
	background-image: url("/stickers/yummy/blue/B07.png");
	transform: rotate(20deg);
}

#yummy h2::after{
	transform: rotate(-20deg) scaleX(-1);
}

#cutie h2::before, #cutie h2::after{
	--size: 1em;
	background-image: url("/stickers/cutie/1_spring/A26.png");
}

#dotty h2::before, #dotty h2::after{
	--size: 1em;
	background-image: url("/stickers/dotty/1_spring/A29.png");
}

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

	changes scrollbar colour based on page order

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

#yummy > div:first-child .hugme::-webkit-scrollbar-thumb{
	background: var(--red-texture);
		border-color: var(--red);
}

#cutie > div:first-child .hugme::-webkit-scrollbar-thumb{
	background: var(--blue-texture);
		border-color: var(--blue);
}

#dotty > div:first-child .hugme::-webkit-scrollbar-thumb{
	background: var(--yellow-texture);
		border-color: var(--yellow);
}

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

		preview image!!!

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

section > div:first-child > div:last-child{
	grid-area: img;
	display: flex;
		align-items: center;
		justify-content: center;
}

section img{
	max-width: 100%;
	max-height: 100%;
}

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

	updated/completed date

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

section > div:first-child > span{
	grid-area: date;
	font-size: 0.8em;
	display: flex;
		justify-content: space-evenly;
		align-items: center;
	text-align: center;
}

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

	links back home at the bottom

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

main > a:last-child{
	display: block;
	margin: calc(2 * var(--gap)) auto;
		margin-top: calc(3 * var(--gap));
	width: 50%;
	color: var(--white);
	font-family: var(--heading-font);
	text-decoration: none;
	text-shadow: var(--text-shadow-custom);
}

main > a:last-child:hover{
	color: var(--blue);	
	text-shadow: var(--text-shadow-white);
	transition: color 0.3s ease, text-shadow 0.2s ease;
}

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

	FOOTER!!!!!!!!!!!!!!!!!!!!!

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

footer{
	display: flex;
		justify-content: center;
	margin: 1.5em auto;
	filter: var(--drop-shadow-low);
}

footer >*{
	margin: 0 0.75em;
}

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

		flexboxes hold sticker books

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

nav{
	display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: center;
}

main nav a{
	max-width: 23%;
	margin: 0 1%;
}

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

		books!!!!!

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

main nav a img{
	max-width: 100%;
	filter: var(--drop-shadow-low);
}

main nav a:hover img, main nav a:focus img{
	filter: brightness(1.02) var(--drop-shadow-medium);
	transform: scale(1.1);
}

main nav a img, main nav a:focus img, main nav a:hover img{
	transition: transform 0.3s ease, filter 0.3s ease;
}

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

		scaling books in individual sets

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

#yummy img{
	max-width: 94%;
}

#cutie a:hover img{
	transform: scale(1.18);
}