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

	shadows

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

.texture >* >*{
	filter: var(--drop-text-shadow);
}

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

nav a:hover{
   box-shadow: var(--shadow-elevation-high);
}

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

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

	basic styling

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

body{
   display: flex;
      gap: var(--gap);
      flex-flow: row-reverse nowrap;
      justify-content: space-evenly;
   margin-top: calc(1.5 * var(--gap));
   text-align: center;
}

body > section:first-child{
   width: 55svw;
}

p > img, span > img{
   max-height: 1.1em;
}

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

	   main text boxes yeahhh!!!!

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

main{
   margin: var(--gap) auto;
}

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

	   navigation

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

nav{
   text-align: center;
   display: flex;
      justify-content: space-between;
      align-items: center;
   margin-bottom: calc(1.25 * var(--gap));
}

:is(nav, .navi) a{
   padding: 0.5em 0.75em!important;
   box-sizing: border-box;
   color: var(--black);
   font-weight: bold;
   text-shadow: var(--text-shadow-white);
   text-decoration: none;
}

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

		links on hover

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

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

nav a, nav a:is(:hover, :focus){
   transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
}

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

      cute image on the side

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

#vector{
   height: calc(100svh - 2.5 * var(--gap));
   position: sticky;
      top: calc(1.5 * var(--gap));
}

#vector >*{
   padding: 0!important;
}

#vector img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

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

	   footer

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

footer{
   margin: 0.75em auto;
}

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

	main heading

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

h1{
   margin: 0.5em auto;
   margin-top: 0;
}

h1::before, h1::after{
   --size: 1.5em;
   content: "";
   display: inline-block;
   margin: 0 0.5em;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   transform: translateY(0.5em);
}