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

		variables

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

:root {
   --shadow-color: 208deg 28% 59%;
}

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

		basic styling

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

body{
   background-image: url("/background/35.png");
      background-size: 8svw;
   overflow: hidden;
}

h1, h2, h3, footer{
   text-shadow: var(--text-shadow-white);
   text-align: center;
}

main{
   height: calc(100svh - 3em);
   width: calc(100svw - 2 * var(--gap));
}

main section{
   display: flex;
      justify-content: space-around;
   height: 33%;
}

section img{
   width: 100%;
   height: 100%;
   flex: 1;
   object-fit: contain;
}

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

	shadows

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

a[data-fancybox] img, h1{
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

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

:is(.fancybox a img, a[data-fancybox] img):is(:hover, :focus){
   box-shadow: none;
}

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

		items and thinggsszzz

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

a[data-fancybox] img{
   transform: var(--transform);
}

a[data-fancybox] img:hover, a[data-fancybox] img:focus{
   transform: var(--transform) scale(1.1);
   filter: var(--drop-shadow-medium);
}

a[data-fancybox] img, a[data-fancybox] img:hover, a[data-fancybox] img:focus{
   transition: filter .3s ease, transform .3s ease;
}

.example{
   width: 50%;
   --transform: translate(60%, -25%);
   transform: var(--transform);
}

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

		footer!!!!!!!!!!

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

footer{
   width: 100%;
   font-size: 0.75em;
   font-weight: bold;
   position: fixed;
   line-height: 1.5;
   bottom: 0;
}

footer a{
   color: var(--red-link);
   text-decoration: none;
}

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

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

		fancybox pop up gallery thing

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

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

img.fancybox-image{
   max-height: calc(100svh - var(--double-gap));
}

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