/*--- GENERAL ------------------------------------------------*/

/*font families*/

/*Bitter*/

  @font-face {
    font-family: Bitter;
    src: url(/storage/web/fonts/Bitter-Regular.ttf);
  }

  @font-face {
    font-family: Bitter;
    src: url(/storage/web/fonts/Bitter-Italic.ttf);
    font-style: italic;
  }

  @font-face {
    font-family: Bitter;
    src: url(/storage/web/fonts/Bitter-Bold.ttf);
    font-weight: bold;
  }

/*DejaVuSansMono*/

  @font-face {
    font-family: DejaVuSansMono;
    src: url(/storage/web/fonts/DejaVuSansMono.ttf);
  }

  @font-face {
    font-family: DejaVuSansMono;
    src: url(/storage/web/fonts/DejaVuSansMono-Bold.ttf);
    font-weight: bold;
  }

  /*Hack*/

  @font-face {
    font-family: Hack;
    src: url(/storage/web/fonts/Hack-Regular.ttf);
  }

  @font-face {
    font-family: Hack;
    src: url(/storage/web/fonts/Hack-Italic.ttf);
    font-style: italic;
  }

  @font-face {
    font-family: Hack;
    src: url(/storage/web/fonts/Hack-Bold.ttf);
    font-weight: bold;
  }

  @font-face {
    font-family: Hack;
    src: url(/storage/web/fonts/Hack-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
  }

/* basic elements */

  body {
    font-family: "Hack";
    font-size: 1em;
    background-color: #111111 /*var=color-background-0*/;
    color: #dddddd /*var=color-text-0*/;
    margin: 0em;
    line-height: 1.5em;
    box-sizing: border-box;
    /*border: 2px solid #888888 /*var=color-borders*/;
  }

  h1, h2, h3, h4, h5 {
    color: #ffee33;
    font-weight: bold;
    margin: 0px;
  }

  h2, h3, h4, h5 {
    padding-bottom: 1em;
    text-align: left;
  }

  h1 {
      line-height: 1.5em;
    font-size: 1.6em;
    text-align: center;
  }

  h2 {
      line-height: 1.5em;
      font-size: 1.4em;
  }

  h3 {
      line-height: 1.5em;
      font-size: 1.2em;
  }

  h4 {
      line-height: 1.5em;
      font-size: 1.1em;
  }

  h5 {
      line-height: 1.5em;
      font-size: 1em;
  }

  p {
    margin: 0px 0px 1em 0px;
    text-align: left;
  }

  p:last-child {margin-bottom: 0px;}

  strong {
    color: #fff /*var=color-text-1*/;
    font-weight: bold;
  }

  table {
      margin: 0px 0px 1em 0px;
      background-color: #333333 /*var=color-background-2*/;
      border-spacing: 2px;
  }
  
  tr:nth-child(odd) {
      background-color: #444444;
  }

  tr {
      border-bottom: 2px solid #888888 /*var=color-borders*/;
  }
  
/*--- AREAS --------------------------------------------------*/

.areas {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 0px;
}

  .areaMain {
    grid-column: span 2;
    background-color: #222222 /*var=color-background-1*/;
    width: 50vw;
    margin: auto;
    border: 2px solid #888888 /*var=color-borders*/;
    border-top: 0px;
    border-bottom: 0px;
    padding: 0px;
  }

  .areaLeft {
    grid-column: span 1;
    border: 2px solid #888888 /*var=color-borders*/;
  }

  .areaRight

  .areaBanner

  .areaMenu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

/*--- CONTENT CONTAINERS -------------------------------------*/

  .title {
    border-bottom: 2px solid #888888 /*var=color-borders*/;
    border-top: 2px solid #888888 /*var=color-borders*/;
    padding: 1em;
    background-color: #333333 /*var=color-background-2*/;
  }

    .title h1 + h2 {
      padding-top: 0.6em;
      padding-bottom: 0px;
      color: #005fff /*var=color-info*/;
      text-align: center;
    }

  .main {
    padding: 1em 1em 0em 1em;
    padding: 1em;
    border-bottom: 2px solid #888888 /*var=color-borders*/;
    overflow-wrap: break-word; 
  }

/*--- TEXT LINKS ---------------------------------------------*/

  a:link, a:visited {
    text-decoration: underline;
  }

  a:hover {
    text-decoration: underline;
  }

  a:active {
    text-decoration: underline;
    position: relative;
    left: 2px;
    top: 2px;
  }

  a::before {
    display: inline-block;
    padding-right: 0.25em;
    padding-left: 1px
  }

  a {
    transition: all 0.1s; /* ! ERROR POSITION NOT FUNCTIONAL */
  }

/* unspecified links */

  a:link, a:visited {
    color: #22aa44; /*#bfffbf #7fff7f #009f00*/
  }

  a:hover, a:active {
    color: #33ff66;
  }

/* external links */

  a.external:link, a.external:visited {
    color: #22aa44; /*#bfffbf #7fff7f #009f00*/
  }

  a.external:hover, a.external:active {
    color: #33ff66;
  }

/* internal links */

  a.internal:link, a.internal:visited {
    color: #22aa44;
  }

  a.internal:hover, a.internal:active {
    color: #33ff66;
  }

/* on site links */

  a.onSite:link, a.onSite:visited {
    color: #22aa44;
  }

  a.onSite:hover, a.onSite:active {
    color: #33ff66;
  }

  /* download links */

  a.download:link, a.download:visited {
    color: #22aa44;
  }

  a.download:hover, a.download:active {
    color: #33ff66;
  }

/*--- CODE ---------------------------------------------------*/

code, .code, .path, .application, .setting, .tag {
  background-color: #111111 /*var=color-background-0*/;
  font-family: "Hack";
  font-size: 1em;
  text-align: left;
  padding: 0em;
  /*white-space:pre;*/ prevents manual and automatic line breaks, so should make use of a vertical scroll bar
}

.application, .setting {
  font-family: "Hack";
}

/* cursor */

/* code */

  code, .code {
    color: #AA55DD /*var=color-code*/;
  }

  code.block, div.code {
      display: block;
    border-left: 2px solid #AA55DD /*var=color-code*/;
    margin-bottom: 1em;
    padding: 0em calc(1ch - 2px);
    overflow-x: scroll;
    /*white-space: nowrap;*/
  }

  div.code > .in1 {
    border-left: 1px solid #AA55DD88;
    margin-left: 0.5ch;
    padding-left: calc(1.5ch - 1px);
  }

  code > .indent, .indent > .indent, .code-indent {
    border-left: 1px solid #AA55DD88;
    margin-left: 0.5ch;
    padding-left: calc(1.5ch - 1px);
  }

  .in1 > .in2 {
    border-left: 1px solid #AA55DD88;
    margin-left: 0.5ch;
    padding-left: calc(1.5ch - 1px);
  }

  div.code > div:last-child {
    padding-bottom: 0em;
  }

  code:last-child {
    margin-bottom: 0em;
  } 

  .code > .comment {
    color: #005fff /*var=color-info*/;
    font-style: italic;
  }

  pre {
      font-family: "Hack";
      font-size: 1em;
      line-height: 1.5em;
      margin: 0px;
  }

  var {
  background-color:#444 /*var=color-text-0*/;
  font-style: normal;
  }

.path {
  color: #cf377f;
  padding: 0em calc(1ch - 2px);
}

.application {
  color: #c34f9f /*var=color.application*/;
}

.setting {
  color: #9f3fbf;
}

.tag {
  color: #dddddd /*var=color-text-0*/;

}

/*--- UNDERLINES --------------------------------------------*/

.under-yellow {
  text-decoration: underline;
  text-decoration-color: #ff0
}

.under-yellow-dashed {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #ff0
}

.under-purple {
  text-decoration: underline;
  text-decoration-color: #834fe7 /*var=color-code*/;
}

/*--- SPECIAL SYMBOLS ---------------------------------------*/

kbd, .key, .key-arrow {
    font-family: Hack;
    font-size: 1em;
  background-color:#dddddd /*var=color-text-0*/;
  border-radius: 3px;
  color: #111;
  padding: 0em 1ch;
  display: inline-block;
  text-align: center;
  height: 1.4em;
}

.tickbox-unclickable { /*✔<span class="tickbox-unclickable"><span><b>&#10003;</b></span></span>*/
  background-color: #111111 /*var=color-background-0*/;
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid #888888 /*var=color-borders*/;
  vertical-align: bottom;
  text-align: center;
}

.tickbox-unclickable > span, .key-arrow > span {
  position: relative;
  bottom: 0.2em;
}

/*--- BORDER MARKERS -----------------------------------------*/

.info {
  background-color: #333333 /*var=color-background-2*/;
  /*color: #0040ff*/ /*var=color-text-info*/ /*#005fff*/;
  border-left: 2px solid #005fff /*var=color-info*/;
  padding: 0em calc(1ch - 2px);
  margin-bottom: 1em;
} 

.info > h2, .info >h3, .info > h4 {
  color: #005fff /*var=color-info*/;
}

.info:last-child {
  margin-bottom: 0em;
}

.optional {
  border-left: 2px solid #bd7d1d /*var=color-optional*/;
  padding-left:calc(1ch - 2px);
}

div.optional {
  margin-bottom: 1em;
}

.optional:last-child {
  margin-bottom: 0em;
}

.important {
    border-left: 2px solid #b00 /*var=color-optional*/;
    background-color: #333 /*var=color-background-0*/;
    padding-left: calc(1ch - 2px);
}

/*--- CONTENT TABLE ------------------------------------------*/

/*probably better to prepend spaces, they wont be copyable but should preserve perfect character width*/

.c2, .c3, .c4, .c5 {
  display: block;
  text-align: left;
}

.c2 {
  padding-left: 0em;
}

.c3 {
  padding-left: 2ch;
}

.c4 {
  padding-left: 4ch;
}

.c5 {
  padding-left: 6ch;
}

/* underline color as left border color */

.c-info {
  text-decoration: underline;
  text-decoration-color: #005fff /*var=color-info*/;
}

.c-important {
  text-decoration: underline;
  text-decoration-color: #b00 /*var=color-optional*/;
}

.c-optional {
  text-decoration: underline;
  text-decoration-color: #bd7d1d /*var=color-optional*/;
}

/*--- IMAGE GALLERY ------------------------------------------*/

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 1em;
    padding-bottom: 1em;
}
.img100, .grid100 {
    grid-column: span 4;
}
.img50, .grid50 {
    grid-column: span 2;
}
.img25, .grid25 {
    grid-column: span 1;
}
.img75, .grid75 {
    grid-column: span 3;
}
img {
    display: block;
}
.grid > p {
    margin-bottom: 0px;
}
.grid:last-child {
    margin-bottom: 1em;
}

/*--- VIDEOS -------------------------------------------------*/

iframe.video {
    aspect-ratio: 16 / 9;
    display: block;
}
iframe.grid50:nth-child(odd) {
    padding-right: 1em;
}
iframe.grid50:nth-last-child(-n+2) {
    padding-bottom: 0;
}
iframe.grid50 {
    width: 100%;
    padding-bottom: 1em;
}

/*--- HEADER -------------------------------------------------*/

.header {
    font-size: 0.9em;
    color: #888888;
    padding-bottom: 1em;
}

/*--- OTHER SPECIAL FORMATTED TEXT ---------------------------*/

/*############################################################*/
/*### MOBILE #################################################*/
/*############################################################*/



@media only screen and (max-width: 768px) {

  body {
    margin: 0px
  }

  .areaMain {
    width: 100vw;
    margin: 0px;
    border: none;
  }
}