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

	variables

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

:root{
   --shadow-color: 0deg 34% 58%;
   --scrollbar-thumb: var(--red-texture);

   --red: #C80000;
   --purple: #703682;
   --pink: #ed969d;
}

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

	basic styling

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

body{
   background-image: url("/background/12.png");
      background-color: var(--pink-bg);
      background-size: 12%;
}

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

		   links

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

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

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

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

		borders

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

#sidebar, main{
   border-color: var(--red);
}

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

	   sidebar!!!!!!!

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

#sidebar > div:first-child, #sidebar > div:last-child{
   border-color: var(--red);
}

#sidebar > div:first-child{
   background-image: url("/background/gg04.png");
   background-position: 1% top;
}

#sidebar > div:last-child{
   background-image: url("/background/gg05.png");
   background-position: center bottom;
}

#icon img{
   border-color: var(--red);
}

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

	   main content

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

main{
   background-color: var(--white2);
   background: var(--white-texture);
      background-repeat: repeat-y, repeat-y, repeat;
      background-position: top left, top right, 0 0;
      background-size: 1.5em auto, 1.5em auto, auto;
		background-image: 
			url("/background/m06.png"),
			url("/background/m06.png"),
			url("/background/texture/white.png");
   border-color: var(--pink);
}

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

	cute stripe at the top

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

.stripe{
   background-image: url("/background/m04.gif");
}

.stripe:first-child{
   border-radius: var(--border-radius-level-2);
}

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

	   container for the icons

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

h2 + div{
   display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      gap: 0 var(--half-gap);
   width: 60%;
   margin: 1em auto;
}

h2:first-of-type + div{
   width: 70%;
}

h2 + div img{
   width: 8svw;
   filter: var(--drop-text-shadow);
   box-shadow: var(--shadow-elevation-low-text);
}

h2 + div img, h2:last-of-type + a > img{
   border-radius: var(--border-radius-level-2);
}

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

	namesake (wide box)

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

h2:last-of-type + a img{
   height: 15svw;
   margin: 1em auto;
   filter: var(--drop-text-shadow);
}

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

		on hover

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


h2 + div img:hover{
   box-shadow: var(--shadow-elevation-medium-text);
}

h2:last-of-type + a > img:hover{
   filter: var(--drop-text-shadow) var(--drop-text-shadow) var(--drop-text-shadow);
   transform: translate(-2%, -6%) scale(1.05);
}

h2 + div img, h2 + div img:hover, h2:last-of-type + a > img, h2:last-of-type + a > img:hover{
   transition: box-shadow .2s ease-in-out, transform .2s ease-in-out, filter .2s ease-in-out;
}

h2 + div img:hover{
   transform: translate(-3%, -5%) scale(1.05);
}


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

		fancybox pop up gallery thing

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

.fancybox__slide.has-caption {
   flex-direction: row;
}

img.fancybox-image{
   max-height: calc(90svh - 3 * var(--gap));
}

.fancybox__caption {
   max-width: 50ch;
   margin-left: 1em;
   padding: 1rem 3rem 1rem 1rem;
}