:root {
  --cyan: #37abc8;
  --pink: #d35557;
  --black: #212121;
  --fg: #1a1a1a;
  --bg: #ededed;
}

@font-face {
    font-family: 'LinuxLibertineDisplayRegular';
    src: url('resources/fonts/LinLibertine_DR.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LinuxLibertineMono';
    src: url('resources/fonts/LinLibertine_M.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LinuxLibertineSemiboldItalic';
    src: url('resources/fonts/LinLibertine_RZI.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'LinuxLibertineItalic';
    src: url('resources/fonts/LinLibertine_RI.otf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

html {
  font-family: 'LinuxLibertineDisplayRegular'; 
  font-weight: normal; 
  font-size: 20px;
  line-height: 1.2;
  color: var(--fg);
  background-color: var(--bg);
}

body {
  margin: 0 auto;
  max-width: 36em;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 25px;
  hyphens: auto;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

p {
  margin: 1em 0;
}

a {
  color: var(--fg);
}
a:visited {
  color: var(--fg);
}

img {
  max-width: 100%;
}

h1 {
    font-size: 150%;
}

code {
  font-family: 'LinuxLibertineMono'; 
  font-size: 75%;
  margin: 0;
}

pre {
  margin: 1em 0;
  overflow: auto;
}
pre code {
  padding: 0;
  overflow: visible;
}

header {
  padding-bottom: 25px;
  text-align: center;
}

.logo {
  margin: 0 auto;
  color: var(--pink);
  text-align: center;
  font-size: 6rem;
  text-shadow: -0.18rem -0.18rem var(--black), -0.36rem -0.36rem var(--cyan);
  line-height: 5rem;
  font-weight: 800;
  font-style: italic;
  font-family: 'LinuxLibertineSemiboldItalic'; 

  display:inline-block;
  -webkit-transform:scale(1,1.2);
  -moz-transform:scale(1,1.2);
  -ms-transform:scale(1,1.2);
  -o-transform:scale(1,1.2);
  transform:scale(1,1.2);
}

.heading {
  margin-top: 40px;
  font-family: 'LinuxLibertineItalic'; 
  font-weight: normal;
  font-style: italic;
  font-size: 20px;
}

a {
  text-decoration: none;
}

/* http://www.coding-dude.com/wp/css/highlight-text-css/ */
.highlight{
  position:relative;
}

.highlight:before{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:var(--cyan);
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.5;
  border-radius:0.25em;
}

.highlight:after{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:var(--cyan);
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.5;
  border-radius:0.25em;
}

footer {
  font-family: 'LinuxLibertineItalic'; 
  font-weight: normal;
  font-style: italic;
  font-size: 16px;
  text-align: center;
  padding-top: 5px;
}
footer p {
  margin: 0.6em auto;

a.hovering {
    position:relative
}

a.hovering:hover:before {
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-radius:0.25em;
  border-color:transparent;
  border-bottom-color:var(--cyan);
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.5;
}

.nav {
  font-family: 'LinuxLibertineItalic'; 
  font-weight: normal;
  font-style: italic;
  font-size: 16px;
}

.nav a.active {
    position:relative;
}

.nav a.active:before {
  content:"";
  z-index:-1;
  left:0.1em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:transparent;
  position:absolute;
  border-bottom-color:var(--cyan);
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.5;
  border-radius:0.25em;
}

.bib {
    font-size: 75%;
}

/* #body a.hovering::after { */
/*         content: ""; */
/*         width: 11px; */
/*         height: 11px; */
/*         margin-left: 4px; */
/*         background-image: url("resources/arrow-black.svg"); */
/*         background-position: center; */
/*         background-repeat: no-repeat; */
/*         background-size: contain; */
/*         display: inline-block; */
/* } */