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

		variables

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

:root{
   --article-width: 60svw;
   --nav-width: 25svw;

   --table-border: var(--green);
   --tarot-border: var(--orange);

   --h1-before: url("/stickers/dotty/1_spring/I06.png");
   --h1-after: url("/stickers/dotty/1_spring/I06.png");

   --h2-before: url("/stickers/dotty/1_spring/H11.png");
   --h2-after: url("/stickers/dotty/1_spring/H11.png");

   --h3-before: url("/stickers/dotty/1_spring/I15.png");
   --h3-after: url("/stickers/dotty/1_spring/I15.png");
   
   --begin-before: url("/stickers/dotty/2_summer/J11.png");
   --begin-after: url("/stickers/dotty/2_summer/J11.png");
   
   --end-before: url("/stickers/dotty/2_summer/J11.png");
   --end-after: url("/stickers/dotty/2_summer/J11.png");

   --nav-before: url("/stickers/dotty/1_spring/G22.png");
   --nav-after: url("/stickers/dotty/1_spring/G22.png");

   --scrollbar-thumb: var(--blue-texture);
   --scrollbar-button: url("/assets/pixel/nature/02.gif");

   --back-arrow: url("/assets/pixel/navi/a03.gif");
   --home: url("/stickers/dotty/3_autumn/C07.png");
   --next-arrow: url("/assets/pixel/navi/a04.gif");
}

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

		shadow shadows!!!

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

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

nav, 
article{
   box-shadow: var(--shadow-elevation-medium)
}

article{
   box-shadow: var(--shadow-elevation-high)
}

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

.texture > div > *,
.table > table > *,
h2, h3{
   filter: var(--drop-text-shadow);
}

.icon{
   filter: var(--text-drop-shadow)!important;
}

.table{
   box-shadow: var(--life-saving-box-shadow-low);
}

#paginate{
   filter: var(--life-saving-drop-shadow);
}

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

		basic styling

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

body{
   display: grid;
      grid-template-areas:
         'nav header'
         'nav main'
         '. footer';
      grid-template-rows: min-content 1fr min-content;
      grid-auto-flow: column;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--gap) 0;
   padding: 0 var(--double-gap);
   text-align: center;
}

p, blockquote, figcaption{
   max-width: 54ch;
}

ol, ul, li{
   max-width: 51ch;
}

:is(h1, h2, h3)::before,
:is(h1, h2, h3)::after{
   --size: 1em;
   content: "";
   display: inline-block;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

:is(h1, h2, h3)::before{
	margin-right: 0.5ch;
}

:is(h1, h2, h3)::after{
	margin-left: 0.5ch;
}

.wrapper, #paginate{
   position: absolute;
	padding: 0!important;
   background: none;
   box-shadow: none;
   border: 0;
   overflow: visible;
}

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

		header

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

header{
   grid-area: header;
}

h1{
   font-size: calc(100svw / 4 / 4);
   margin: 0.15em auto;
   margin-bottom: 0.4em;
   text-shadow: var(--text-shadow-white);
}

h1::before, h1::after{
   --size: 1em;
   transform: translateY(0.2ch);
}

h1::before{
	background-image: var(--h1-before);
}

h1::after{
	background-image: var(--h1-after);
}

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

		navigation

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

nav{
   grid-area: nav;
   align-self: start;
   position: sticky;
      top: var(--gap);
   height: var(--full-height);
   width: var(--nav-width);
   padding: 1.25em!important;
}

nav > div{
   padding: 0!important;
   padding-top: 1em!important;
}

/* nav heading */

nav h2{
   font-size: calc(25svw / 8.5);
   margin-bottom: 0.5em;
}

nav h2::before, nav h2::after{
   --size: 1.7svw;
   transform: translateY(-0.2ch);
}

nav h2::before{
	background-image: var(--nav-before);
}

nav h2::after{
	background-image: var(--nav-after);
}

nav .divider{
   max-height: 1.25em;
}

/* the links themselves!!! */

nav a{
   display: block;
   text-decoration: none;
   font-variant: small-caps;
   font-size: 1.1em;
}

nav .hugme a:hover,
nav .hugme a:focus{
   font-weight: bold;
}

nav .hugme{
   height: calc(55% + 0.75em);
   padding-left: 2ch;
   overflow-y: scroll;
   margin: 0 1ch;
   text-align: left;
}

nav .hugme a:not(:last-of-type){
   margin-bottom: 0.5em;
}

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

	navigate thru months

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

#paginate{
   width: var(--nav-width);
   height: 8svw;
   display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0 var(--gap);
   transform: translate(-1.4em, calc(-2 * var(--double-gap)));
}

#paginate a{
   max-height: 100%;
}

#paginate a:not(#return){
   transform: translateY(-0.75ch);
}

a#past{
   content: var(--back-arrow);
}

a#return{
   content: var(--home);
}

a#future{
   content: var(--next-arrow);
}

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

		entries

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

main{
   grid-area: main;
   width: var(--article-width);
   margin-right: calc(var(--gap) + var(--half-gap));
}

main > :is(article, section){
   margin-left: var(--gap);
}

main > .texture,
main article.texture{
   padding: 1.75em;
}

main > :is(article, section):not(:last-child){
   margin-bottom: calc(var(--double-gap) + var(--gap));
}

main > :is(article, section):last-child{
   margin-bottom: var(--gap);
}

/* headings 2 */

h2{
   margin: 0.25em auto;
   margin-top: 0.1em;
   font-size: 2.5em;
}

h2::before, h2::after{
   transform: translateY(0.2ch);
}

h2::before{
	background-image: var(--h2-before);
}

h2::after{
	background-image: var(--h2-after);
}

h2 .day{
   font-variant: small-caps;
   font-size: 0.8em;
   display: inline-block;
   padding: 0 0.1ch;
}

h2 .day::before{
   content: "(";
}

h2 .day::after{
   content: ")";
}

:is(#begin, #end) h2{
   width: min-content;
   display: flex;
      align-items: center;
      justify-content: center;
}

:is(#begin, #end) h2 span{
   display: inline-block;
   width: min-content;
}

/* headings 3 */

h3{
   font-size: 1.8em;
   margin: 0.75em auto;
}

h3::before, h3::after{
   --size: 0.7em;
}

h3::before{
	background-image: var(--h3-before);
}

h3::after{
	background-image: var(--h3-after);
}

/* layout of entry */

article{
   --height: 20svw;
}

.wrapper + article h2{
   margin-top: calc(var(--height) - 0.3em);
}

.wrapper{
   display: grid;
      grid-template-areas: 'icon table';
      grid-template-columns: 1fr 70%;
      gap: var(--double-gap);
   /* width: max-content; */
   width: calc(var(--article-width) - 10svw);
   height: var(--height);
   margin-left: 5svw;
   margin-top: 3svw;
   transform: translate(2.5svw, -1svw);
}

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

		   icon

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

.icon{
   object-fit: contain;
   grid-area: icon;
   align-self: end;
   width: 100%;
   max-height: 35svw;
   transform: scale(1.25) translateY(-1.25ch);
}

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

		table/daily stats

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

.table{
   padding: 1.15em!important;
   grid-area: table;
   transform: rotate(-0.75deg);
   height: 20svw;
}

.table table{
   padding: 0!important;
   border-collapse: separate;
}

.table th{
   text-align:left;
   font-size: 0.95em;
   width: 9.25ch;
   padding-left: 1.25ch;
   border-right: var(--border-level-3);
   border-right-style: dotted;
   border-right-color: var(--table-border);
}

.table td{
   text-align: left;
   font-size: 0.9em;
   padding-left: 1.5ch;
}

.table th, .table td{
   border-bottom: var(--border-level-3);
   border-bottom-style: dotted;
   border-bottom-color: var(--table-border);
   padding-top: 0.3ch;
}

.table tr:last-of-type th, .table tr:last-of-type td{
   border-bottom: 0;
   padding-bottom: 0;
}

.table tr:nth-of-type(1) th::before{
   content: "┠ ";
   /* time symbol */
}

.table tr:nth-of-type(2) th::before{
   content: "★ ";
   /* card symbol */
}

.table tr:nth-of-type(3) th::before{
   content: "│ ";
   /* mood symbol */
}

.table tr:nth-of-type(4) th::before{
   content: "♪ ";
   /* music symbol */
}

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

      monthly stuffs

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

#begin > div > div{
   margin: 1em auto;
   display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--gap);
}

/* heading images */

#begin h2::before{
	background-image: var(--begin-before);
}

#begin h2::after{
	background-image: var(--begin-after);
}

#end h2::before{
	background-image: var(--end-before);
}

#end h2::after{
	background-image: var(--end-after);
}

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

	tarot spread gallery

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

.tarot a img{
   height: 45svh;
   width: auto;
   border: var(--border-level-3);
   border-color: var(--tarot-border);
}

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

	fancybox pop up gallery thing

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

.fancybox__slide.has-caption {
   flex-direction: row;
}

img.fancybox-image{
   max-height: calc(80svh);
}

.fancybox__caption {
   max-width: 50ch;
   margin-left: 2em;
   padding: 1rem 3rem 1rem 1rem;
}

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

		footer

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

footer{
   grid-area: footer;
   width: 100%;
   margin-bottom: 1em;
}

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

		variables

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

:root{
   --shadow-color: 0deg 23% 59%;

   --red: hsl(353, 65%, 67%);
   --green2: hsl(79, 70%, 41%);

   --table-border: var(--green);
   --tarot-border: var(--red);

   --h1-before: url("/stickers/dotty/1_spring/I06.png");
   --h1-after: url("/stickers/dotty/1_spring/I06.png");

   --h2-before: url("/stickers/dotty/2_summer/J11.png");
   --h2-after: url("/stickers/dotty/2_summer/J11.png");

   --h3-before: url("/stickers/dotty/1_spring/F26.png");
   --h3-after: url("/stickers/dotty/1_spring/F26.png");

   --h3-before-2: url("/stickers/dotty/1_spring/B09.png");
   --h3-after-2: url("/stickers/dotty/1_spring/B09.png");
   
   --begin-before: url("/stickers/dotty/1_spring/F10.png");
   --begin-after: url("/stickers/dotty/1_spring/E05.png");
   
   --end-before: url("/stickers/dotty/1_spring/H11.png");
   --end-after: url("/stickers/dotty/1_spring/H11.png");

   --nav-before: url("/stickers/dotty/1_spring/F26.png");
   --nav-after: url("/stickers/dotty/1_spring/F26.png");

   --scrollbar-thumb: var(--red-texture);
   --scrollbar-button: url("/assets/pixel/nature/02.gif");

   --back-arrow: url("/assets/pixel/navi/a03.gif");
   --home: url("/stickers/dotty/3_autumn/C07.png");
   --next-arrow: url("/assets/pixel/navi/a04.gif");
}

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

		basic styling

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

body{
   background-color: var(--pink-bg);
   background-image: url("/background/46.gif");
      background-size: 9svw;
      background-position: center top;
      background-repeat: round;
}

a,
nav .hugme a:nth-of-type(odd){
   color: var(--green2);
}

a:hover,
a:focus,
nav .hugme a:nth-of-type(even){
   color: var(--red);
}

nav .hugme a:hover,
nav .hugme a:focus{
   color: var(--black);
}

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

	adding texture bgs

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

nav.texture.red{
   background-image: url("/background/47.png");
   background-position: right;
}

main .texture.red{
   background-image: url("/background/06_a.png");
   background-size: 1.5svw;
   background-position: 1ch;
}

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

		heading images

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

h2::after{
   transform: translateY(0.2ch) scaleX(-1);
}

h3:nth-of-type(even):before{
	background-image: var(--h3-before-2);
}

h3:nth-of-type(even):after{
	background-image: var(--h3-after-2);
}

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

	begin/end entries

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

:is(#begin, #end) > 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: 1.5em;
		background-image: 
			url("/stickers/dotty/1_spring/F26.png"),
			url("/stickers/dotty/1_spring/F26.png"),
			url("/stickers/dotty/1_spring/F16.png"),
			url("/stickers/dotty/1_spring/F16.png"),
			url("/background/texture/white.png");
}

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

		headings

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

:is(#begin, #end) h2::before,
:is(#begin, #end) h2::after{
   --size: 1.5em
}

#begin h2::before{
   --size: 1.8em
}

#begin h2::after{
   --size: 2em
}

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

		footer

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

footer{
   text-shadow: var(--text-shadow-white);
   font-weight: bold;
   color: var(--red);
}

footer a{
   text-decoration: none;
}