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

		variables

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

:root{

   /* sizing */

   --main-height: calc(100svh - var(--double-gap));
   --main-width: calc(var(--main-height) * 0.66);
   --nav-width: calc(var(--main-height) * 0.28);
   --shift: calc(var(--nav-width) * 0.81);

   /* colors */

   --shadow-color: 224deg 29% 56%;
	--sticker-shadow-pink: 310deg 32% 45%;
	--sticker-shadow-aqua: 170deg 69% 35%;
	--sticker-shadow-green: 75deg 69% 35%;

   --white: #F1F0F3;
   --black: #7463B5;
   --blue: #CAD5F2;
   --pink: hsl(328, 90%, 72%);
   --pink2: hsl(328, 80%, 52%);
   --lime: #CED896;
   --green: hsl(69, 69%, 60%);
   --aqua: hsl(151, 56%, 68%);
   --red: #D2353E;
	--yellow: hsl(49, 84%, 62%);
   --orange: #E6B88A;

   --aqua-texture: var(--aqua) url("/background/texture/aqua4.png");
   --pink-texture: var(--pink) url("/background/texture/pink4.png");
   --green-texture: var(--green) url("/background/texture/green7.png");
   --red-texture: var(--red) url("/background/texture/red4.png");
}

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

		basic styling

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

body{
   background-color: var(--blue);
      background-image: url("/background/gg09.png"), url("/background/30.png");
      background-size: auto;
      background-attachment: fixed;
   display: flex;
      flex-flow: row-reverse nowrap;
      align-items: flex-start;
      justify-content: center;
   overflow: hidden;
}

nav, main{
   transform: translate(calc(var(--shift) * -0.5), var(--half-gap));
}

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

		links

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

a{
   color: var(--pink2);
   text-decoration: none;
}

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

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

		shadows

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

main, nav a{
   box-shadow: var(--shadow-elevation-medium);
}

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

h1, h1 + div{
   filter: var(--drop-text-shadow);
}

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

/* text shadows on the tabs */

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

nav a:nth-child(1) >*, nav a:nth-child(5) >*{
   --sticker-shadow-color: var(--sticker-shadow-aqua);
}

nav a:nth-child(2) >*{
   --sticker-shadow-color: var(--sticker-shadow-pink);
}

nav a:nth-child(3) >*{
   --sticker-shadow-color: var(--sticker-shadow-yellow);
}

nav a:nth-child(4) >*{
   --sticker-shadow-color: var(--sticker-shadow-green);
}

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

		cute navigation tabs!!!!!

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

nav{
   height: var(--main-height);
   width: var(--nav-width);
   margin-top: calc(var(--main-height) * 0.05);
   display: flex;
      flex-flow: column wrap;
      justify-content: flex-start;
      align-items: stretch;
      gap: var(--gap);
}

nav a{
   display: flex;
      align-items: center;
      justify-content: flex-end;
   text-align: right;
   width: 100%;
   max-height: 2.5em;
   box-sizing: border-box;
   padding: 0.05em 0.5em 0.2em 0em!important;
   background: var(--pink-texture);
   font-weight: bold;
   color: var(--black);
   text-shadow: var(--text-shadow-white);
   border-right: 0!important;
      border-top-right-radius: 0!important;
      border-bottom-right-radius: 0!important;
   transform: translateX(var(--shift));
}

nav a:is(:hover, :focus){
   transform: none;
   color: var(--black);
}

nav a, nav a:is(:hover, :focus){
   transition: transform .25s ease-out;
}

nav a > span{
   display: inline;
   overflow: visible!important;
   background: none!important;
   border: none!important;
   padding: 0!important;
   box-shadow: none!important;
}

/* adds stars before and after */

nav a span::before{
   content: "\2605";
   font-size: 0.75em;
   display: inline-block;
   transform: translate(-0.45em, -0.1em);
}

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

		main text box

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

main{
   height: var(--main-height);
   width: var(--main-width);
   z-index: 99;
}

main.texture >*{
   background-image: url("./assets/note_01.png"), url("./assets/note_02.png");
      background-position: 0 0, 0 100%;
      background-repeat: no-repeat;
      background-size: 102% auto;
   box-shadow: 0.13em 0.11em 0.36em hsla(260, 29%, 29%, 0.242) inset;
   padding: 0!important;
}

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

		   headings

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

h1, h2, h3, p:last-child, h1 + div p{
   text-align: center;
}

h1{
   margin: 0;
   padding-top: 0.5em;
   margin-bottom: calc(var(--main-width) * 0.125);
}

h2{
   font-size: 1.3em;
}

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

	WHERE THE ACTUAL TEXT GOES!!!!

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

h1 + div{
   height: calc(var(--main-width) * 0.51);
   padding: 0 1em;
   box-sizing: border-box;
   margin-right: 0.5em;
}

.hugme::-webkit-scrollbar-thumb{
	background: var(--green-texture);
		border-color: var(--green);
}

p:first-child{
   margin-top: 0;
}

li{
   margin-bottom: 0.75em;
}

li p{
   text-align: left!important;
}

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

		footer

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

footer{
   text-align: right;
   position: fixed;
   font-size: 0.66em;
   bottom: calc(var(--gap) * 0.75);
   right: var(--gap);
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
}