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

		variables

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

:root {
   --shadow-color: 220deg 13% 9%;
   --black: #292A31;
   --black2: #09090b;
   --green: hsl(143, 30%, 55%);
   --green-texture: var(--green) url("/background/texture/green6.png");
   --scrollbar-track: var(--black-texture);
   --scrollbar-thumb: var(--green-texture);
   --outline-color: var(--black2);
   --summary-hover-one: var(--orange);
   --summary-hover-two: var(--yellow);
}

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

		basic styling

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

body{
   background: url("../assets/grid.png"), url("/background/18.png");
      background-size: auto;
      background-position: center;
      background-color: var(--black);
}

li:nth-of-type(odd) details summary:hover span, li:nth-of-type(odd) details summary:focus span{
   color: var(--summary-hover-one);
}

li:nth-of-type(even) details summary:hover span, li:nth-of-type(even) details summary:focus span{
   color: var(--summary-hover-two);
}

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

		links

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

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

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

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

		footer

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

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

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

	   headings

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

h2:nth-of-type(1):before, h2:nth-of-type(1):after{
   height: calc(1.8 * var(--size));
   width: calc(1.5 * var(--size));
	background-image: url("/assets/pixel/undertale/xmastree.png");
}

h2:nth-of-type(2):before, h2:nth-of-type(2):after{
	background-image: url("/assets/pixel/undertale/dogfood.png");
}

h2:nth-of-type(3):before, h2:nth-of-type(3):after{
   height: calc(1.1 * var(--size));
   width: calc(1.1 * var(--size));
	background-image: url("/assets/pixel/undertale/treadmill.gif");
}

h2:nth-of-type(4):before, h2:nth-of-type(4):after{
   height: calc(1.1 * var(--size));
   width: calc(1.1 * var(--size));
	background-image: url("/assets/pixel/undertale/flat_tv.gif");
}

h2:nth-of-type(5):before, h2:nth-of-type(5):after{
   height: calc(1.1 * var(--size));
   width: calc(1.1 * var(--size));
	background-image: url("/assets/pixel/undertale/computer.png");
}

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

		navigational cards yayayy

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

nav a.texture.black{
   border-style: outset;
   box-shadow: var(--shadow-elevation-medium);
   border-color: var(--white);
   color: var(--white);
   text-shadow: var(--text-shadow-black);
}

nav a.texture.black:hover, nav a.texture.black:focus{
   color: var(--yellow);
   text-shadow: var(--text-shadow-custom);
   box-shadow: var(--shadow-elevation-high);
   border-color: var(--yellow);
}

nav a.texture.black, nav a.texture.black:hover, nav a.texture.black:focus{
   transition: color .15s, text-shadow .15s, border-color .15s,  transform 0.15s, box-shadow 0.2s;
}

nav a:nth-child(even).texture.black:hover, nav a:nth-child(even).texture.black:focus{
   color: var(--orange);
   border-color: var(--orange);
}

nav:nth-of-type(even) a:nth-child(odd).texture.black:hover, nav:nth-of-type(even) a:nth-child(odd).texture.black:focus{
   color: var(--yellow);
   border-color: var(--yellow);
}

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

		   textures

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

.texture.white{
   background: url("/background/texture/white.png");
}

.texture.black >*{
   background: none;
   border: none;
   padding: 0;
   box-shadow: none;
   height: auto!important;
   filter: drop-shadow(0.07em 0.05em 0.03em hsla(0, 0%, 0%, 0.646));
}

ol{
   padding: 0.1em 1em 0.1em 2.5em!important;
}