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

		variables

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

:root {
   --shadow-color: 26deg 7% 58%;
}

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

		basic styling

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

body{
   background-image: url("/background/0097.png");
      background-size: 8svw;
      background-position: center;
}

header{
   width: 30svw;
   text-align: center;
   justify-self: flex-end;
   align-items: flex-start;
}

header h1{
   margin-top: 0.5em;
   margin-bottom: 0;
}

header p{
   text-shadow: var(--literal-text-shadow);
   width: 25ch;
   font-size: 0.8em;
}

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

header a:is(:hover, :focus){
   color: var(--blue-link);
}

.hugme, header p{
   background-color: hsla(15, 11%, 93%, 0.1);
	backdrop-filter: blur(0.03svw);
}

.hugme{
   justify-self: flex-start; 
   width: 50ch;
   padding-right: 0.5em;
   box-sizing: border-box;
   margin-top: calc(2 * var(--double-gap)); 
   margin-left: var(--gap); 
   font-size: 0.9em;
   text-shadow: var(--literal-text-shadow);
}

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

.hugme p:last-child{
   margin-bottom: 0;
}

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

main section{
   height: 40%;
   justify-content: flex-start;
   gap: 0 calc(var(--double-gap) * 2);
}

main section:nth-of-type(2){
   margin-top: calc(var(--double-gap) * 2);
   justify-content: flex-end;
   gap: var(--half-gap);
}

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

		items and thinggsszzz

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

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

.canplan{
   height: 150%;
   --transform: translate(10%, 8%) rotate(-10deg);
}

.omedeto{
   height: 160%;
   --transform: translate(2%, 2%) rotate(3deg);
}

.question{
   height: 120%;
   --transform: translate(-5%, 5%) rotate(-2deg);
}

.midori{
   height: 105%;
   --transform: translate(20%, 0%) rotate(-3deg);
}

.bujo_b{
   height: 75%;
   --transform: translate(50%, 55%) rotate(3deg);
}

.bujo_a{
   height: 70%;
   --transform: translate(0, -55%) rotate(-12deg);
}

.leuchtturm{
   height: 105%;
   --transform: translate(0, 28%) rotate(5deg);
}