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

	variables

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

:root{

   --back-arrow: url("/assets/pixel/navi/baby_02_back.png");
   --home: url("/assets/pixel/navi/catmenu.gif");
   --next-arrow: url("/assets/pixel/navi/baby_02_next.png");

   --h1-before: url("/stickers/cutie/4_winter/E02.png");
   --h1-after: url("/stickers/cutie/4_winter/E02.png");

   --h3-before: url("/stickers/yummy/blue/A08.png");
   --h3-after: url("/stickers/yummy/blue/A08.png");

   --scrollbar-thumb: var(--blue-texture);
   --scrollbar-button: url("/assets/pixel/misc/08.gif");

   --shadow-color: 231deg 46% 19%;

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

	--black: hsl(251, 8%, 23%); 
	--blue2: hsl(230, 32%, 41%);
	--blue3: hsl(229, 34%, 54%);
	--aqua2: hsl(211, 50%, 68%);
   --pink2: hsl(346, 48%, 70%);

	--blue: hsl(230, 32%, 45%);
   --blue-texture: var(--blue) url("/background/texture/blue7.png");
	--aqua: hwb(211 68% 8%);
   --aqua-texture: var(--aqua) url("/background/texture/blue4.png");
   --pink: hsl(346, 43%, 78%);
	--pink-texture: var(--pink) url("/background/texture/pink5.png");

}

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

		basic styling

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

body{
	background-color: var(--blue2);
	background-image: url("/0ld/0lder/background/gg02.png"), url("/background/27_B.png");
		background-size: 5%, auto;
		background-attachment: fixed;
}

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

	   links

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

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

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

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

	   headings

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

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

h1::before, h1::after{
   --size: 1.25em;
   width: calc(var(--size) / 1.5);
}

h2::before, h2::after{
   content: "┐";
}

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

	   sidebar navi

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

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

p#song img{
   max-width: 1em;
}

p#image b{
   font-size: 99%;
   margin-bottom: 1ch;
}

p#image img{
   margin: 0;
}

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

	   footer

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

footer{
   color: var(--white2);
}

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

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

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

		added stickers!!!

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

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

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

		entry

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

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

.entry .hugme{
   --back-position: 0.85em;
	--back-size: 1.25em;
	padding-left: calc(1.1em + var(--back-position) + var(--back-size))!important;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: repeat-y, repeat;
      background-position: 
      var(--back-position) center,
      0 0;
      background-size: var(--back-size), auto;
   background-image: 
      url("/0ld/0lder/background/17.png"),
      url("/background/texture/white.png");
}

main > section .divider{
   max-width: 100%;
   max-height: 1.75em;
}

.blue.texture:not(#monthly) {
	background-image: 
      url("/0ld/0lder/background/18.png"),
      url("/background/texture/blue7.png");
   background-size: 8svw, auto;
}

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

	   gratitude

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

.moment.texture.aqua{
	background-image: url("/background/35_A.png");
   background-size: 33%;
}

.moment::after{
   --size: 6em;
   height: calc(var(--size) / 2);
   transform: translate(205%, -40%);
	background-image: url("/stickers/yummy/pink/F03.png");
}

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

	   table

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

.table tr:nth-of-type(1) th::before{
   content: "┛ ";
}

.table tr:nth-of-type(2) th::before{
   content: "┰ ";
}

.table tr:nth-of-type(3) th::before{
   content: "│ ";
}

.table tr:nth-of-type(4) th::before{
   content: "♪ ";
}

.table::before{
   --size: 3.33em;
   transform: translate(-90%, -90%) rotate(-12deg) scale(1.5);
	background-image: url("/stickers/yummy/blue/S05.png");
   filter: var(--sticker-drop-shadow);
}

.table::after{
   --size: 5em;
   width: calc(var(--size) / 2);
   transform: translate(545%, -77%) scale(1.4) rotate(8deg);
	background-image: url("/stickers/yummy/pink/H05.png");
}

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

		icon shenanigans

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

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

#icon::before{
   --size: calc(var(--mysize) * 0.24);
   transform: translate(-50%, -52%) rotate(-30deg);
	background-image: url("/stickers/yummy/blue/Q10.png");
}

#icon::after{
   --size: calc(var(--mysize) * 0.4);
   transform: translate(150%, -80%) rotate(8deg);
	background-image: url("/stickers/yummy/blue/Q04.png");
}