:root{
   --vector-width: 33svw;
   --margin: 3em;
   --selection-bg: var(--pink);
}

#vector, footer, main{
   filter: var(--drop-shadow-low);
}

#vector{
   display: block;
   position: fixed;
      top: 0;
      left: var(--double-gap);
   width: var(--vector-width);
   height: 100svh;
   box-sizing: border-box;
   display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column wrap;
   text-align: center;
}

#vector img{
   max-width: 100%;
   max-height: 90svh;
   margin-bottom: var(--gap);
}

footer{
   text-align: right;
   margin-top: var(--margin);
   margin-right: var(--margin);
}

main{
   width: calc(100% - var(--vector-width) - var(--margin));
   margin-left: calc(var(--margin) + var(--vector-width));
}

h1{
   text-align: center;
   max-width: 25ch;
   margin: 1em auto;
}

h2{
   text-align: center;
}

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

h2::before, h3::before{
   margin-right: 0.25em;
}

h2::after, h3::after{
   margin-left: 0.25em;
}

li{
   margin-bottom: 0.5em;
}

details{
   margin-left: 2em;
}

iframe{
   --size: 25svw;
   width: var(--size);
   height: calc(var(--size) * 0.56);
   border: var(--border-level-2);
   border-style: outset;
   float: right;
   margin: 0 1.5em 0.5em 1em;
}