:root{
   --shadow-color: 244deg 78% 42%;

   --black: hsl(253, 19%, 29%);
   --purple2: hsl(237, 32%, 52%);
   --purple-bg: hsl(244, 99%, 66%);

   --blue: hsl(237, 100%, 77%);
   --blue-texture: var(--blue) url("/background/texture/blue9.png");
   --purple: hsl(261, 100%, 75%);
   --purple-texture: var(--purple) url("/background/texture/purple6.png");

   --table-border: var(--blue);
   --diary-stripe: url("/background/m03.png");

   --divider: url("/stickers/cutie/3_autumn/K10_A.png");

   --h2-before: url("/stickers/cutie/4_winter/I14_B.png");
   --h2-after: url("/stickers/cutie/4_winter/I14_B.png");

   --back-arrow: url("/stickers/cutie/2_summer/H21.png");
   --home: url("/stickers/cutie/2_summer/H21.png");
   --next-arrow: url("/stickers/cutie/2_summer/H21.png");

   --scrollbar-thumb: var(--blue-texture);
   --scrollbar-button: url("/assets/pixel/sky/07.gif");
}

body{
   background-color: var(--purple-bg);
   background-image: url("/background/05.png");
}

h2{
   color: var(--purple2);
   text-shadow: var(--text-shadow-white);
}

h2::after{
   transform: translateY(0.25ch) scaleX(-1);
}

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

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

footer{
   color: var(--white);
}

footer a{
   color: var(--black);
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
   text-decoration: none;
}

#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.5);
	background-image: url("/stickers/cutie/4_winter/K30_A.png");
   transform: translate(7.5svw, -4.25svw) rotate(25deg);
}

#icon::after{
   --size: calc(var(--icon-size) * 0.36);
	background-image: url("/stickers/dotty/4_winter/B10_A.png");
   transform: translate(-1.5svw, -6svw) rotate(-8deg);
}

nav{
   gap: calc(var(--gap) * 1.36);
}

nav a{
   background: var(--blue-texture);
   border-color: var(--blue);
   padding-right: 1.25ch;
   text-shadow: var(--text-shadow-white);
}

nav a::before{
   transform: translate(-0.5ch, 0ch) scale(1.3);
   margin-right: 0.25ch;
}

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

/* recolours middle link

nav a:nth-of-type(2){
   background: var(--purple-texture);
   border-color: var(--purple);
}

nav a:nth-of-type(2):is(:hover, :focus){
   color: var(--purple);
}

*/

#bubbles > *{
   height: calc(var(--icon-size) * 0.27 - var(--gap));
   margin-left: calc(var(--gap) * 0.75);
}

.table tr:nth-of-type(1) th::before{
   content: "┐ ";
   /* time symbol */
}