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

		variables

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

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

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

	shadows

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

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

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

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

	basic styling

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

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

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

.table{
   margin-top: 2em;
}

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

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

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

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

h1{
   margin-bottom: 1.1em;
}

h1 cite{
   font-size: 1.1em;
}

h1::before, h1::after{
   --size: 1em;
   content: "";
   display: inline-block;
      transform: translateY(0.25ch);
   width: var(--size);
   height: var(--size);
   margin: 0 0.5ch;
	background-image: url("/stickers/yummy/yellow/M13_A.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

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

	desc box with cute corner images

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

h2 + section{
   margin-top: calc(2 * var(--gap));
}

main h2 + .texture.purple > 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("/stickers/yummy/yellow/C09.png"),
			url("/stickers/yummy/yellow/C08.png"),
			url("/stickers/yummy/yellow/C08.png"),
			url("/stickers/yummy/yellow/C09.png"),
			url("/background/texture/white.png")!important;
}

main .texture.purple > 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("/stickers/yummy/yellow/C08.png"),
      url("/stickers/yummy/yellow/C08.png"),
      url("/background/texture/white.png")!important;
}

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

	pagination links

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

nav{
   justify-content: center;
   font-size: 1.1em;
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
}

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

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

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

		links on hover

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

nav a:is(:hover, :focus){
   color: var(--black);
   transform: translate(-0.2em, -0.2em);
   box-shadow: var(--shadow-elevation-medium);
}

nav a, nav a:is(:hover, :focus){
   transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
}

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

		list styling yayyyy

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

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

li{
   padding-left: 2em;
   background-image: url("/stickers/yummy/orange/E14_A.png");
      background-repeat: no-repeat space;
      background-position: 0 1em;
      background-size: 0.75em;
}

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

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

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

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

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