:root{
   --shadow-color: 29deg 20% 20%;
   --outline-color: var(--brown);
   --scrollbar-thumb: var(--aqua-texture);
   --selection-bg: var(--brown-bg);
   --summary-hover-one: var(--aqua);
   --summary-hover-two: var(--brown);

   --black: hsl(44, 71%, 16%);
	--white2: hsl(345, 22%, 96%);

   --aqua: hsl(135, 12%, 46%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua6.png");
   --brown: hsl(29, 20%, 49%);
   --brown-texture: var(--brown) url("/background/texture/brown4.png");
   --yellow: hsl(39, 80%, 48%);
   --yellow-texture: var(--yellow) url("/background/texture/yellow6.png");
}

body{
   background-color: var(--brown-bg);
      background-image: url("/background/38.png");
      background-size: 5.25%;
      background-position: -1% top;
}

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

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

li:nth-of-type(odd) details summary:hover span, li:nth-of-type(odd) details summary:focus span{
   color: var(--summary-hover-one);
}

li:nth-of-type(even) details summary:hover span, li:nth-of-type(even) details summary:focus span{
   color: var(--summary-hover-two);
}

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

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

footer{
   font-weight: bold;
   color: var(--yellow);
   /* text-shadow: var(--text-shadow-black); */
}

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

	headings

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

h2:nth-of-type(1):before, h2:nth-of-type(1):after{
	background-image: url("/stickers/cutie/4_winter/B36.png");
}

h2:nth-of-type(2):before, h2:nth-of-type(2):after{
	background-image: url("/stickers/cutie/3_autumn/D09.png");
}

h2:nth-of-type(3):before, h2:nth-of-type(3):after{
	background-image: url("/stickers/cutie/2_summer/E10.png");
}

h2:nth-of-type(4):before, h2:nth-of-type(4):after{
	background-image: url("/stickers/cutie/1_spring/E05.png");
}