:root{
   --icon-size: calc(2em * 6);
   --everything: 70svw;

   --h2-before: url("/stickers/dotty/3_autumn/D15.png");
   --h2-after: url("/stickers/dotty/3_autumn/D15.png");

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

   --bubble-bg: var(--aqua-texture);
   --bubble-border: var(--aqua);

   --diary-stripe: url("./assets/bg03.png");

   --back-arrow: url("/stickers/dotty/3_autumn/D15.png");
   --home: url("/stickers/dotty/3_autumn/D15.png");
   --next-arrow: url("/stickers/dotty/3_autumn/D15.png");
}

body{
   margin: var(--gap) auto;
   background-attachment: fixed;
}

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

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

		shadows!!!!

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

article, #icon, nav a{
   box-shadow: var(--shadow-elevation-medium);
}

#bubbles >*{
   filter: var(--drop-shadow-medium);
}

#bubbles >*:is(:hover, :focus){
   filter: var(--drop-shadow-medium);
}

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

nav a{
   text-shadow: var(--literal-text-shadow);
}

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

		heading

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

header, main{
   margin-bottom: var(--double-gap);
}

header{
   display: grid;
      grid-template-areas: 'title icon bubbles' 'nav icon bubbles';
      gap: var(--gap);
      align-items: center;
      justify-content: center;
   text-align: center;
}

h1{
   grid-area: title;
   align-self: baseline;
   margin: 0 auto;
   font-size: calc(var(--everything) / 10);
   text-shadow: var(--text-shadow-white);
}

h1::after{
   --size: 0.5em;
   content: "";
   display: block;
      margin: 0 auto;
      margin-top: 0.25em;
   width: calc(var(--everything) / 2);
   height: var(--size);
   background-image: var(--divider);
   background-size: contain;
      background-repeat: space no-repeat;
      background-position: center;
}

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

	icon :+D :+D :+D

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

#icon{
   grid-area: icon;
   height: var(--icon-size);
   width: var(--icon-size);
   margin-left: var(--gap);
}

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

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

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

	cute hover bubbles ??

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

#bubbles{
	--size: 3svw;
   grid-area: bubbles;
	display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: center;
      gap: var(--gap) 0;
   margin-left: var(--half-gap);
}

#bubbles >*:hover{
	cursor: url("/assets/web/cursor_2.ico") 2 5, pointer;
	transform: scale(1.15);
}

#bubbles >*, #bubbles >*:hover{
	transition: transform .2s ease;
}

#bubbles >*{
	display: flex;
		align-items: center;
		justify-content: center;
	width: var(--size);
	height: var(--size);
}

#bubbles img{
   max-height: 100%;
}

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

	navigate thru months

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

nav{
   grid-area: nav;
   display: flex;
   align-items: flex-end;
   justify-content: center;
      gap: var(--gap);
}

nav a{
   display: block;
   background: var(--yellow-texture);
   border: var(--border-level-2);
      border-color: var(--yellow);
      border-style: outset;
      border-radius: var(--border-radius-level-1);
   padding-right: 1ch;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--black);
   font-weight: bold;
   font-family: var(--heading-font);
   font-size: 1.25em;
}

nav a::before{
   --size: 1.55em;
   content: "";
   display: inline-block;
      position: relative;
      transform: translate(-0.5ch, 0.15ch);
   width: var(--size);
   height: var(--size);
   background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   vertical-align: middle;
}

a#past::before{
   background-image: var(--back-arrow);
}

a#return::before{
   background-image: var(--home);
}

a#future::before{
   background-image: var(--next-arrow);
}

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

		main portion / articles / entries

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

main{
   width: var(--everything);
   margin: 0 auto;
}

article.texture{
   padding: 2em;
   overflow: auto;
}

article.texture > div{
   --back-position: 0.75em;
	--back-size: 2em;
	padding-left: calc(0em + var(--back-position) + var(--back-size))!important;
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: repeat-y, repeat;
      background-position: 
      var(--back-position) center,
      0 0;
      background-size: var(--back-size), auto;
   background-image: 
      var(--diary-stripe),
      url("/background/texture/white.png");
}

article:not(:last-child){
   margin-bottom: var(--double-gap);
}

article > div > p{
   text-indent: 1.33em;
}

article :is(ul, ol){
   margin: 1em;
}

article > div > div:first-child{
   float: right;
   clear: both;
   min-width: 50%;
   width: fit-content;
   max-width: 60%;
   margin-left: calc(var(--gap) * 1.5);
   position: relative;
   z-index: 99;
}

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

	entry date title yayay

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

h2{
   font-size: 2.25em;
   text-align: center;
   margin: 0.25em auto 0.5em auto;
}

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

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

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

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

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

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

.table{
   grid-area: table;
   width: 100%;
   margin: var(--gap) auto;
   font-size: 0.85em;
}

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

.table th{
   width: 8.5ch;
   padding: 0.25ch 0.8ch;
   padding-top: 0.75ch;
   padding-right: 1.33ch;
   border-right: var(--border-level-3);
   border-right-style: dotted;
   border-right-color: var(--table-border);
}

.table td{
   vertical-align: bottom;
   padding: 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: "┠ ";
   /* 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 */
}

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

	happiness box at the bottom

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

.happy{
   width: 75%;
   margin: 2em auto;
   text-align: center;
}

.happy h3{
   padding: 0!important;
   background: none!important;
   border: none!important;
   box-shadow: none!important;
   margin: 0 auto;
   margin-top: -0.5em;
   text-shadow: var(--literal-text-shadow);
}

.happy > *{
   padding: 0 1em;
}

.happy p{
   font-size: 0.85em;
}