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

		variables

..........................*/
 
:root{
   --vector: calc(36svw - var(--gap));
}

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

		basic style

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

body{
   background-color: var(--aqua-bg);
   background-image: url("/bg/01.png");
       background-position: center;
       background-size: 12svw;
}

.double-stroke{
   --outer-stroke: var(--black);
}

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

a.texture{
   padding-bottom: 0.33em!important;
}

h2.texture.green{
   background-image: url("/bg/02.png");
   background-size: var(--gap);
}

h2.texture.red{
   background-image: url("/bg/06.png");
   background-size: var(--gap);
}

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

main section:not(:last-child){
   margin-bottom: var(--double-gap);
}

img[alt="(NSFW)"]{
   height: 1.36em;
   transform: translateY(0.33ch);
}

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

	shadows

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

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

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

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

nav{
   filter: var(--drop-shadow-low);
}

#vector{
   filter: saturate(0.88) brightness(1.07) var(--drop-shadow-medium);
}

/* retarded vector margin sizing idkkk */

#vector{
   position: fixed;
      bottom: 0;
      left: 0;
   width: var(--vector);
}

main, footer{
   margin-left: calc(var(--vector) + var(--gap));
   margin-right: var(--gap);
}

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

		headings

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

h1, h2, h3, h4{
   color: var(--blue2);
   --inner-stroke: var(--white2);
}

h1, h3, footer, h2 + section{
   text-align: center;
}

h1{
   margin-bottom: 1em;
   z-index: 2;
   position: relative;

   cite{
      font-size: 1.1em;
   }
}

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("./assets/L07.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

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

   > *{
      width: auto;
      display: inline;
   }
}

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

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

		navigation pagination links

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

nav{
   display: flex;
      flex-flow: row wrap;
      gap: var(--gap);
      justify-content: center;
   margin: calc(1.5 * var(--gap)) auto;
   color: var(--blue2);
   font-size: 1.1em;
   font-weight: bold;
   text-shadow: var(--text-shadow-white);

   a{
      text-align: center;
      width: auto;
      height: fit-content;
      padding: 0 2ch!important;
      margin-top: -0.5ch;
      color: var(--blue2);
      text-decoration: none;
      box-shadow: var(--box-shadow-low);

      img{
         transform: translateY(0.25ch);
      }
   }

   a:is(:hover, :focus){
      color: var(--blue2);
      transform: translateX(calc(-1 * var(--gap)));
   }

   a:last-of-type:is(:hover, :focus){
      transform: translateX(calc(1 * var(--gap)));
   }

   a, a:is(:hover, :focus){
      transition: transform 0.3s ease-in-out;
   }
}

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

	link + header decoration

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

: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.blue, h2.blue, .navi a.blue) > span{
   --sticker-shadow-color: var(--sticker-shadow-blue);
}

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

: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.red, h2.red, .navi a.red) > span{
   --sticker-shadow-color: var(--sticker-shadow-red);
}


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

		footer

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

footer{
   margin-top: var(--gap);
   margin-bottom: var(--gap);
}

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

		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.33ch 1ch 0.5ch 1ch;
}

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

.table th, .table td{
   border-bottom: 0.25ch;
   border-bottom-style: dotted;
   border-bottom-color: var(--grey);
}

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

.table{
   margin-top: 2em;
}

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

	desc box with cute corner images

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

main .texture.blue > 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("./assets/C08.png"),
			url("./assets/C09.png"),
			url("./assets/C09.png"),
			url("./assets/C08.png"),
			url("./bg/texture/white.png")!important;
}

h2 + section{
   margin-top: var(--double-gap);
}

main h2 + .texture.blue > div{
   --back-position: 0.75em;
   background: var(--white-texture);
   background-color: var(--white2)!important;
      background-size: 1.25em!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-image: 
			url("./assets/C09.png"),
			url("./assets/C08.png"),
			url("./assets/C08.png"),
			url("./assets/C09.png"),
			url("./bg/texture/white.png")!important;
}

main .texture.blue > div{
   background-repeat: no-repeat, no-repeat, repeat!important;
   background-position: 
      calc(100% - var(--back-position)) var(--back-position),
      calc(100% - var(--back-position)) calc(100% - var(--back-position)),
      0 0!important;
   background-image: 
      url("./assets/C08.png"),
      url("./assets/C08.png"),
      url("./bg/texture/white.png")!important;
}

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

		list styling yayyyy

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

ul{
   list-style: none;
   padding: 0;
}

li{
   padding-left: 2.22em;
   
   p{
      margin-left: -1.55em;
   }
}

li:not(:last-child){
   margin-bottom: 1.5em;
}

li::first-line{
   font-weight: bold;
   font-size: 1.1em;
}

li::before{
   --size: 1.77em;
   content: "";
   display: inline-block;
   margin-right: -3.5ch;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
	transform: translate(-5ch, 1ch);
}

li:nth-of-type(odd)::before{
   background-image: url("./assets/C09.png");
}

li:nth-of-type(even)::before{
   background-image: url("./assets/C08.png");
}