html {
  background-color: #000000;
  color: #f0f0f0;
  font-family: 'Bai Jamjuree', sans-serif;
  margin: auto;
}

@media screen and (min-width: 900px) {
  html {
    width: 70%;
  }
}

@media screen and (max-width: 900px) {
  html {
    width: 90%;
  }
}

a {
  color: #ddc3d4;
  text-decoration: none;
}

a:hover {
  color: #f0f0f0;
  text-decoration: underline;
}

a:active {
  color: #f0f0f0;
  text-decoration: none;
}

blockquote {
  background-color: #4c193b;
  padding: 10px;
}

pre {
  border-color: #301130;
  border-style: solid;
  border-width: 2px;
  margin-left: 5%;
  margin-right: 5%;
  padding: 1.5%;
  white-space: pre-wrap;
  overflow: scroll;
}

.background {
  border-color: #4c193b;
  border-style: solid;
  border-width: 5px;
  border-radius: 5px;
  background-color: #4c193b;
  height: 100px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
}

.lesson {
  background-color: #6c1410;
  padding: 10px;
}

.vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* For the article listing page */

.article-panel {
  display: grid;
  grid-template-columns: 3fr 1fr;
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
  border-style: solid solid solid solid;
  border-color: #f0f0f0 #000000 #f0f0f0 #000000;
  border-width: thin;
}

.article-panel:hover {
  background-color: #4c193b;
  border-style: solid;
  border-color: #f0f0f0;
  border-width: thin;
}

.span-two-columns {
  grid-column: 1 / 3;
}

.tag {
  background: #4c193b;
  border-color: #ddc3d4;
  border-radius: 5px;
  border-width: 5px;
  margin: 5px;
  padding: 5px;
}

.horizontally-centered-text {
  text-align: center;
}

/* Syntax highlighting from pandoc (tango) */

code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #204a87; } /* 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: #8f5902; } /* 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: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #204a87; font-weight: bold; } /* 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: #ce5c00; font-weight: bold; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* 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 */