@media screen {
  @font-face {
      font-family: "EB Garamond SemiBold";
      src: url("./fonts/EBGaramond-SemiBold.ttf");
  }

  @font-face {
      font-family: "EB Garamond";
      src: url("./fonts/EBGaramond-Medium.ttf");
  }

  @font-face {
      font-family: "Morris Jenson Initialen";
      src: url("./fonts/Morris Jenson Initialen.ttf");
  }
}

@media print {

  .pbi { page-break-inside: avoid; }

  @page {
    size: auto;   /* auto is the initial value */
    margin: 0mm 10mm;  /* this affects the margin in the printer settings */
  }

  html
  {
      background-color: #FFFFFF;
      margin: 0px;  /* this affects the margin on the html before sending to printer */
  }

  body
  {
      border: none;
      margin: 0mm; /* margin you want for the content */
  }
}

* {
    padding: 0px;
    margin: 0px;
}

ul, ol {
  margin-left: 20px;
}

html {
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

#guide a, #guide a:visited, #guide a:focus, #guide a:hover,
#latestrelease a, #latestrelease a:visited, #latestrelease a:hover, #latestrelease a:focus {
  color: #0446bf;
}

body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e92+0,000428+100 */
    background: #004e92; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #004e92 0%, #000428 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #004e92 0%,#000428 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #004e92 0%,#000428 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004e92', endColorstr='#000428',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    min-height: 100%;
    font-family: "EB Garamond", "Source Serif Pro", serif;
}

body .center {
  margin: 0 auto;
  max-width: 1400px;
  min-height: 100%;
  min-height: 100%;
}

aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  align-items: center;
  max-width: 200px;
  padding: 50px;
  float: left;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

body .center main header {
  display: flex;
  flex-direction: row;
}

#latestrelease {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: aliceblue;
  font-size: 1.2em;
  margin: 20px;
  margin-left: 60px;
  border-radius: 10px;
  font-weight: bold;
  line-height: 1.5;
}

img.showcase {
  display: none;
}

img.showcase.windows {
  display: initial;
}

@media screen and (max-width: 720px) {
  aside { position: static; flex-direction: row; }
  body main { padding: 37.5px; clear: both; }
  body .center aside { min-height: 150px; min-width: 100%; padding: 25px; }
  body .center aside header { display: inline-block; width: 75px; height: 75px; padding: 12.5px; }
  body .center aside header img { width: 75px; height: 75px;}
  body .center aside nav { display: inline-block; max-width: 190px; float: right; overflow: hidden; margin: 0px; }
  body .center aside nav ul li { display: inline-block; width: 50px; font-size: 1em; }
  body .center aside nav ul li:nth-child(odd) { float: right; }
  body .center aside nav ul li ul { display: none; }
  body .center main header { flex-direction: column; }
  #latestrelease { margin: 0px; margin-top: 20px; margin-bottom: 20px; }
}

aside header {
  width: 100px;
  height: 100px;
}

aside nav {
  padding: 10px;
  max-width: 230px;
  margin-top: 10px;
}

aside nav ul {
  line-height: 1.5;
  color: white;
}

aside nav ul li {
  background: url("./images/fleur-de-lis.svg") no-repeat 0px 0px transparent;
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 30px;
  vertical-align: middle;
}

aside nav ul li a {
  color: white;
  text-decoration: none;
}
aside nav ul li.active {
  text-decoration: underline;
}
aside nav ul li ul a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
aside nav ul li ul {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  font-size: 1rem;
  font-family: monospace;
  list-style-type: none;
}
main {
  background: white;
  overflow:hidden;
  min-height: 100vh;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.5);
  padding: 50px;
  box-sizing: border-box;
}

@media print {
  main {
    box-shadow: none !important;
  }
}

main h1 {
    margin-bottom: 20px;
}

.flower {
  font-family: "Morris Jenson Initialen", serif;
  letter-spacing: -0.1em;
  font-style: unset;
}

.horizontal-flip {
  display: inline-block;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph; /*IE*/
  filter: fliph; /*IE*/
}

.vertical-flip {
  display: inline-block;
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
  -ms-filter: flipv; /*IE*/
  filter: flipv; /*IE*/
}

/* ------------------------- PRISM.CSS, for code highlighting ----------------------- */

code {
    display: inline-block;
    color: black;
    background: #f5f2f0;
    padding: 0px;
    text-shadow: 0 1px white;
    font-family: monospace;
    font-weight: bolder;
    font-size: 10pt;
    text-align: left;
    vertical-align: middle;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.45;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

    overflow-x: auto;
}

@media print {
    code[class*="language-"] {
        text-shadow: none;
    }
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray;
}

.token.punctuation {
    color: #999;
}

.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a;
    background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a;
}

.token.function,
.token.class-name {
    color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
    color: #e90;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

@media print {
  aside { display: none !important; }
  a[href]:after {
    content: none !important;
  }
}