:root{
   --shadow-color: 49deg 49% 50%;

   --black: hsl(350, 15%, 29%);
   --aqua2: hsl(158, 24%, 39%);

   --brown: hsl(350, 21%, 33%);
   --brown-texture: var(--brown) url("/background/texture/brown5.png");

   --aqua: hsl(156, 27%, 69%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua9.png");

   --yellow: #F2D83D;
   --yellow-texture: var(--yellow) url("/background/texture/yellow8.png");

   --h2-before: url("/stickers/dotty/2_summer/F16.png");
   --h2-after: url("/stickers/dotty/2_summer/F16.png");

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

   --bubble-bg: var(--brown-texture);
   --bubble-border: var(--brown);

   --divider: url("/assets/pixel/divider/22.gif");

   --back-arrow: url("/stickers/yummy/pink/H04.png");
   --home: url("/stickers/yummy/pink/H04.png");
   --next-arrow: url("/stickers/yummy/pink/H04.png");

   --scrollbar-thumb: var(--yellow-texture);
   --scrollbar-button: url("/assets/pixel/animal/136.gif");
}

body{
   background-color: var(--yellow-bg);
   background-image: url("/background/10.png");
      background-size: 20svw;
}

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

header{
   align-items: center;
}

footer{
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
}

footer a{
   text-decoration: none;
}

h1{
   transform: translateY(calc(var(--gap) * 1.5));
}

h1::after{
   display: none;
}

nav a{
   background: var(--aqua-texture);
   border-color: var(--aqua);
}

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


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

	cute hover bubbles ??

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

#bubbles >*{
	border: var(--border-level-2);
      border-style: outset;
	   border-radius: var(--border-radius-level-1);
	background: var(--bubble-bg);
	border-color: var(--bubble-border);
}

#bubbles img{
	max-height: calc(var(--size) * 0.6);
   max-width: 250%;
}