:root{
   --table-border: var(--orange);
}

body{
   --size: 70svw;
   display: grid;
      grid-auto-flow: column;
      grid-template-areas: 'side heading' 'side main' '. footer';
      grid-template-columns: min-content var(--size);
      gap: var(--gap);
      align-items: start;
   margin: var(--gap);
   margin-bottom: var(--half-gap);
   background-attachment: fixed;
}

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

footer{
   margin-top: var(--gap);
   grid-area: footer;
}

figure{
   text-align: center;
   font-size: 0.8em;
}

figure.fancybox a img{
   width: 100%;
}

div.fancybox a img{
   max-width: 8em;
   box-shadow: none;
}

h1{
   font-size: calc(var(--size) / 10);
   grid-area: heading;
   margin-top: 0;
   margin-bottom: calc(var(--double-gap) + 0.25em);
   text-shadow: var(--text-shadow-white);
}

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

h1::before, h1::after{
   --size: 0.66em;
}

h1::before{
	background-image: var(--h1-before);
	margin-right: 0.5ch;
}

h1::after{
	background-image: var(--h1-after);
	margin-left: 0.5ch;
}

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

		shadows

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

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

#icon, #monthly{
   box-shadow: var(--shadow-elevation-medium);
}

.entry, .table, .moment{
   box-shadow: var(--shadow-elevation-low);
}

footer, #sidebar > nav{
   filter: var(--drop-shadow-low);
}

:is(.hugme, #monthly > div) >*{
   filter: var(--drop-text-shadow);
}

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

		yesss my super cute sidebar

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

#sidebar{
   grid-area: side;
   align-self: start;
   text-align: center;
   height: var(--full-height);
   position: sticky;
      top: var(--gap);
}

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

		icon

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

#icon{
   --mysize: calc((100svw - var(--size)) * 0.55);
   height: var(--mysize);
   width: var(--mysize);
   margin: auto;
}

#icon >*{
   padding: 0!important;
}

#icon img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#icon, #monthly{
   margin-bottom: var(--gap);
}

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

		monthly info box

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

#monthly nav{
   background: none;
   padding: 0;
   box-shadow: none;
   border: none;
   padding-bottom: 0.5em;
   transform: translateY(-0.4em);
   text-align: center;
   display: flex;
      align-items: center;
      justify-content: space-evenly;
}

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

	   buttons

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

#monthly button{
   color: var(--white);
   text-decoration: none;
   font-family: var(--heading-font);
   text-shadow: var(--text-shadow-black);
   font-size: 0.8em;
}

#monthly button.texture{
   --mysize: 3.5ch;
   padding: 0;
   height: var(--mysize);
   width: var(--mysize);
   border-width: 0.25svw;
   display: inline-flex;
      align-items: center;
      justify-content: center;
}

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

	   text box underneath

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

#monthly aside{
   --mysize: calc((100svw - var(--size)) * 0.45);
   height: var(--mysize);
   padding: 0em 1em;
   font-size: 0.9em;
   display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: row wrap;
}

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

	super annoying p elements

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

#monthly p{
   width: 23ch;
}

#monthly p[id]:not([id="starter"]){
   display: none;
   white-space: pre-line;
}

#monthly p[id]:not([id="image"]){
   margin: 0 auto;
}

#monthly p img{
   max-width: 100%;
}

#monthly p[id]:not([id="image"]) img:not(.divider){
   max-height: 1em;
}

#monthly p img.divider{
   margin: 0 auto;
   display: inline-block;
   max-height: 1.5em;
}

#monthly p img.divider:last-child{
   margin-top: 1ch;
}

p#card::first-line, p#song::first-line{
   font-weight: bold;
}

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

	song of the month

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

p#song{
   margin: 0.5em auto;
}

p#song iframe{
   max-width: 100%;
   margin-top: 0.45em;
   height: calc(var(--mysize) - 3.5em);
}

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

	image of the month

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

p#image{
   margin: 1.5ch 0;
   margin-bottom: 1ch;
}
p#image b{
   display: inline-block;   
}

p#image b > img{
   height: auto;
   width: auto;
}

p#image > img{
	max-height: calc(7em - 3ch);
	margin-top: 1ch;
   object-fit: contain;
}

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

	navigate thru months

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

#sidebar > nav{
   display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0 var(--gap);
   transform: translateY(-1ch);
}

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

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

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

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

		diary entries!!!!!!!!!

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

main{
   grid-area: main;
   margin-left: var(--gap);
   margin-right: calc(var(--gap) * 1);
}

main > section{
   --height: calc(var(--full-height) - 1em);
   height: var(--height);
   display: grid;
      grid-template-areas: 'entry moment' 'entry table';
      grid-template-rows: calc(var(--height) * 0.6) 1fr;
      grid-template-columns: 66% 1fr;
   margin-bottom: calc(var(--gap) * 4);
}

main > section:last-of-type{
   margin-bottom: 0;
}

main > section p:last-child{
   margin-bottom: 0;
}

.entry{
   grid-area: entry;
	padding: 1.7em;
}

.entry .hugme{
   padding-right: 1.66em!important;
}

main .hugme p{
   text-indent: 1.75em;
}

main .hugme p.centered, main .hugme li p{
   text-indent: 0;
}

h2{
   text-align: center;
   padding: 0.5em 1em 0.25em 1em!important;
   margin: 0 auto;
   margin-top: 0.33em;
   text-shadow: var(--text-shadow-white);
}

h2::before, h2::after{
   content: "\2605";
}

h2::before{
   margin-right: 0.6ch;
}

h2::after{
   margin-left: 0.5ch;
}

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

		moment/floating text box

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

.moment{
   --x-movement: 3.5em;
   --y-movement: calc(var(--double-gap));
   grid-area: moment;
	padding: 1.33em;
   transform: translate(calc(-1 * var(--x-movement)), calc(-1 * var(--y-movement)));
   width: calc(100% + var(--x-movement));
   height: calc(100% + var(--y-movement));
   font-size: 0.9em;
}

h3{
   margin: 0;
}

h3::before{
	background-image: var(--h3-before);
	margin-right: 1ch;
}

h3::after{
	background-image: var(--h3-after);
	margin-left: 1ch;
}

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

		the tables............. sweats

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

.table{
   grid-area: table;
   text-align: center;
   font-size: 0.8em;
   margin: var(--gap) 0 0 var(--gap);
}

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

.table th{
   width: 8.3ch;
   text-align: left;
   padding: 0.3ch 0.8ch;
   padding-bottom: 0;
   padding-left: 1ch;
   border-right: var(--border-level-3);
   border-right-style: dotted;
   border-right-color: var(--table-border);
}

.table td{
   vertical-align: bottom;
   padding-top: 0.1ch;
}

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

.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: "┗ ";
}

.table tr:nth-of-type(2) th::before{
   content: "┠ ";
}

.table tr:nth-of-type(3) th::before{
   content: "┸ ";
}

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

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

		lists

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

ol, ul{
	max-width: 90%;
	margin: 1em 0;
}

ul{
	list-style: none;
}

li{
	margin-bottom: 1em;
}

ul li::before{
	display: inline-block;
	transform: translateX(-0.5em);
}

ul li:nth-of-type(10n+1)::before{
	content: "\02538";
}

ul li:nth-of-type(10n+2)::before{
	content: "\02520";
}

ul li:nth-of-type(10n+3)::before{
	content: "\02524";
}

ul li:nth-of-type(10n+4)::before{
	content: "\02542";
}

ul li:nth-of-type(10n+5)::before{
	content: "\02528";
}

ul li:nth-of-type(10n+6)::before{
	content: "\2606";
}

ul li:nth-of-type(10n+7)::before{
	content: "\2502";
}

ul li:nth-of-type(10n+8)::before{
	content: "\252F";
}

ul li:nth-of-type(10n+9)::before{
	content: "\2510";
}

ul li:nth-of-type(10n)::before{
	content: "\251B";
}