:root{
   --shadow-color: 177deg 30% 42%;

	--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%;

   --aqua: hsl(179, 42%, 55%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua7.png");

   --green2: hsl(79, 54%, 49%);

   --table-border: var(--grey);

   --back-arrow: url("/assets/pixel/navi/a03.gif");
   --home: url("/assets/pixel/food/ia_tomato.gif");
   --next-arrow: url("/assets/pixel/navi/a04.gif");

   --h1-before: url("/stickers/yummy/orange/D07_A.png");
   --h1-after: url("/stickers/yummy/orange/D07_A.png");

   --h3-before: url("/stickers/yummy/yellow/B09.png");
   --h3-after: url("/stickers/yummy/yellow/B09.png");

	--scrollbar-thumb: var(--aqua-texture);
   --scrollbar-button: url("/assets/pixel/sky/10.gif");
}

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

		basics

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

body{
	background-color: var(--aqua-bg);
	background-image: url("/background/40.png");
      background-size: auto;
}

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

p#image{
   margin-bottom: 0;
}

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

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

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

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

		links

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

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

a:is(:hover, :focus){
   color: var(--orange);
}

#sidebar a{
   color: var(--orange);
}

#sidebar a:hover, #sidebar a:focus{
   color: var(--aqua);
}

footer a{
   color: var(--orange);
   text-decoration: none;
}

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

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

		footer

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

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

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

		shadows

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

h1, main{
   filter: var(--life-saving-drop-shadow) var(--life-saving-drop-shadow);
}

#icon, #monthly, .entry, .moment, .table{
   box-shadow: var(--life-saving-box-shadow);
}

.entry, .table, .moment{
   box-shadow: var(--shadow-elevation-low);
}

footer, #sidebar > nav{
   filter: var(--drop-shadow-low);
}

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

		entry & moments

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

.entry .hugme{
   --back-position: 0.85em;
	--back-size: 0.5em;
	padding-left: calc(1.1em + var(--back-position) + var(--back-size))!important;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: no-repeat space, repeat;
      background-position: 
      var(--back-position) center,
      0 0;
      background-size: var(--back-size) 95%, auto;
   background-image: 
      url("/background/m08.png"),
      url("/background/texture/white.png");
}

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

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

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

		icon shenanigans

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

#icon::before, #icon::after{
   content: "";
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   z-index: 99;
   position: absolute;
   width: var(--size);
   height: var(--size);
   filter: var(--life-saving-drop-shadow);
}

#icon::before{
   --size: calc(var(--mysize) * 0.43);
   transform: translate(-10%, -52%) rotate(-36deg);
	background-image: url("/stickers/yummy/orange/Q09_A.png");
}

#icon::after{
   --size: calc(var(--mysize) * 0.4);
   transform: translate(160%, -58%);
	background-image: url("/stickers/yummy/yellow/F04_A.png");
}