:root{    
    
    --shadow-color: 206deg 78% 20%;
  
    --black: hsl(220, 50%, 30%);
    
    --blue: hsl(215, 71%, 29%);
    --blue-texture: var(--blue) url("/background/texture/blue10.png");

    --aqua: hsl(200, 73%, 47%);
    --aqua-texture: var(--aqua) url("/background/texture/aqua10.png");  
    
    --blue2: hsl(200, 64%, 80%);

    --white-texture: var(--white2) url("/background/texture/white2.png");

    --h2-before: url("/stickers/yummy/blue/H06.png");
    --h2-after: url("/stickers/yummy/blue/H07.png");
 
    --table-border: var(--aqua);

    --bubble-bg: var(--blue-texture);
    --bubble-border: var(--blue);
 
    --divider: url("/assets/pixel/divider/KOg30KW.gif");
 
    --back-arrow: url("/stickers/yummy/blue/I01.png");
    --home: url("/stickers/yummy/blue/I01.png");
    --next-arrow: url("/stickers/yummy/blue/I01.png");
 
    --scrollbar-thumb: var(--aqua-texture);
    --scrollbar-button: url("/assets/pixel/food/z1.gif");
}

body{
    background-color: var(--blue2);
    background-image: url("/background/gg16.png"), url("/background/k9ZkrNy.png");
        background-size: 6svw, 8svw;
        background-position: left -1.4svw, left;
}

a{
    color: var(--aqua)
}

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

nav a{
    background: var(--aqua-texture);
    border-color: var(--aqua);
    color: var(--blue2);
    text-shadow: var(--text-shadow-black);
 }
 
 nav a:is(:hover, :focus){
    color: var(--aqua-bg);
 }

 nav a::before{
    transform: scale(1.25) translate(-0.25ch, -0.15ch);
 }

footer{
    color: var(--white)
}

footer a{
    color: var(--aqua-bg);
}

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

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

h1::after{
   display: none;
}

:is(.table.texture, .happy.texture) > *{
    background: var(--white2);
}

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

	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: 80%;
}



body::-webkit-scrollbar-button:single-button{
	height: 1rem;
		background-size: 50%;
}



article.texture > div{
    background: var(--white-texture);
    background-image: url("/background/texture/white.png");
       background-repeat: repeat;
       background-position: 0 0;
       background-size: auto;
    padding-left: 2em!important;
 }