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

	variables

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

:root{

   /* COPY THESE VARIABLES INTO THE NEW STYLESHEET */

   /* 

   / * images * /
   
   --background: ;
   --h2-img: ;

   --back-arrow: ;
   --home: ;
   --next-arrow: ;

   / * colors * /

	--icon-border: ;
	--bubble-bg: ;

	--selection-bg: ;
	--selection-text: ;

	--link: ;
	--link-hover: ;

	--table-container-bg: ;
   --table-container-border: ;
	--table-bg: ;
	--table-cell-border: ;
	--table-notes-border: ;

   --scrollbar-thumb: ;
   
   --heartbeat: ; / * beating heart in header * /
	--heartcute: ; / * hearts in happiness table * /
   
   */

}

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

		basic styling

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

body{
   background-image: var(--background);
}

header, main{
	width: 66svw;
	max-width: 118svh;
	margin: auto;
	box-sizing: border-box;
}
a{
	color: var(--link);
}

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

blockquote{
	margin-left: 2em;
	padding-left: 1.5em;
	border-left: var(--border-level-3);
	border-left-style: dashed;
}

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

		shadows!!!!

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

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

main{
   box-shadow: var(--shadow-elevation-high);
}

#bubbles >*{
   box-shadow: var(--shadow-elevation-medium);
}

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

header section >:not(h1){
   filter: var(--drop-shadow-low);
}


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

		heading

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

/* holds the whole thing */

header{
	display: flex;
		justify-content: space-evenly;
		align-items: center;
	min-height: 20svw;
	max-height: 22svw;
}

/* holds just the stuff on the left */

header > section{
	text-align: center;
   display: grid;
      grid-template-rows: auto auto auto;
      gap: calc(var(--gap) / 1);
}

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

		month and year

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

h1{
	font-size: calc(70svw / 11);
	margin: 0;
	text-shadow: var(--text-shadow-white);
}

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

		divider image

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

header img.centered{
	max-width: 80%;
}

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

	little white textbox

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

header > section p{
	background: var(--white-texture);
	display: flex;
		align-items: center;
		justify-content: space-around;
	width: 55%;
	margin: 0 auto;
	padding: 0.15em 0.5em;
	padding-top: 0.3em;
	text-align: center;
	text-shadow: var(--literal-text-shadow);
	/* outline: 0.15svw solid var(--black); */
   border: var(--border-level-3);
      border-color: var(--white2);
      border-radius: var(--border-radius-level-1);
		border-style: outset;
}

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

	animates the little hearts!!!

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

.heartbeat{
	color: var(--heartbeat);
	font-size: 0.8em;
	animation: heartbeat 1s ease-in-out infinite alternate;
}

@keyframes heartbeat{
	from{opacity:1}
	to{opacity: 0.4}
}

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

		navigational pixels

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

header nav{
   display: flex;
      justify-content: space-evenly;
      align-items: flex-end;
}

header nav a{
   min-width: 10%;
   max-width: 33%;
}

header nav a{
   object-fit: contain;
}

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

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

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

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

		ICON!!!!!!!!!!!

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

#icon{
	--size: 20svw;
	width: var(--size);
	height: var(--size);
	   padding: calc(var(--size) * 0.066);
	   box-sizing: border-box;
	border-radius: 100%;
   border-style: solid;
	transform: translateY(12%);
}

#icon img{
   padding: calc(var(--size) * 0.02);
	border-radius: 100%;
   width: 100%;
   height: 100%;
   border: calc(var(--size) * 0.015) solid var(--icon-border)!important;
	object-fit: cover;
}

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

	cute hover bubbles ??

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

#bubbles{
	--size: 3svw;
	height: calc(var(--size) * 5.5);
	width: var(--size);
	display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: center;
	position: relative;
		top: 0.5svw;
		left: 0.5svw;
}

#bubbles >*:hover{
	cursor: 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);
	border: var(--border-level-2);
		border-color: var(--white);
	border-radius: 100%;
	background: var(--bubble-bg);
	/* position: relative; */
}

#bubbles img{
	height: calc(var(--size) * 0.6);
}

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

		the big main text box!!!

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

main{
   padding: 3svw!important;
}

main > div:not(:only-child){
	margin-bottom: 3svw;
}

main > div:last-child:not(:only-child){
	margin-bottom: 0!important;
}

main > div p{
	text-indent: 1.4em;
	max-width: 45ch;
	/* padding: 0 0.5em; */
}

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

	   daily date for each entry

..........................*/
h2{
	text-align: center;
}

h2::before, h2::after{
   content: "";
   background-image: var(--h2-img);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
	display: block;
   width: 50%;
   height: 1.5em;
   margin: 0 auto;
}

h2::before{
   background-position: top;
}

h2::after{
   background-position: bottom;
}

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

		lists

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

ol, ul{
	max-width: 80%;
	margin: 1em auto;
}

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";
}

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

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

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

main > div > div{
	--gutter: 0.25em;
	display: flex;
		justify-content: space-between;
	background: var(--table-container-bg);
      border: var(--border-level-2);
      border-radius: var(--border-radius-level-2);
      border-style: outset;
      border-color: var(--table-container-border);
	padding: calc(var(--gutter) * 1.5);
	margin: 1.5em auto 1em auto;
}

main > div > div table{
	font-size: 0.9em;
	width: calc(50% - (var(--gutter) / 2));
	background: var(--table-bg);
	border-collapse: collapse;
}

th, tr{
   filter: var(--simple-text-shadow);
	padding: 0.25em;
}

td{
   text-shadow: var(--literal-text-shadow);
}

main > div > div table td{
	background: var(--white-texture);
	font-size: 0.88em;
	line-height: 1.5;
}

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

	curving the borders

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

main > div > div table:first-of-type{
	border-radius: var(--border-radius-level-3);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

main > div > div table:last-of-type{
	border-radius: var(--border-radius-level-3);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
}

main > div > div table:last-of-type td{
   border-bottom-right-radius: var(--border-radius-level-3);
}

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

	left table w data

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

main > div > div table:first-of-type td{
	padding-left: 0.44em;
	padding-right: 0.15em;
	border-bottom: 0.2svw solid var(--table-cell-border);
	width: 75%;
}

main > div > div table:first-of-type tr:last-child td{
	border-bottom: 0;
}

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

	right table w happiness

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

main > div > div table:last-of-type{
	text-align: center;
}

main > div > div table:last-of-type{
	text-align: center;
}

main > div > div table:last-of-type th{
	color: var(--table);
}

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

	adds hearts around "my happiness"

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

main > div > div table:last-of-type th::before, main > div > div table:last-of-type th::after{
	content: "\2665";
	display: inline-block;
   font-size: 0.7em;
	color: var(--heartcute);
	margin: 0 0.5em;
	transform: translateY(-0.1em);
}

main > div > div table:last-of-type td{
	border-top: 0.2svw solid var(--table-notes-border);
	padding: 0.25em 0.33em;
}

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

		footer

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

footer{
	margin: var(--gap) auto;
	filter: var(--drop-shadow-medium);
}