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

		variables

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

:root{
   --black: #472D2C;
   --black2: #381B19;
   --black2-rgb: 33, 10, 9;
   --grey: #988787;
   --white: #f9f7ee;
   --white2: #FAF9F9;
   --blue: #8f99d9;
   --yellow: #EACB67;
   --green: #8DA253;
   --red: #CD4A41;
   --orange: #DF8C68;
   
	--shadow-color: 3deg 34% 11%;

   --red-texture: var(--red) url("/background/texture/red3.png");
   --orange-texture: var(--orange) url("/background/texture/orange2.png");
   --yellow-texture: var(--yellow) url("/background/texture/yellow3.png");
   --green-texture: var(--green) url("/background/texture/green4.png");

   --header-height: 15svh;
   --sidebar-width: 5svw;
   --vector-width: 30svw;
   --side-width: calc(var(--sidebar-width) + var(--vector-width));
   --main-width: calc(100% - var(--side-width));

	--scrollbar-track: url("../background/00.png");
	--scrollbar-thumb: var(--yellow-texture);
}

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

		basic styling

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

body{
   background-color: var(--black);
   background-image: url("../background/01.png"), url("../background/00.png");
      background-attachment: fixed;
      background-size: 5%, auto;
}

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

		headings

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

h1, h2, h3, h4{
   text-align: center;
}

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

		links

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

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

a:hover{
   color: var(--green);
}

a, a:hover, a:hover::before, a:hover::after{
   transition: color 0.2s linear;
}

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

		images

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

img{
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

img.sticker{
   float: right;
   margin-left: 0.5em;
   width: 33%;
}

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

	borders and shadows

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

main > div, header, body > section > nav a{
   border: var(--border-level-1);
   border-radius: var(--border-radius-level-1);
   border-style: outset;
   /* outline: 0.25svw solid var(--white); */
}

main > div > div, h1{
   border: var(--border-level-2);
   border-radius: var(--border-radius-level-2);
   border-style: inset;
}

main > div > div >*:not(.chart), h1 >*{
   filter: var(--simple-text-shadow);
}

.chart{
   box-shadow: var(--shadow-elevation-medium-text);
   --size: 12em!important;
}

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

		sidebar

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

body > section{
   width: var(--side-width);
   display: grid;
      grid-template-areas: 'nav counter' 'nav vector';
      grid-template-columns: var(--sidebar-width) auto;
      grid-template-rows: auto auto;
      gap: 0.5em;
   position: fixed;
   top: 3svh;
   left: 3svh;
   height: calc(100svh - 2 * 3svh);
}

body > section:not(nav){
   filter: var(--drop-shadow-medium);
}

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

		column of cute food links!!!

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

body > section > nav{
   grid-area: nav;
   width: var(--sidebar-width);
   display: flex;
      flex-flow: column;
      justify-content: space-around;
      align-items: center;
      text-align: center;
   transform: translateX(0.33svw);
   z-index: 9999;
}

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

	the links themselves

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

body > section > nav a{
   width: var(--sidebar-width);
   height: var(--sidebar-width);
   padding: 0.33em;
   display: inline-flex;
      justify-content: center;
      align-items: center;
   border-radius: 100%!important;
   box-shadow: var(--shadow-elevation-medium);
}

a > img{
   filter: 
      drop-shadow(0.3px 0.5px 0.7px hsl(var(--sticker-shadow-color) / 0.25))
      drop-shadow(0.8px 1.6px 1px hsl(var(--sticker-shadow-color) / 0.25));
}

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

	animates link on hover/selection

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

body > section > nav a:hover, body > section > nav a:focus{
   transform: scale(1.1);
   box-shadow: var(--shadow-elevation-high);
}

body > section > nav a, body > section > nav a:hover, body > section > nav a:focus{
   transition: transform 0.2s ease, filter 0.2s ease-out;
}

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

	changes colours of each link

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

body > section > nav a:nth-child(4n+1){
   background: var(--red-texture);
   --sticker-shadow-color: var(--sticker-shadow-red);
   border-color: var(--red);
}

body > section > nav a:nth-child(4n+2){
   background: var(--orange-texture);
   --sticker-shadow-color: var(--sticker-shadow-orange);
   border-color: var(--orange);
}

body > section > nav a:nth-child(4n+3){
   background: var(--yellow-texture);
   --sticker-shadow-color: var(--sticker-shadow-yellow);
   border-color: var(--yellow);
}

body > section > nav a:nth-child(4n){
   background: var(--green-texture);
   --sticker-shadow-color: var(--sticker-shadow-green);
   border-color: var(--green);
}

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

		   counts our days together

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

#counter{
   display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
   text-align: center;
   grid-area: counter;
   font-family: 'DMG Numbers', var(--UT-font);
   font-variant: small-caps;
   font-size: 1.5em;
   text-shadow: 0 0 0.1em var(--black2), 0 0 0.1em var(--black);
   color: var(--white2);
   line-height: 0.5;
}

/*

#counter::before{
   --height: 0.5em;
	content: "";
	display: inline-block;
		height: var(--height);
		width: var(--height);
   background-image: url("/stickers/yummy/orange/G08.png");
      background-position: center bottom;
      background-size: contain;
      background-repeat: no-repeat;
   position: absolute;
      transform: translate(-2.8em, -0.66em) rotate(25deg);
}

*/

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

		IMAGE!!!!!!! AAHHHHH

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

#vector{
   transform: translateY(3svh);
   width: var(--vector-width);
   max-height: 80svh;
   object-fit: contain;
   grid-area: vector;
}

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

		main portion of the page!!!!!!!!!

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

main{
   box-sizing: border-box;
   width: var(--main-width);
   transform: translateX(var(--side-width));
   padding: 1em 2em;
   padding-top: 0;
}

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

	YAY TIME FOR ENTRIES!!!!!

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

main > div{
   padding: 2.5svw;
   margin: 5svh auto;
   box-shadow: var(--shadow-elevation-medium);
}

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

	alternates background image

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

main > div:nth-of-type(odd){
   background-color: var(--yellow);
   background-image: url("../background/02.png");
   border-color: var(--yellow);
}

main > div:nth-of-type(even){
   background-color: var(--green);
   background-image: url("../background/03.png");
   border-color: var(--green);
}

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

	where the actual text goes

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

h2{
   display: flex;
      align-items: center;
      justify-content: center;
   text-align: center;
   margin: 1em auto;
}

main > div > div{
   --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: 
      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
      ;
      background-size: 1em auto;
   padding: 0 3em;
   padding-bottom: calc(var(--back-position) + 1em);
   overflow: auto;
   box-shadow: 0.13em 0.11em 0.36em hsla(22, 32%, 85%, 0.9) inset;
}

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

	background images in the four corners

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


main > div:nth-of-type(odd) > div{
   background-image: url("../background/05.png"), url("../background/06.png"), url("../background/07.png"), url("../background/08.png"), url("./background/texture/white.png");
   border-color: var(--yellow);
}

main > div:nth-of-type(even) > div{
   background-image: url("../background/06.png"), url("../background/05.png"), url("../background/08.png"), url("../background/07.png"), url("./background/texture/white.png");
   border-color: var(--green);
}


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

	in case i start a box without a heading

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

main > div > div > :first-child:not(h2){
   padding-top: calc(var(--back-position) + 1em);
}

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

	entry heading has cute images attached!!!!!!

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

main h2::before, main h2::after{
   --height: 1em;
	content: "";
	display: inline-block;
		height: var(--height);
		width: var(--height);
   background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
   margin: 0 0.5em;
   transform: translateY(0.1em);
}

main > div:nth-of-type(odd) h2::before, main > div:nth-of-type(odd) h2::after{
   background-image: url("/stickers/yummy/orange/E14.png");
}

main > div:nth-of-type(even) h2::before, main > div:nth-of-type(even) h2::after{
   background-image: url("/stickers/yummy/orange/G09.png");
}

main h2::after{
   transform: scaleY(-1) translateY(-0.1em);
}

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

		THE TITLE BOX!!! UNDIARYTALE!!

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

header{
   overflow: auto;
   text-align: center;
   margin: 3svh auto 1.5em auto;
   padding: 2svw;
   background: var(--red-texture);
   border-color: var(--red);
   box-shadow: var(--shadow-elevation-medium);
}

h1{
   display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-evenly;
   background-color: var(--white2);
      background-image: url("../background/09.png"), url("../background/10.png"), url("/background/texture/white.png");
      background-repeat: repeat-y, repeat-y, repeat;
      background-position: 0 center, 100% center, 0 0;
      background-size: auto 36%, auto 36%, auto;
   margin: 0;
   padding: 0.33em 1em;
   font-size: calc(2em - (2 * 0.2em));
   text-shadow: var(--literal-text-shadow);
   border-color: var(--red);
}

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

	there are cute images on this part too

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

h1::before, h1::after{
   --height: 1em;
	content: "";
	display: inline-block;
		height: var(--height);
		width: var(--height);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
   margin: 0 0.5em;
   transform: translateY(0.1em);
}

h1::before{
   background-image: url("/stickers/yummy/yellow/C04.png");
}

h1::after{
   background-image: url("/stickers/yummy/yellow/C04.png");
}

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

		FOOTER! pagination will go here once i have more pages lol

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

footer{
   text-align: center;
   font-family: var(--heading-font);
   color: var(--white2);
   filter: var(--drop-shadow-medium);
}

footer a{
   font-size: 1.12em;
   text-decoration: none;
}

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

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

	left and right arrows

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

footer a:first-of-type::before, footer a:last-of-type::after{
   display: inline-block;
   transform: translateY(0.2em);
   color: var(--white2);
   margin: 0 0.5em;
}

footer a:hover::before, footer a:hover::after{
   color: var(--red);
}

footer a:first-of-type::before{
   content: "\2190";
}

footer a:last-of-type::after{
   content: "\2192";
}