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

		variables

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

:root{
   --green: hsl(143, 30%, 53%);
   --green-texture: var(--green) url("/background/texture/green6.png");
   --orange: hsl(11, 80%, 59%);
   --orange-texture: var(--orange) url("/background/texture/orange5.png");
   --aqua: hsl(198, 82%, 67%);
   --aqua-texture: var(--aqua) url("/background/texture/aqua3.png");
   --blue: hsl(216, 51%, 54%);
   --blue-texture: var(--blue) url("/background/texture/blue6.png");
   --purple: hsl(210, 45%, 38%);
   --purple-texture: var(--purple) url("/background/texture/blue3.png");
   --black: hsl(231, 16%, 9%);
   --blue2: hsl(209, 45%, 21%);
   --aqua2: hsl(216, 55%, 52%);
   --shadow-color: 210deg 100% 9%;
   --scrollbar-thumb: var(--purple-texture);
   --scrollbar-button: url("/assets/pixel/sky/10.gif");
   /*
   --scrollbar-track: var(--blue-texture);
   --scrollbar-thumb: var(--white-texture);
   */
	--sticker-shadow-orange: 12deg 68% 36%;
	--sticker-shadow-green: 143deg 31% 31%;
	--sticker-shadow-aqua: 198deg 63% 41%;
	--sticker-shadow-blue: 224deg 40% 40%;
}

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

		basic style

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

body{
   background-color: var(--blue2);
   background-image: url("/background/gg07.png"), url("/background/27.png");
      background-size: auto;
}

main > div{
   margin-bottom: calc(var(--gap) * 1.5);
}

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

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

main .texture.purple > div{
   --back-position: 0.75em;
   background: var(--white-texture);
   background-color: var(--white2)!important;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat!important;
      background-position: 
         var(--back-position) var(--back-position),
         calc(100% - var(--back-position)) var(--back-position),
         var(--back-position) calc(100% - var(--back-position)),
         calc(100% - var(--back-position)) calc(100% - var(--back-position)),
         0 0!important;
      background-size: 1.25em!important;
		background-image: 
			url("/stickers/yummy/yellow/C08.png"),
			url("/stickers/yummy/yellow/C09.png"),
			url("/stickers/yummy/yellow/C09.png"),
			url("/stickers/yummy/yellow/C08.png"),
			url("/background/texture/white.png")!important;
}

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

	shadows

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

main > section{
   box-shadow: var(--shadow-elevation-medium);
}

footer{
   filter: var(--drop-shadow-medium);
}

:is(main, header, body > section, body, nav) > :is(h1, h2){
   filter: var(--drop-shadow-medium);
}

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

		headings

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

h1, h2, h3, h4{
   color: var(--blue2);
   text-shadow: var(--text-shadow-white);
}

h1::before, h1::after{
	background-image: url("/stickers/yummy/orange/W04_A.png");
}

h2{
   width: 100%;
   margin-top: 0;
}

h2:not(.texture)::before, h2:not(.texture)::after{
   --size: 0.75em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   margin: 0 0.75ch;
	background-image: url("/stickers/yummy/orange/L07_A.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

h2.texture{
   text-align: center;
   box-sizing: border-box;
   padding: 0.5em 1em 0.75em 1em!important;
   margin: 0 auto;
   margin-top: 0.33em;
   background: var(--blue-texture);
}

.texture > div > h2.texture{
   margin-top: 0.75em;
}

h2.texture::before, h2.texture::after{
   --size: 1.2em;
   content: "";
   display: inline-block;
      transform: translateY(0.25ch);
   margin: 0 1ch;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

h2:is(.blue, .orange)::before, h2:is(.blue, .orange)::after{
	background-image: url("/stickers/yummy/yellow/T07.png");
}

h2.aqua::before, h2.aqua::after{
	background-image: url("/stickers/yummy/yellow/T08.png");
}

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

		navigation

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

nav{
   display: flex;
      flex-flow: row wrap;
   margin: calc(1.5 * var(--gap)) auto;
   gap: var(--gap);
}

nav a{
   width: calc(51% - var(--gap));
}

:is(nav .texture, h2.texture, .navi.texture, button.texture) >*{
   background: none;
   border: none;
   box-shadow: none;
   padding: 0;

}

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

		link decoration

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

nav a.stretch{
   width: calc(100%);
}

:is(nav a, h2.texture, .navi a) > span{
   filter: 
			drop-shadow(0.3px 0.5px 0.7px hsl(var(--sticker-shadow-color) / 0.25))
			drop-shadow(0.8px 1.6px 2px hsl(var(--sticker-shadow-color) / 0.25))
			drop-shadow(0.5px 1.5px 1.5px hsl(var(--sticker-shadow-color) / 0.25))
      ;
}

/* changes text shadow based on bg colour */

:is(nav a.green, h2.green, .navi a.green) > span{
   --sticker-shadow-color: var(--sticker-shadow-green);
}

:is(nav a.yellow, h2.yellow, .navi a.yellow) > span{
   --sticker-shadow-color: var(--sticker-shadow-yellow);
}

:is(nav a.orange, h2.orange, .navi a.orange) > span{
   --sticker-shadow-color: var(--sticker-shadow-orange);
}

:is(nav a.aqua, h2.aqua, .navi a.aqua) > span{
   --sticker-shadow-color: var(--sticker-shadow-aqua);
}

:is(nav a.blue, h2.blue, .navi a.blue) > span{
   --sticker-shadow-color: var(--sticker-shadow-blue);
}

/* adds stars before and after */

nav a.stretch > span::before, nav a.stretch > span::after{
   content: "\2605";
   font-size: 0.75em;
   display: inline-block;
}

nav a.stretch > span::before{
   transform: translate(-1.75ch, -0.1em);
}

nav a.stretch > span::after{
   transform: translate(1.75ch, -0.1em);
}


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

		footer

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

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

footer a{
   color: var(--aqua);
   text-decoration: none;
}

footer a:hover{
   color: var(--yellow);
}

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

		the tables............. sweats

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

.table{
   margin: 1em 0 0 1em;
   /* width: 50%; */
   text-align: left;
   float: right;
   padding: 0.75em;
   transform: translateY(-0.5em);
}

.table table{
   padding: 0!important;
   border-collapse: separate;
}

.table th, .table td{
   padding: 0 1ch;
}

.table th{
   width: 8.3ch;
   text-align: left;
   padding-left: 1ch;
   border-right: var(--border-level-3);
   border-right-style: dotted;
   border-right-color: var(--grey);
}

.table th, .table td{
   border-bottom: var(--border-level-3);
   border-bottom-style: dotted;
   border-bottom-color: var(--grey);
   padding-top: 0.5ch;
}

.table tr:last-of-type th, .table tr:last-of-type td{
   border-bottom: 0;
   padding-top: 0.25ch;
}