:root{
	--red: hsl(358, 71%, 62%);
	--red-texture: var(--red) url("/background/texture/red4.png");
	--blue: hsl(209, 44%, 38%);
	--blue-texture: var(--blue) url("/background/texture/blue5.png");
   --green: #89C57E;
   --green-texture: var(--green) url("/background/texture/green9.png");
   --orange: hsl(37, 99%, 50%);
   --orange-texture: var(--orange) url("/background/texture/orange4.png");

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

   --back-arrow: url("/assets/pixel/navi/baby_01_back.gif");
   --home: url("/assets/pixel/navi/home_cat.gif");
   --next-arrow: url("/assets/pixel/navi/baby_01_next.gif");

   --h1-before: url("/stickers/cutie/2_summer/I04.png");
   --h1-after: url("/stickers/cutie/2_summer/I04.png");

   --h3-before: url("/stickers/cutie/2_summer/D08.png");
   --h3-after: url("/stickers/cutie/2_summer/I05.png");

	--blue2: hsl(211, 32%, 22%);
	--blue3: hsl(209, 61%, 41%);
	--white2: #FEF4E8;
	--outline-color: var(--blue2);

   --shadow-color: 210deg 100% 9%;
   --scrollbar-thumb: var(--red-texture);
   --scrollbar-button: url("/assets/pixel/sky/10.gif");
}

body{
	background-color: var(--yellow);
	background-image: url("/background/gg10.png"), url("/background/27_A.png");
		background-attachment: fixed;
		background-size: 8svw, auto;
		background-repeat: round, repeat;
		background-position: center center, 0px 0px;
}

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

h1{
	color: var(--blue2);
	--outline: var(--white);
	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);
}

.entry{
	background-image: url("/background/06_b.png")!important;
		background-size: 3.5%!important;
		background-position: -1.2% -1.5%!important;
}

#monthly{
   background-color: var(--blue);
	background-image: url("/background/gg07.png"), url("/background/texture/blue5.png")!important;
		background-size: 3svw auto, auto!important;
		background-repeat: round, repeat!important;
		background-position: -0.5% center, 0 0!important;
}

#monthly aside{
   overflow: hidden;
}

p#image > img{
	height: 5em;
	margin-top: 1ch;
}

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

.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");
}

h3::before, h3::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

footer{
	color: var(--white);
	text-shadow: var(--text-shadow-custom);
}

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

footer a:hover{
	color: var(--white);
	--outline: var(--red);
	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;
}