@import url('https://fonts.googleapis.com/css2?family=Abel&family=Libre+Baskerville:ital@0;1&display=swap');
*
{
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
body
{
  background: #E7E7E7;
  color: #181818;
  display: table;
  min-height: 100vh;
}
header
{
  background: #F8F8F8 url(sidebarbg.png);
  width: 285px;
  min-height: 100vh;
  display: table-cell;
}
header h1
{
  font-family: "Libre Baskerville", serif;
  font-size: 100px;
  font-weight: normal;

  letter-spacing: -8px;

  position: absolute;
  top: 40px;
  left: 40px;
}
header h2
{
  font-family: Abel, sans-serif;
  font-weight: normal;
  font-size: 23px;
  line-height: 27px;

  text-transform: uppercase;

  border-left: 13px solid #4FBE85;

  position: absolute;

  width: 100px;
  top: 150px;
  left: 65px;

  padding: 6px 8px;
  letter-spacing: -1px;
}
header a
{
  color: #181818;
}
nav
{
  font-family: Abel, sans-serif;
  margin-left: 65px;
  padding-top: 330px;
  font-size: 18px;
  margin-bottom: 80px;
}
nav ul
{
  list-style: none;
}
nav ul li a
{
  text-decoration: none;
  color: #181818;
}
nav ul li a small
{
  color: #bbb;
  font-size: 13px;
}
nav h3
{
  font-weight: bold;
  text-transform: uppercase;
  width: 186px;
  margin-top: 30px;
  margin-bottom: 10px;
}
nav .about
{
  border-left: 13px solid #be4f97;
  padding: 0px 8px;
  font-weight: bold;
}
nav h3.available
{
  border-bottom: 3px solid #7ACCC8;
}
nav h3.planned
{
  border-bottom: 3px solid #F68E56;
}
footer {
  font-family: Abel, sans-serif;
  font-size: 11px;

  background: #F8F8F8 url(sidebarbg.png);
  color: #B7B7B7;

  text-transform: uppercase;
  padding-left: 10px;
  border-left: 1px solid #B7B7B7;

  height: 60px;
  position: fixed;
  left: 54px;
  width: 220px;
  bottom: 0;
}
footer p
{
  width: 140px;
}
footer a
{
  text-decoration: none;
  color: #272727;
}
main
{
  position: relative;
  
  display: table-cell;
  vertical-align: top;
  padding: 85px 65px;
  width: calc(100vw - 320px);

  font-family: "Libre Baskerville", serif;
}
main > p a
{
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #bbb;
}
main h2
{
  font-weight: normal;
  font-size: 55px;
  letter-spacing: -3px;
  margin-bottom: 20px;
}
main h3
{
  font-weight: normal;
  font-size: 32px;
  letter-spacing: -2px;
  margin-bottom: 20px;
  margin-top: 30px;
}
main h2 small
{
  text-transform: uppercase;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0px;
  vertical-align: super;
}
main > p
{
  font-style: normal;
  font-size: 16px;
  width: 60%;
  line-height: 1.75em;
  margin-bottom: 20px;
}
main > p.maginfo
{
  font-style: italic;
  font-size: 21px;
  max-width: 800px;
  width: 80%;
  line-height: 1.3em;
  margin-bottom: 20px;
}
#issue-list
{
  list-style: none;
  margin-top: 40px;
}
#issue-list li
{
  background: url("bracket-top.png") top left no-repeat, url("bracket-bottom.png") bottom right no-repeat;
  width: 230px;
  padding: 15px;
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 30px;
}
#issue-list li a
{
  text-decoration: none;
}
#issue-list li figure
{
  font-size: 0;
}
#issue-list li figcaption
{
  background: #B9D0D3;
  color: #123545;
  text-align: right;
  font-weight: bold;
  font-style: italic;
  padding: 3px;
  font-size: 14px;
}
#issue-list li figcaption small
{
  font-family: Abel, sans-serif;
  font-weight: normal;
  font-style: normal;
  display: block;
}
.intropic {
  margin-top: 30px;
}
main h2 .anchor,
main h3 .anchor,
main h4 .anchor {
  text-decoration: none;
  color: #aaa;
  font-size: 50%;
  margin-left: 5px;
  display: none;
  vertical-align: middle;
}
main h2:hover .anchor,
main h3:hover .anchor,
main h4:hover .anchor {
  display: inline-block;
}
main > a#download {
  position: absolute;
  top: 100px;
  left: 680px;
  text-align: right;  
  color: #888;
  font-family: "Abel", sans-serif;
  text-decoration: none;
}

#technical-notes {
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 5px;
  color: #be4f97;
  font-family: "Abel", sans-serif;
}
#note-list li {
  margin-left: 21px;
  font-size: 14px;
}

#modeswitcher {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxkZXNjPkNyZWF0ZWQgd2l0aCBGYWJyaWMuanMgMS43LjIyPC9kZXNjPgo8ZGVmcz4KPC9kZWZzPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjggMTI4KSBzY2FsZSgwLjcyIDAuNzIpIiBzdHlsZT0iIj4KCTxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3NS4wNSAtMTc1LjA1MDAwMDAwMDAwMDA0KSBzY2FsZSgzLjg5IDMuODkpIiA+Cgk8cGF0aCBkPSJNIDQ2LjYwNyA5MCBjIC0xMi40NTIgMCAtMjQuMTU5IC00Ljg0OSAtMzIuOTY0IC0xMy42NTQgYyAtMTguMTc2IC0xOC4xNzcgLTE4LjE3NiAtNDcuNzUyIDAgLTY1LjkyOCBjIDQuNDY5IC00LjQ2OSA5LjY4NyAtNy45MjUgMTUuNTA3IC0xMC4yNzMgYyAwLjgxMyAtMC4zMjcgMS43NDIgLTAuMDg5IDIuMjk1IDAuNTg4IEMgMzIgMS40MSAzMi4wNTEgMi4zNjggMzEuNTcgMy4wOTkgYyAtMTAuMzUgMTUuNzMxIC04LjE4MyAzNi44MyA1LjE1NCA1MC4xNjcgbCAwIDAgYyAxMy4zMzggMTMuMzM2IDM0LjQzNyAxNS41MDMgNTAuMTY2IDUuMTUzIGMgMC43MyAtMC40ODIgMS42OSAtMC40MzEgMi4zNjYgMC4xMjMgYyAwLjY3OCAwLjU1NSAwLjkxNSAxLjQ4NCAwLjU4OCAyLjI5NiBjIC0yLjM0NyA1LjgyIC01LjgwMyAxMS4wMzggLTEwLjI3MiAxNS41MDggQyA3MC43NjYgODUuMTUxIDU5LjA1OSA5MCA0Ni42MDcgOTAgeiBNIDI1LjA2NSA2LjU5NSBjIC0zLjExOCAxLjgyNyAtNS45OTQgNC4wNTEgLTguNTk0IDYuNjUxIGMgLTE2LjYxNiAxNi42MTcgLTE2LjYxNiA0My42NTQgMCA2MC4yNzEgQyAyNC41MjEgODEuNTY3IDM1LjIyMyA4NiA0Ni42MDcgODYgcyAyMi4wODYgLTQuNDMzIDMwLjEzNiAtMTIuNDgyIGMgMi42IC0yLjYwMSA0LjgyNCAtNS40NzcgNi42NTEgLTguNTk1IGMgLTE2LjQ0NyA3LjU4MiAtMzYuMzg0IDQuMjg1IC00OS40OTkgLTguODI5IGwgMCAwIEMgMjAuNzgxIDQyLjk3OSAxNy40ODQgMjMuMDQxIDI1LjA2NSA2LjU5NSB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigwLDAsMCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CjwvZz4KPC9nPgo8L3N2Zz4=");
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: contain;
  position: absolute;
  left: -35px;
  top: 3px;
  filter: opacity(0.25);
}