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

		variables

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

:root{
   --pink: #d28999;
   --purple: hsl(247, 34%, 68%);
	--sticker-shadow-color: 240deg 33% 38%;
	--pink-texture: var(--pink) url("/background/texture/pink7.png");
	--purple-texture: var(--purple) url("/background/texture/purple4.png");
   --scrollbar-thumb: var(--purple-texture);
   --scrollbar-button: url("/assets/pixel/nature/10.gif");

   --size: 70svw;
   --seme-uke-height: var(--double-gap);
}

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

		basic style

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

body{
   background: var(--white-texture);
   text-align: center;
}

a{
   color: var(--purple);
}

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

main{
   width: var(--size);
   margin: 0 auto;
   margin-top: var(--seme-uke-height);
   padding: 0 calc(var(--double-gap) * 2.5);
   box-sizing: border-box;
}

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

		shadows

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

NONE{ /* if i put something on top of the purple texture... */
   filter: 
      drop-shadow(0.3px 0.5px 0.7px hsl(var(--sticker-shadow-color) / 0.21))
      drop-shadow(0.4px 0.8px 1px hsl(var(--sticker-shadow-color) / 0.21))
      drop-shadow(1px 2px 2.5px hsl(var(--sticker-shadow-color) / 0.21))
		drop-shadow(2.1px 4.1px 5.2px hsl(var(--sticker-shadow-color) / 0.25));
}

main >*,
footer, 
.hugme{
   filter: var(--drop-text-shadow);
}

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

	headings for photo sections

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

h2{
   font-size: calc(25svw / 10);
}

main h2:first-child{
   margin-top: 2em;
}

h2 .emoji{
   font-weight: normal;
   font-size: 90%;
}

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

	seme/uke top/bottom deco yahhhh

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

#seme{
   border-bottom: var(--border-level-1);
   border-bottom-style: outset;
}

#uke{
   border-top: var(--border-level-1);
   border-top-style: inset;
}

#seme, #uke{
   height: var(--seme-uke-height);
   border-color: var(--purple);
   background: var(--purple-texture);
      background-image: url("/stickers/cutie/3_autumn/R22_A.png"), url("/background/texture/purple4.png");
      background-size: auto 80%, auto;
      background-position: calc(100% - 1rem) center;
      background-repeat: repeat-x;
}

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

	right side sticker deco

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

.side-by-side{
   position: fixed;
      bottom: calc(var(--seme-uke-height) + var(--half-gap));
   height: calc(90svh - 4 * var(--seme-uke-height));
   max-width: calc(var(--size) / 4);
}

#vector{
   z-index: -9;
   left: var(--double-gap);
}

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

		right side: text box!!!

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

section.side-by-side{
   z-index: 99;
   right: var(--gap);
   max-width: calc(var(--size) / 4 + var(--double-gap));
   height: calc(100svh - 2 * var(--seme-uke-height) - var(--gap));
}

.hugme{
   height: 100%;
   width: calc(100% - 1ch);
   position: relative;
}

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

.hugme p{
   font-size: 0.95em;
}

h1{
   margin: 0;
   line-height: 1.2;
   font-size: calc(25svw / 9);
}

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

		footer

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

footer{
   margin-top: 2em;
   line-height: 1.5;
   margin-bottom: calc(var(--seme-uke-height) * 1.5);
}

footer a{
   font-weight: bold;
   text-decoration: none;
   text-shadow: var(--text-shadow-white);
}

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

	   fun boxes!!!!!!!!

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

main > div{
   display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      justify-content: center;
      gap: var(--half-gap) var(--gap);
   margin-bottom: 1svw;
}

a img{
   width: calc(var(--size) / 7);
   box-shadow: var(--shadow-elevation-low-text);
}

a img:hover{
   transform: scale(1.1);
   box-shadow: var(--shadow-elevation-medium-text);
}

a img, a img:hover{
   transition: transform .3s ease, box-shadow .2s ease;
}