:root {
    font-family: Roboto, sans-serif;
}

.cql{
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    span.underline{text-decoration: underline;}
    div.column{display: inline-block; vertical-align: top; width: 50%;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    pre > code.sourceCode { white-space: pre; position: relative; }
    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
    pre > code.sourceCode > span:empty { height: 1.2em; }
    code.sourceCode > span { color: inherit; text-decoration: inherit; }
    div.sourceCode { margin: 1em 0; }
    pre.sourceCode { margin: 0; }
    @media screen {
    div.sourceCode { overflow: auto; }
    }
    @media print {
    pre > code.sourceCode { white-space: pre-wrap; }
    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
    }
    pre.numberSource code
      { counter-reset: source-line 0; }
    pre.numberSource code > span
      { position: relative; left: -4em; counter-increment: source-line; }
    pre.numberSource code > span > a:first-child::before
      { content: counter(source-line);
        position: relative; left: -1em; text-align: right; vertical-align: baseline;
        border: none; display: inline-block;
        -webkit-touch-callout: none; -webkit-user-select: none;
        -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none;
        padding: 0 4px; width: 4em;
        color: #aaaaaa;
      }
    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
    div.sourceCode
      {  background-color: #ffffff; }
    @media screen {
    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
    }
    code span.al { color: #ef2929; } /* Alert */
    code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
    code span.at { color: #c4a000; } /* Attribute */
    code span.bn { color: #0000cf; } /* BaseN */
    code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #4e9a06; } /* Char */
    code span.cn { color: #000000; } /* Constant */
    code span.co { color: #8f5902; font-style: italic; } /* Comment */
    code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
    code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
    code span.dt { color: #204a87; } /* DataType */
    code span.dv { color: #8b008b; } /* DecVal */
    code span.er { color: #a40000; font-weight: bold; } /* Error */
    code span.ex { } /* Extension */
    code span.fl { color: #0000cf; } /* Float */
    code span.fu { color: #000000; } /* Function */
    code span.im { } /* Import */
    code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
    code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
    code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
    code span.ot { color: #8f5902; } /* Other */
    code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
    code span.sc { color: #000000; } /* SpecialChar */
    code span.ss { color: #4e9a06; } /* SpecialString */
    code span.st { color: #b22222; } /* String */
    code span.va { color: #000000; } /* Variable */
    code span.vs { color: #4e9a06; } /* VerbatimString */
    code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */
}



/* The sidebar menu */
.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ADD8E6;
  overflow-x: hidden;
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #2D5876;
  display: block;
  font-weight: bold;
}

.sidenav h1 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #EF6C40;
  display: block;
}

.sidenav a:hover {
  text-decoration: underline;
}

pre {
    white-space: pre-wrap;
}

code {
    font-weight: bold;
    color: #272D2D;
}

/* Style page content */
.main {
  margin-left: 160px;
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

* {box-sizing: border-box}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 15%;
  height: 800px;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 12px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 85%;
  border-left: none;
  height: 800px;
  overflow: hidden;
  overflow-y: auto;
  display: none;
  scrollbar-width: none;
}

.boardleft {
    display: inline-block;
}

.boardright {
    display: inline-block;
}

.sampleGames {
  text-indent: 4em;
  color: teal;
}

a {
    transition: all 0.2s ease;
    transition-property: transform, opacity, color, border-color, background-color;
}

hr {
  margin-left: 0px;
  width: 20%;
  border: 3px solid teal;
}

figure figcaption {
    border: 1px dotted teal;
    text-align: center;
}

.spoiler{
  color: grey; 
  background-color: grey;
}

.spoiler:hover{
  transition: all 0.2s ease;
  transition-property: transform, opacity, color, border-color, background-color;
  background-color:white; 
  color: black;
}

#contact {
    font-weight: bold;
}

span.email { display: none; }
span.email1:before { content : "r" }
span.email1:after { content : "99@" }
span.email2:after { content : "mail.com" }