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

	variables

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

:root{ 

   /* images */
   
   --icon: ;
   --background: url("/background/25.png");
   --h2-img: url("/assets/pixel/divider/07.gif");

   --back-arrow: url("/assets/pixel/navi/back_01.png");
   --home: url("/assets/pixel/navi/comp.gif");
   --next-arrow: url("/assets/pixel/navi/next_01.png");

   /* colors */

   --shadow-color: 0deg 0% 30%;
   --grey-bg: #AAAAAA;
   --black: #272420;
   --black2: #000000;
   --outline-color: var(--UGH);

	--icon-border: var(--black);
	--bubble-bg: var(--black-texture);

	--selection-bg: var(--yellow);
	--selection-text: var(--black);

	--link: var(--black);
	--link-hover: var(--yellow);

	--table-container-bg: var(--black-texture);
   --table-container-border: var(--black2);
	--table-bg: var(--yellow-texture);
	--table-cell-border: var(--black);
	--table-notes-border: var(--black);
   
   --heartbeat: ; /* beating heart in header */
	--heartcute: ; /* hearts in happiness table */

   --scrollbar-thumb: var(--yellow-texture);
   --scrollbar-track: var(--black-texture);
   --scrollbar-button: url("/assets/pixel/animal/05.png");

}

body{
   background-color: var(--grey-bg);
      background-size: 7%;
      background-position: center left;
}

header nav{
   align-items: center;
}

header nav a{
   min-width: 15%;
}

header > section{
   row-gap: calc(0.75 * var(--gap));
}

main{
   box-shadow: var(--life-saving-box-shadow)!important;
   filter: drop-shadow(var(--drop-shadow-medium));
}

.black.texture{
   color: var(--black)!important;
   border-color: var(--black2)!important;
   border-style: outset!important;
}

.black.texture > div{
   border-color: var(--black2);
   --back-position: 0.75em;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-position: 
      calc(1.5 * var(--back-position)) var(--back-position),
      calc(100% - 1.5 * var(--back-position)) var(--back-position),
      0 0;
      background-size: auto 3em;
}

.black.texture > div:nth-child(odd){
   background-image: 
      url("./assets/tama.png"),
      url("./assets/gameboy.png"),
      url("/background/texture/white.png");
}

.black.texture > div:nth-child(even){
   background-image: 
      url("./assets/gameboy.png"),
      url("./assets/tama.png"),
      url("/background/texture/white.png");
}

main{
   box-shadow: var(--life-saving-box-shadow);
}

main > div > div table:first-of-type th{
   border-right:  0.2svw solid var(--table-cell-border);
}

footer{
	filter: var(--drop-shadow-low);
   color: var(--black2)
}

a[href="#top"]{
   font-weight: bold;
   /* color: var(--black); */
}

h2::after{
   background-image: url("/assets/pixel/divider/08.gif");
   width: 33%;
}