body {
  overflow: auto;
  font-family: "DejaVu Serif", Georgia, serif;
  font-size: 1.4em;
}

p {
  text-align: justify;
}

p.left {
  text-align: left;
}

blockquote {
  font-style: italic;
}
blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

img.left {
  float: left;
  margin: 0 1em 1em 0;
}

a {
  text-decoration: none;
}

em, strong
{
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

.high {
  font-weight: bold;
}

mark {
  font-style: normal;
  font-weight: bold;
  color: inherit;
  background-color: inherit;
}

div#body-container {
  display:    -moz-flex;
  display:     -ms-flex;
  display: -webkit-flex;
  display:         flex;

     -moz-flex-direction: column;
      -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;

     -moz-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;

     -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;

  box-sizing: border-box;
  min-width: 20em;
  min-height: 100%;
}

div#toolbar-container,
div#intro-container,
div#main-menu-container,
div#content-main-container,
div#content-extra-container,
div#footer-container
{
     -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;

  box-sizing: border-box;
  margin: 0;
  width: 100%;
  overflow: visible;
}

div#toolbar,
div#intro-title,
div#main-menu,
div#content-main,
div#content-extra,
div#footer
{
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.5em;
  overflow: visible;
}

/***************************************************************
 * toolbar
 **************************************************************/

div#toolbar-container
{
  border-bottom: thin solid black;
}

div#toolbar
{
  text-align: right;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
}

/***************************************************************
 * intro
 **************************************************************/

div#intro-title {
  padding-top: 1.2em;
  padding-bottom: 1em;
  overflow: hidden;
}

div#intro-title img {
  display: block;
  float: right;
  max-width: 8em;
  height: auto;
  margin-left: 2em;
  margin-bottom: 1.6em;
}

div#intro-title h1,
div#intro-title h2,
div#intro-title h3
{
  margin-left: 0;
  margin-right: auto;
}

div#intro-title h1
{
  margin-top: 0;
}

div#intro-title h1 a
{
  display: block;
  margin: 0;
  padding: 0;

  background-color: initial !important;
  color: inherit !important;
}

/***************************************************************
 * content-main
 **************************************************************/

div#content-main-container {
     -moz-flex-grow: 1 !important;
      -ms-flex-grow: 1 !important;
  -webkit-flex-grow: 1 !important;
          flex-grow: 1 !important;
}

div#content-main {
  vertical-align: top;
  border: none;
}

div#content-main-body {
  vertical-align: top;
  padding-bottom: 2em;
}

dl.faq dt {
  margin-top: 1em;
  font-size: larger;
  font-weight: bold;
}

dl.projects dt:not(:first-child) {
  margin-top: 1em;
}

.techstack::before {
  content: "(";
}
.techstack::after {
  content: ")";
}

code.block
{
  display: block;
  padding: 0.5em;
  border-radius: 0.5em;
  overflow-x: auto;
}

/***************************************************************
 * duckduckgo search box
 **************************************************************/

form#duckduckgo-search,
form#duckduckgo-search input,
form#lang-select,
form#lang-select select
{
  font-size: inherit;
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
}

form#duckduckgo-search input,
form#lang-select select
{
  font-size: smaller;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  margin-top: 0.5em;
}

form#duckduckgo-search input[type=search] {
  transition: width 0.4s ease-in-out;
  width: 12em;
}

form#duckduckgo-search input[type=submit],
form#lang-select select
{
  border: thin solid white;
  border-radius: 5px;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: 1.4em;
}

form#duckduckgo-search input[type=hidden] {
  display: none;
}

/***************************************************************
 * content extra and tag cloud
 **************************************************************/

div#tag-cloud
{
  font-size: smaller;
}

/***************************************************************
 * menu
 **************************************************************/

div#main-menu {
  padding: 0;
}

div#main-menu nav {
  font-size: 1.2em;
  font-weight: bold;
  overflow: hidden;
}

div#main-menu nav a
{
  display: block;
  transition: 0.1s;
  text-decoration: none;

  color: inherit;
  font-size: inherit;
  outline: none;
  padding: 1em;
  margin: 0;
}

div#main-menu nav a:last-child {
  border-bottom-style: dashed;
  border-bottom-width: thin;
}

/***************************************************************
 * figure with figcaption
 **************************************************************/

figure
{
  max-width: min(35%,600px);
}

figure > a,
figure img,
figure figcaption
{
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

figure img
{
  margin-bottom: 0.6em;
}

figure figcaption
{
  font-size: smaller;
  font-style: italic;
  text-align: left;
}

figure > a:active,
figure > a:hover,
figure > a:visited
{
  background-color: inherit;
}

figure.left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

/***************************************************************
 * social media icons
 **************************************************************/

ul.social
{
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.social li
{
  display: block;
  float: left;
  padding: 0 0.5em;
  margin: 0;
}

ul.social li:first-child {
  padding-left: 0;
}
ul.social li:last-child {
  padding-right: 0;
}

ul.social li a
{
  display: block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

ul.social li a:active,
ul.social li a:hover
{
  background-color: inherit;
  color: inherit;
}

ul.social li a img
{
  display: block;
  height: 65px;
  width: auto;
}

/***************************************************************
 * footer
 **************************************************************/

div#footer {
  overflow: hidden;
}

div#footer > p {
  font-size: 0.8em;
  margin: 0.5em auto 0.5em 0;
  text-align: left;
}

div#footer ul.social
{
  float: right;
}
div#footer ul.social li a img
{
  height: 32px;
}
div#footer ul.social li:first-child {
  padding-left: 1em;
}

/***************************************************************
 * Skryba elements
 **************************************************************/

#post .skryba-post-date
{
  display: block;
  margin-left: auto;
  margin-right: 0;
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
}

#post ul.skryba-tag-list
{
  text-align: right;
}

table.skryba-snippet-pygmentstable th.filename
{
  font-size: smaller;
}

/***************************************************************
 * color palette
 * taken from here: https://www.w3schools.com/colors/colors_palettes.asp
 **************************************************************/

body {
  background-color: white;
  color: black;
}

a.active,
a:active,
a:hover
{
  background-color: #f2ae72;
  color: white;
}

div#toolbar-container
{
  background-color: #588c7e;
  color: white;
}

form#duckduckgo-search input[type=search] {
  background-color: #f2e394;
  color: black;
}

form#duckduckgo-search input[type=submit],
form#lang-select select
{
  background-color: #f2ae72;
  color: white;
  border-color: white;
}

form#duckduckgo-search input[type=submit]:hover,
form#lang-select select:hover
{
  background-color: #f2e394;
  color: black;
  border-color: #f2e394;
}

div#main-menu-container {
  background-color: #588c7e;
  color: white;
}

div#main-menu nav a:last-child {
  border-bottom-color: #588c7e;
}

div#main-menu nav a.active,
div#main-menu nav a:active,
div#main-menu nav a:hover,
div#main-menu nav a.active:visited,
div#main-menu nav a:active:visited,
div#main-menu nav a:hover:visited {
  background-color: #f2e394;
  color: black;
}

div#content-main-container {
  background-color: #f2e394;
  color: black;
}

code.block {
  background-color: #588c7e;
  color: white;
}

div#content-extra-container {
  background-color: #588c7e;
  color: white;
}

div#footer-container {
  background-color: #d96459;
  color: white;
}

ul.skryba-tag-list a.skryba-tag {
  background-color: #d96459;
  color: white;
}

ul.skryba-tag-list a.skryba-tag:active,
ul.skryba-tag-list a.skryba-tag:hover
{
  background-color: #f2ae72;
  color: white;
}

table.skryba-snippet-pygmentstable
{
  background-color: lightgrey;
}

table.skryba-snippet-pygmentstable th.filename
{
  background-color: #d96459;
  color: white;
}

table.skryba-snippet-pygmentstable td.code
{
  background-color: white;
}