:root{
   --shadow-color: 205deg 37% 52%;
   --scrollbar-thumb: var(--blue-texture);
   --outline-color: var(--blue3);

   --blue: hsl(210, 68%, 65%);
   --blue2: hsl(211, 61%, 53%);
   --blue3: hsl(230, 23%, 37%);
   --red: hsl(347, 63%, 57%);
   --aqua2:hsl(199, 75%, 53%);

   --blue4: hsl(204, 58%, 79%);
   --blue-texture: var(--blue) url("/background/texture/blue8.png");

   --aqua: hsl(193, 45%, 75%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua8.png");

	/* aqua heading text shadow */
	--heading-shadow-1:
		drop-shadow(0.3px 0.5px 0.7px hsl(var(--heading-shadow-color-1) / 0.21))
		drop-shadow(0.4px 0.8px 1px hsl(var(--heading-shadow-color-1) / 0.21))
		drop-shadow(1px 2px 2.5px hsl(var(--heading-shadow-color-1) / 0.21));
	--heading-shadow-color-1: 193deg 70% 31%;

	/* blue heading text shadow */
	--heading-shadow-2:
		drop-shadow(0.3px 0.5px 0.7px hsl(var(--heading-shadow-color-2) / 0.21))
		drop-shadow(0.4px 0.8px 1px hsl(var(--heading-shadow-color-2) / 0.21))
		drop-shadow(1px 2px 2.5px hsl(var(--heading-shadow-color-2) / 0.21));
	--heading-shadow-color-2: 204deg 50% 31%;
}

body{
   background-color: var(--aqua-bg);
      background-image: url("/background/42.gif");
      background-size: 3svw;
}

li, li > p{
	width: 52ch!important;
	max-width: 52ch!important;
}

.blue.texture{
   background-image: url("/background/43.gif");
      background-size: calc(3.33svw * 3);
}

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

	links in general

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

a,
li:nth-of-type(even) a:nth-of-type(even){
   color: var(--blue2);
}

a:nth-of-type(even),
li:nth-of-type(even) a:nth-of-type(odd),
li > ul > li:nth-of-type(odd) a{
   color: var(--aqua2);
}

li > ul > li:nth-of-type(even) a{
   color: var(--blue2)!important;
}

a:hover,
a:focus{
   color: var(--red)!important;
}

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

	link that lets you escape this page

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

main > div > .texture:last-child{
	width: 55%;
	margin: 1.5em auto 0.75em auto;
	border: var(--border-level-2);
		border-color: var(--aqua);
		border-style: outset;
		border-radius: var(--border-radius-level-2);
}

main > div > .texture:last-child > div{
	font-size: 0.9em;
	border-radius: var(--border-radius-level-3);
	padding: 0 0.5em!important;
}

main > div > .texture:last-child p{
	margin: 0.5em auto;
	filter: var(--drop-text-shadow);
}

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

		headings....

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

h1, h2{
	margin: 0.75em auto;
	color: var(--white);
	border: var(--border-level-2);
		border-style: outset;
		border-radius: var(--border-radius-level-2);
}

h2{
   width: auto;
	/* max-width: 50%; */
}

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

	the actual text

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

h1 div, h2 div{
   display: inline-block;
	box-sizing: border-box;
		padding: 0.5em;
	background-repeat: no-repeat;
	text-shadow: var(--text-shadow-custom);
	filter: var(--heading-shadow);
}

h2 div{
   padding-bottom: 0.66em;
}

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

		warning/caution

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

.warning, .note{
   font-size: 0.9em;
}

:is(.warning, .note)::before, :is(.warning, .note)::after{
   display: contents;
}

.warning::before{
   content: "(┳! ";
}

.warning::after{
   content: ")";
}

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

		aqua heading

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

h1, h2:nth-of-type(even){
	margin-top: auto;
	background: var(--aqua-texture);
	border-color: var(--aqua);
}

:is(h1, h2:nth-of-type(even)) div,
:is(h1, h2:nth-of-type(even))::before,
:is(h1, h2:nth-of-type(even))::after{
	filter: var(--heading-shadow-1);
}

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

		blue heading

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

h2:nth-of-type(odd){
	background: var(--blue-texture);
	border-color: var(--blue4);
}

h2:nth-of-type(odd) div,
h2:nth-of-type(odd)::before,
h2:nth-of-type(odd)::after{
	filter: var(--heading-shadow-2);
}

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

	background images

..........................

h1 div{
	background-position: 2% 15%, 98% 15%, 2% 85%, 98% 85%;
}

h1 div:first-of-type, h1 div:last-of-type{
	background-image: 
		url("/stickers/dotty/2_summer/B24.png"),
		url("/stickers/cutie/3_autumn/F06.png"),
		url("/stickers/cutie/3_autumn/F06.png"),
		url("/stickers/dotty/2_summer/B24.png")
		;
	background-size: 3.5% auto, 4.5% auto, 4.5% auto, 3.5% auto;
}

h1:nth-of-type(2) div{
	font-size: 0.88em;
	padding: 0.66em;
	padding-bottom: 0.75em;
	background-image: 
		url("/stickers/dotty/2_summer/B24.png"),
		url("/stickers/dotty/2_summer/B24.png"),
		url("/stickers/cutie/1_spring/B09.png"),
		url("/stickers/cutie/1_spring/B09.png")
		;	
	background-size: 3.5% auto, 3.5% auto, 4% auto, 4% auto;
}

h2:first-of-type div{
	background-image: 
		url("/stickers/cutie/2_summer/D23.png"),
		url("/stickers/cutie/2_summer/D21.png")
		;	
	background-size: auto 66%;
	background-repeat: no-repeat;
	background-position: 7% 50%, 93% 50%;
}

*/

h1::before, h1::after,
h2::before, h2::after{
   --size: 1.5em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin: 0 0.5ch;
}

h1::before, h1::after{
   --size: 0.8em;
   background-image: url("/stickers/yummy/blue/D08.png");
}

h2::before, h2::after{
   transform: translateY(0.5ch);
}

#content::before, #content::after{
   background-image: url("/stickers/yummy/blue/J03.png");
}

#community::before, #community::after{
   background-image: url("/stickers/yummy/blue/E03.png");
}

#daydream::before, #daydream::after{
   background-image: url("/stickers/yummy/blue/G03.png");
}

#lore::before, #lore::after{
   background-image: url("/stickers/yummy/blue/I01.png");
}

#fun::before, #fun::after{
   background-image: url("/stickers/yummy/blue/A05.png");
   --size: 1.33em;
}

#tips::before, #tips::after{
   background-image: url("/stickers/yummy/blue/P01.png");
}

#more::before, #more::after{
   background-image: url("/stickers/yummy/blue/P05.png");
}

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

	   details

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

#tips + p + ol{
   list-style: none;
   padding-left: 1.5em;
}

details p{
   margin: 1em auto;
}

details p:last-child{
   margin-bottom: 0;
}

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

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

details summary, 
details summary:hover, 
details summary:focus{
   transition: color .3s ease-out;
}


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

		cute bullets

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

ul{
	list-style-type: none;
   padding-left: 2em;
}

li:not(:last-child){
   margin-bottom: 1em;
}

ul li::before{
	display: inline-block;
	transform: translateX(-0.5em);
}

ul li:nth-of-type(10n+1)::before{
	content: "\02538";
}

li > ul{
   margin-top: 1em;
}

li > ul > li:nth-of-type(odd):before{
	content: "\2606";
}

li > ul > li:nth-of-type(even):before{
	content: "\252F";
}

ul li:nth-of-type(10n+2)::before{
	content: "\02520";
}

ul li:nth-of-type(10n+3)::before{
	content: "\02524";
}

ul li:nth-of-type(10n+4)::before{
	content: "\02542";
}

ul li:nth-of-type(10n+5)::before{
	content: "┰";
}

ul li:nth-of-type(10n+6)::before{
	content: "\2606";
}

ul li:nth-of-type(10n+7)::before{
	content: "\2502";
}

ul li:nth-of-type(10n+8)::before{
	content: "\252F";
}

ul li:nth-of-type(10n+9)::before{
	content: "\2510";
}

ul li:nth-of-type(10n)::before{
	content: "\251B";
}