body {
  background: #fff;
  font-family:"Instrument Serif";
  color: black;
  margin:0;
}

@font-face { font-family: "grotesque"; src: url("/grotesque.ttf") format("opentype"); }

.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}


a { color:black; text-decoration: underline dotted #000; padding:0.4em; transition: letter-spacing 0.3s ease-in-out; }
a:visited { color:blue; }
a:hover {letter-spacing: 1px;}


.container { 
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size:0.9em;
  border-bottom:1px solid #000;
  margin: 0;
}

.left { 
  width:20%;
  border-right:1px solid #000;
  }
  
middle { 
  width: 60%;
  }

.right {  
  width:20%;
  border-left:1px solid #000;
  overflow:scroll;
} 



.middletext {
    padding:1em;
    font-size:1.3em;
}

.title {
  background: rgb(238,174,202);
    background: linear-gradient(90deg, rgba(238,174,202,0.6) 3%, rgba(250,255,209,0.6825323879551821) 50%, rgba(91,181,237,0.49205619747899154) 100%);
   text-align:left;
}

.banner {
  font-family:'Jacquard 12';
  font-size:2em;
}
  
figure {
  display: table;
}
  
figcaption {
  padding: 0;
  background:blue;
  border: 3px double blue;
  color:#fff;
  width:min-content;
  display: table-caption;
  caption-side: top;
  margin-left:0.7em;
  font-size:0.7em;
  font-weight:100;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAQpJREFUWEftmFEOhCAMRPX+h3YTI8lKtDOFUlqDnwbhMdNa6L4lefYknNs/6HFB1/Dlfb2n1k2y8914UoIWxeodI+XenKgdQOPEdZ8gPgtaO/EW46wzZb7beAtF3UFR1iNFrGO8OevDg86qCWpFFyhQIL+i6DczKwTOdaX/KJvlLhuQYFBtHgX4uO4nQL1jVnSQiUOvEAgPSgkRQdFuUGoCg9Sn1omQ9c2g1IcGSqruVJEqU3fWDxBPnFJdmbwBxQLDNCBCAC9QAxvyn/B77/XaVhA6nakVZQuAG+jQTgcRs9O6eawTlEA9TTIWRDvOvJunBUBnX9p6lPWrh38pIDaAkR1EsvoMSQP6A8U9bCtC7nFtAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

ul.menu {
  counter-reset: menu;
  padding-left:5;
  margin:0;
}

ul.menu > li {
  counter-increment: menu;
  --delay: calc(sibling-index() / sibling-count() * 1s);
  animation: 1s var(--delay) both fly-in;
}

ul.menu > li::marker {
  content: "+ "counter(menu, decimal)" " ;
  animation: 2s var(--delay) both fly-in;
}

@keyframes fly-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}