:root{
   --width: 63svw;
   --padding: var(--half-gap);
}

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

	basic styling

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

body{
   text-align: center;
   background-attachment: fixed!important;
   display: grid;
      grid-auto-flow: column dense;
      grid-template-columns: min-content 1fr min-content;
      grid-template-rows: min-content 1fr min-content;
      grid-template-areas: 'nav1 heading nav2' 'nav1 main nav2' 'nav1 footer nav2';
      gap: 0 var(--padding);
}

h1{
   text-shadow: var(--text-shadow-white);
   grid-area: heading;
   margin: var(--padding) auto 0.66em auto;
}

main{
   margin: 0 var(--gap);
   grid-area: main;
}

main > div{
   padding-right: 3.5em!important;
}

nav{
   position: sticky;
      top: 0;
}

nav:first-of-type{
   grid-area: nav1;
   padding-left: var(--padding);
}

nav:last-of-type{
   grid-area: nav2;
   padding-right: var(--padding);
}

footer{
   grid-area: footer;
   margin-top: var(--padding);
}

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

	      text goes heeeere

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

main ol{
   max-width: 100%;
}

p{
   margin: 1em 0;
}

:is(p,span) > img:not(.sticker){
   max-height: 1.1em;
}

.sticker{
   --margin: 0.5em;
   max-width: 45%;
   margin: var(--margin);
}

.sticker.right{
   float: right;
   margin-right: 0;
}

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

	      shadows

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

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

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

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

nav a >*{
   filter: var(--simple-text-shadow);
}

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

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

	   navigation

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

nav{
   /* position: fixed; */
      top: var(--gap);
   height: calc(100svh - var(--double-gap));
   /* width: calc(var(--width) / 4 - (var(--gap) * 1)); */
   display: flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: space-around;
}

nav a{
   display: flex;
      align-items: center;
      justify-content: center;
   height: 4.5em;
   width: 19ch;
   line-height: 1.25;
   padding: 0.25em 0.1em 0 0.1em!important;
   font-weight: bold;
   color: var(--black);
   text-shadow: var(--text-shadow-white);
   text-decoration: none;
}

nav a.texture.white{
   background: var(--white-texture);
   border-color: var(--white);
}

nav a > div{
   display: contents;
}

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

		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, box-shadow 0.2s;
}

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

		dropdown menu things

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

details summary span{
   font-weight: bold;
}

details summary:hover span, details summary:focus span{
   color: var(--summary-hover);
}

details summary span, details summary:hover span, details summary:focus span{
   transition: color .3s ease;
}

details >*:not(summary){
   padding-right: 2em;
}

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

	headings

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

h2{
   width: auto;
   display: flex;
      align-items: center;
      justify-content: center;
}

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