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

	variables

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

:root{

   /* images */
   
   --background: url("/background/ZMax/01.gif");
   --h2-img: url("/stickers/cutie/2_summer/I08_A.png");
   --h2-after-img: url("/stickers/cutie/1_spring/I24.png");

   --back-arrow: url("/assets/pixel/navi/sb_back.gif");
   --home: url("/stickers/cutie/2_summer/K27.png");
   --next-arrow: url("/assets/pixel/navi/sb_next.gif");

   /* colors */

	--aqua-bg: hsl(125, 27%, 84%);
	--aqua: hsl(126, 21%, 74%);
	--aqua2: hsl(126, 21%, 40%);
	--aqua-texture: var(--aqua) url("/background/texture/aqua2.png");
   
	--green: hsl(74, 50%, 71%);
	--green2: hsl(86, 40%, 66%);
   --green3: hsl(86, 50%, 54%);
	--green-texture: var(--green) url("/background/texture/green2.png");

   --orange: hsl(36, 91%, 70%);
	--black: hsl(245, 8%, 26%); 
   --blue: hsl(221, 55%, 60%);

   --outline-color: var(--aqua2);

	--icon-border: var(--green2);
	--bubble-bg: var(--green-texture);
	--bubble-bg-2: var(--aqua-texture);

	--selection-bg: var(--yellow);
	--selection-text: var(--black);

	--link: var(--blue);
	--link-hover: var(--green3);

	--table-container-bg: var(--aqua-texture);
   --table-container-border: var(--aqua);
	--table-bg: var(--green-texture);
	--table-cell-border: var(--green);
	--table-notes-border: var(--green);

	--scrollbar-thumb: var(--green-texture);
   --scrollbar-button: url("/assets/pixel/nature/09.gif");
   
   --heartbeat: var(--orange); /* beating heart in header */
	--heartcute: var(--orange); /* hearts in happiness table */
}

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

		shadows!!!!

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

#icon, main, #bubbles >*{
   box-shadow: var(--life-saving-box-shadow);
}

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

header section >:not(h1), main, footer{
   filter: var(--life-saving-drop-shadow);
}

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

		basic styling

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

body{
   background-color: var(--yellow-bg);
   background-size: cover;
   image-rendering: optimizeQuality;
}

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

h2::before{
   margin-bottom: 0.5em;
}

h2::after{
   height: 0.75em;
   background-image: var(--h2-after-img);
   margin-top: 0.66em;
}

header nav{
   transform: translateY(-0.5em);
}

a#return{
   height: 2em;
}

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

	adds hearts around "my happiness"

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

main > div > div table:last-of-type th::before, main > div > div table:last-of-type th::after{
   text-shadow: var(--text-shadow-black);
}

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

		icon plus stickers

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

#icon{
   z-index: 9;
}

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

#icon::before{
	background-image: url("/stickers/cutie/2_summer/L05_A.png");
   --size: 10svw;
   height: calc(var(--size) * 0.75);
   transform: translate(80%, -20%);
}

#icon::after{
	background-image: url("/stickers/cutie/2_summer/M03_A.png");
   --size: 10svw;
   height: calc(var(--size) * 0.75);
   transform: translate(-10%, -85%);
}

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

		bubbles

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

#bubbles >*{
   border-style: dashed;
}

#bubbles >*:nth-child(odd){
   background: var(--bubble-bg-2);
}

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

		entry background

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

main.texture > div{
   --back-position: 0.75em;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-image: 
         url("./assets/flower_01.png"),
         url("./assets/flower_01.png"),
         url("/background/texture/white.png");
      background-position: 
         calc(1.75 * var(--back-position)) calc(1.25 * var(--back-position)),
         calc(100% - 2 * var(--back-position)) calc(1.25 * var(--back-position)),
         0 0;
      background-size: auto 5em, auto 5em, auto;
}

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

		footer

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

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

a[href="#top"]{
   font-weight: bold;
   color: var(--white);
}