:root{
   --shadow-color: 259deg 18% 50%;
   --purple-bg: #BFB4D9;

	--purple: hsl(264, 28%, 65%);
	--purple-texture: var(--purple) url("/background/texture/purple5.png");
   --pink: hsl(346, 43%, 78%);
	--pink-texture: var(--pink) url("/background/texture/pink5.png");
	--green: hsl(74, 50%, 71%);
	--green-texture: var(--green) url("/background/texture/green2.png");

   --pink2: hsl(345, 40%, 70%);
	--purple2: hsl(264, 20%, 55%);
	--black: hsl(269, 16%, 39%);
	--black2: hsl(269, 16%, 32%);

	--sticker-drop-shadow:
			drop-shadow(0.3px 0.5px 0.7px hsl(var(--sticker-shadow-color) / 0.25))
			drop-shadow(0.8px 1.6px 2px hsl(var(--sticker-shadow-color) / 0.2))
			drop-shadow(2.1px 4.1px 5.2px hsl(var(--sticker-shadow-color) / 0.15));
	--sticker-shadow-color: 345deg 20% 50%;

   --table-border: var(--green);
	--outline-color: var(--purple2);
   
   --back-arrow: url("/assets/pixel/navi/baby_02_back.png");
   --home: url("/assets/pixel/navi/home_clould.gif");
   --next-arrow: url("/assets/pixel/navi/baby_02_next.png");

   --h1-before: url("/stickers/cutie/1_spring/D03.png");
   --h1-after: url("/stickers/cutie/1_spring/D03.png");

   --h3-before: url("/stickers/cutie/1_spring/L11.png");
   --h3-after: url("/stickers/cutie/1_spring/L11.png");

	--scrollbar-thumb: var(--purple-texture);
   --scrollbar-button: url("/assets/pixel/food/z2.gif");
}

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

		basics

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

body{
	background-color: var(--purple-bg);
	background-image: url("/background/16.png");
      background-size: auto 21.25svh;
}

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

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

h2{
   color: var(--black2);
}

h3::before{
   transform: scaleX(-1);
}

.texture.white{
   background: var(--white-texture);
}

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

		entry

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

.entry{
	background-image: url("/background/36.gif")!important;
   background-size: 5%!important;
   border-color: var(--pink2)!important;
}

.entry .hugme::-webkit-scrollbar-thumb{
   background: var(--purple-texture);
   border-color: var(--purple);
}

:is(.moment, #monthly) .hugme::-webkit-scrollbar-thumb{
   background: var(--pink-texture);
   border-color: var(--pink);
}

.table::before, .table::after{
   content: "";
   width: var(--size);
   height: var(--size);
   display: block;
   position: absolute;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.table::before{
   --size: 2.5em;
   transform: translate(-40%, -70%) rotate(-12deg);
	background-image: url("/stickers/cutie/3_autumn/M16.png");
   filter: var(--sticker-drop-shadow);
}

.table::after{
   --size: 4em;
   transform: translate(340%, -55%);
	background-image: url("/stickers/cutie/1_spring/E09.png");
}

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

		icon shenanigans

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

.doily, #icon::before, #icon::after{
   content: "";
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.doily{
	background-image: url("/background/d01.png");
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

#icon{
   --mysize: calc((100svw - var(--size)) * 0.55 + 1em);
   margin-bottom: calc(var(--gap) / 3);
   margin-top: calc(var(--gap) * -0.75);
   box-shadow: none;
}

#icon > div{
   --offset: 3em;
   height: calc(100% - var(--offset));
   width: calc(100% - var(--offset));
   transform: translate(calc(var(--offset) / 2), calc(var(--offset) / 2));
   padding: 0.75em!important;
}

#icon > div, #icon img{
   border-radius: 50%;
}

#icon img{
   padding: 0!important;
}

#icon > div, #icon::before, #icon::after{
   filter: var(--drop-shadow-low);
}

#icon::before, #icon::after{
   z-index: 99;
   position: absolute;
   width: var(--size);
   height: var(--size);
}

#icon::before{
   --size: calc(var(--mysize) * 0.25);
   transform: translate(32%, 70%) rotate(20deg);
	background-image: url("/stickers/cutie/4_winter/I14_A.png");
}

#icon::after{
   --size: calc(var(--mysize) * 0.27);
   transform: translate(240%, -30%);
	background-image: url("/stickers/cutie/1_spring/E15.png");
}

/* other sidebar stuff */

#sidebar > nav{
      align-items: center;
}

p#image{
   margin-bottom: 0;
}

p#image > img{
	height: calc(6.25em - 1ch);
	margin-top: 1ch;
}

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

	   footer

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

footer{
   font-weight: bold;
	color: var(--purple);
	text-shadow: var(--text-shadow-white);
}

footer a{
   font-weight: normal;
	color: var(--white);
	text-shadow: var(--text-shadow-custom);
}

footer a:hover{
	color: var(--white);
	--outline: var(--pink2);
	text-shadow:
		0.033em 0.033em var(--outline),
		-0.033em 0.033em var(--outline),
		-0.033em -0.033em var(--outline),
		0.033em -0.033em var(--outline),
			0.04em 0.04em var(--outline),
			-0.04em 0.04em var(--outline),
			-0.04em -0.04em var(--outline),
			0.04em -0.04em var(--outline);
}

footer a, footer a:hover{
	transition: text-shadow .3s ease;
}