:root{
  --shadow-color: 206deg 41% 46%;

  --black: hsl(262, 8%, 26%);
  
    --blue: hsl(211, 67%, 59%);
    --blue-texture: var(--blue) url("/background/texture/blue11.png");

    --h2-before: url("/stickers/yummy/yellow/J06.png");
    --h2-after: url("/stickers/yummy/yellow/J06.png");

    --back-arrow: url("/stickers/yummy/yellow/M11.png");
    --home: url("/stickers/yummy/yellow/M10.png");
    --next-arrow: url("/stickers/yummy/yellow/M08.png");

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

    --bubble-bg2: var(--green-texture);
    --bubble-border2: var(--green);

    --bubble-bg3: var(--yellow-texture);
    --bubble-border3: var(--yellow);

    --bubble-bg4: var(--red-texture);
    --bubble-border4: var(--red);
}

body{    
   background-image: url("/background/gg02.png"), url("/background/52.png");
    background-size: 15svw auto, 5svw;
    background-repeat: round, repeat;
    background-position: center, center -3.5svh;
}

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

h1::after{
    display: none;
 }

#icon > *{
    background: var(--blue-texture)!important;
    background-image: url("./assets/bg02.png"),  url("/background/texture/green.png")!important;
    box-shadow: 0.13em 0.11em 0.36em hsla(99, 60%, 33%, 0.5) inset;
}

#icon::before, #icon::after{
   content: "";
   display: block;
      position: absolute;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

#icon::before{
   --size: calc(var(--icon-size) * 0.29);
	background-image: url("/stickers/yummy/yellow/I02.png");
   transform: translate(11svw, -1.5svw) rotate(-10deg);
}

#icon::after{
   --size: calc(var(--icon-size) * 0.4);
	background-image: url("/stickers/yummy/yellow/H04.png");
   transform: translate(-1svw, -5.5svw) rotate(0deg);
}

nav a{
    text-shadow: var(--text-shadow-white);
}

nav a:nth-last-child(1){
    background: var(--bubble-bg4);
    border-color: var(--bubble-border4);
}

nav a:nth-last-child(2){
    background: var(--bubble-bg3);
    border-color: var(--bubble-border3);
}

nav a:nth-last-child(3){
    background: var(--bubble-bg2);
    border-color: var(--bubble-border2);
}

nav a::before{
    --size: 1.55em;
    transform: translate(0ch, 0ch) scale(0.7);
 }

article.texture > div{
	padding-left: calc(0.5em + var(--back-position) + var(--back-size))!important;
}

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

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

#bubbles >*:nth-last-child(2){
	background: var(--bubble-bg2);
	border-color: var(--bubble-border2);
}

#bubbles >*:nth-last-child(3){
	background: var(--bubble-bg3);
	border-color: var(--bubble-border3);
}

#bubbles >*:nth-last-child(4){
	background: var(--bubble-bg4);
	border-color: var(--bubble-border4);
}