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

	variables

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

:root{ 

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

   --back-arrow: url("/assets/pixel/navi/nav_02.png");
   --home: url("/assets/pixel/navi/nav_01.png");
   --next-arrow: url("/assets/pixel/navi/nav_03.png");

   /* colors */

   --beige: #fff9e8;
   --brown: #A26846;
   --black: #432b19;
   --orange: #F89901;
	--green2: #93b54a;
	--aqua2: #4c91a4;
   --shadow-color: 45deg 31% 60%;
   --brown-texture: var(--brown) url("/background/texture/brown2.png");
   --orange-texture: var(--orange) url("/background/texture/orange4.png");
   --outline-color: var(--beige);

	--icon-border: var(--green2);

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

	--link: var(--aqua);
	--link-hover: var(--orange);

	--table-container-bg: var(--brown-texture);
   --table-container-border: var(--brown);
	--table-bg: var(--aqua-texture);
	--table-bg2: var(--green-texture);
	--table-bg3: var(--yellow-texture);
	--table-bg4: var(--orange-texture);
	--table-cell-border: var(--brown);
	--table-notes-border: var(--aqua2);
   
   --heartbeat: var(--orange); /* beating heart in header */
	--heartcute: var(--black); /* hearts in happiness table */

   --scrollbar-thumb: var(--orange-texture);

}

body{
   background-color: var(--green-bg);
      background-size: auto;
}

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

#icon >*{
   background: var(--orange-texture);
   box-shadow: 0.13em 0.11em 0.36em hsla(37, 87%, 39%, 0.9) inset;
}

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

main > div > div table tr:nth-child(2){
	background: var(--table-bg2);
}

main > div > div table tr:nth-child(3){
	background: var(--table-bg3);
}

main > div > div table tr:nth-child(4){
	background: var(--table-bg4);
}

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

footer{
   text-shadow: var(--text-shadow-custom);
	filter: var(--drop-shadow-low);
}

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

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