/************* Colors *************/
/* https://color.adobe.com/de/Spring-color-theme-4066991/ */
/************* Typography *************/
@font-face {
  font-family: 'Vollkorn';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/vollkorn/Webfonts/Vollkorn-Regular.woff2') format('woff2'), url('fonts/vollkorn/Webfonts/Vollkorn-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Vollkorn';
  font-weight: normal;
  font-style: italic;
  src: url('fonts/vollkorn/Webfonts/Vollkorn-Italic.woff2') format('woff2'), url('fonts/vollkorn/Webfonts/Vollkorn-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Vollkorn';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/vollkorn/Webfonts/Vollkorn-Bold.woff2') format('woff2'), url('fonts/vollkorn/Webfonts/Vollkorn-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Playfair';
  src: url('fonts/Playfair-Display-900/Playfair-Display-900.woff2') format('woff2'), url('fonts/Playfair-Display-900/Playfair-Display-900.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Work-Sans-regular/Work-Sans-regular.woff2') format('woff2'), url('fonts/Work-Sans-regular/Work-Sans-regular.woff') format('woff');
}
/************* Basic elements *************/
html {
  font-family: Vollkorn, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #fff;
  font-size: 115%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  color: #666;
  font-size: 1rem;
  line-height: 1.7rem;
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
#home body {
  background-image: url(homepage.jpg);
  background-size: cover;
  height: 100vh;
}
main {
  display: block;
  max-width: 40em;
  margin: 0.5rem auto;
  padding: 0.5em 1.2em;
}
main p img,
main figure img {
  max-height: 90vh;
  max-width: 95vw;
  object-fit: contain;
  display: block;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
main p img[data-src],
main figure img[data-src] {
  display: none;
}
@media (max-width:480px) {
  main p img,
  main figure img {
    max-width: 100vw;
  }
}
main.largeimages p img {
  min-height: 50vh;
}
main figure {
  margin: 1.7rem 0;
}
main figure figcaption {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  color: #d34335;
  font-weight: normal;
}
main video {
  display: block;
  margin: 2rem 0 2rem 50%;
  outline: none;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  max-width: 95vw;
  max-height: 80vh;
}
h1,
h2,
h3,
h4,
p {
  margin: 1.7rem 0;
  line-height: 1.7rem;
}
h1,
h1 a[name],
h4 {
  color: #000;
}
h2 {
  color: #d34335;
}
h1,
h1 a[name] {
  text-wrap: balance;
  font-family: Playfair, Verdana, Geneva, sans-serif;
  font-size: 2rem;
  line-height: 2.6rem;
  margin: 2rem 0;
  text-align: center;
  padding: 0 10%;
  transform: translateY(-0.4rem);
  -webkit-transform: translateY(-0.4rem);
}
#home h1,
#home h1 a[name] {
  color: #fff;
}
h2 {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-align: center;
  transform: translateY(-0.1rem);
  -webkit-transform: translateY(-0.1rem);
}
h3 {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-align: center;
  color: #000;
}
h4 {
  font-weight: normal;
  font-style: italic;
  font-size: 1rem;
  transform: translateY(0.1rem);
  -webkit-transform: translateY(0.1rem);
}
a[name] {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  color: #d34335;
  font-weight: normal;
  text-decoration: none;
  border: none;
}
a {
  color: #008e74;
  border-bottom-color: #008e74;
  border-bottom: 1px solid;
  text-decoration: none;
}
pre {
  margin: 1.7rem 0;
  font-family: Courier, monospace;
  font-size: 0.9rem;
  transform: translateY(0.1rem);
  -webkit-transform: translateY(0.1rem);
}
code {
  font-family: Courier, monospace;
  font-size: 0.9rem;
}
blockquote {
  border-left-width: 3px;
  border-left-style: solid;
  margin: 1.7rem 0;
  padding-left: 1em;
}
hr {
  background-color: #d34335;
  margin: calc(1.7rem - 1px) 0;
  border: none;
  height: 1px;
}
ul,
ol {
  margin: 1.7rem 0;
  padding: 0 0 0 1.2em;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin: 0;
  padding: 0 0 0 1.2em;
}
ul ul li,
ol ul li,
ul ul ul li,
ol ul ul li {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAgMTAiPjxjaXJjbGUgY3g9IjUiIGN5PSI1IiByPSI0IiBmaWxsPSIjMDA4ZTc0Ii8+PC9zdmc+");
}
ul li {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAgMTAiPjxjaXJjbGUgY3g9IjUiIGN5PSI1IiByPSI0IiBmaWxsPSIjZDM0MzM1Ii8+PC9zdmc+");
}
ol {
  counter-reset: item;
}
ol > li {
  display: block;
}
ol > li:before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #d34335;
  position: absolute;
  padding-right: 0.4em;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
ol > li ol > li:before {
  color: #008e74;
  content: counter(item, lower-alpha) ". ";
}
table {
  margin: 1.7rem 0;
  border-collapse: collapse;
  line-height: calc(1.7rem - 1px);
  transform: translateY(-0.6rem);
  -webkit-transform: translateY(-0.6rem);
}
table thead tr,
table tbody tr:last-child {
  border-bottom: 1px solid #ccc;
}
table tbody tr:nth-child(2n+1) {
  background: #fafafa;
}
table th,
table td {
  padding: 0 0.8em;
}
table th {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  color: #d34335;
  font-weight: normal;
}
table thead th {
  text-align: center;
}
table thead th[align=left] {
  text-align: left;
}
table thead th[align=center],
table thead th[align=right] {
  text-align: center;
}
table th:first-child,
table td:first-child {
  padding-left: 0.4em;
}
table th:last-child,
table td:last-child {
  padding-right: 0.4em;
}
blockquote {
  border-left-color: #d34335;
}
/************* Homepage Icons *************/
ul.icons {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
ul.icons li {
  display: inline-block;
  list-style-image: none;
  width: 7rem;
  text-align: center;
  line-height: 100%;
}
ul.icons li a {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  color: #d34335;
  font-weight: normal;
  border: none;
}
#home ul.icons li a {
  color: #fff;
}
ul.icons li a:before {
  display: inline-block;
  content: "";
  width: 5rem;
  height: 5rem;
  background-repeat: no-repeat;
  background-size: auto 15rem;
  background-image: url("icons_home.svg");
}
ul.icons li.icon_tech a:before {
  background-position: -5rem 0rem;
}
ul.icons li.icon_design a:before {
  background-position: -10rem 0rem;
}
ul.icons li.icon_travel a:before {
  background-position: -15rem 0rem;
}
ul.icons li.icon_photo a:before {
  background-position: 0rem -5rem;
}
ul.icons li.icon_sports a:before {
  background-position: -5rem -5rem;
}
ul.icons li.icon_cooking a:before {
  background-position: -10rem -5rem;
}
ul.icons li.icon_contact a:before {
  background-position: -15rem -5rem;
}
ul.icons li.icon_about a:before {
  background-position: 0rem -10rem;
}
/************* Top Navigation *************/
body > header {
  line-height: 0;
  overflow: auto;
  background-color: #fff;
}
#home body > header {
  display: none;
}
body > header nav {
  overflow: auto;
  z-index: 999;
}
body > header nav #menutoggle,
body > header nav label[for=menutoggle] {
  display: none;
}
body > header nav ul {
  overflow: auto;
  display: block;
  margin: 0 auto;
  list-style-type: none;
  padding: 0;
  text-align: center;
  background-color: #fff;
}
body > header nav ul li {
  display: inline-block;
  list-style-image: none;
}
body > header nav ul li a {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: 0.85rem;
  display: inline-block;
  padding: 1.5rem 1em 1rem 1.2em;
  border-bottom: none;
  color: #999;
}
body > header nav ul li a:hover {
  color: #000;
  background-color: #fafafa;
  transition: background-color 0.5s;
}
body > header nav ul li.current a {
  color: #ccc;
}
body > header nav ul:first-of-type {
  border-bottom: 1px solid #ccc;
}
body > header nav ul:first-of-type li a {
  position: relative;
  padding: 1rem 1.2rem 1rem 2.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  line-height: 0.8rem;
}
body > header nav ul:first-of-type li a:before {
  position: absolute;
  display: inline-block;
  content: "";
  top: 0.546rem;
  left: 0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: 6rem 4.5rem;
  background-image: url("icons.svg");
}
@media (max-width:480px) {
  body > header > nav ul:first-of-type {
    text-align: left;
    display: none;
  }
  body > header > nav ul:first-of-type li {
    display: block;
  }
  body > header > nav ul:first-of-type li a {
    padding: 1.2rem;
    line-height: 0;
  }
  body > header > nav ul:first-of-type li a::before {
    display: none;
  }
  body > header > nav ul:not(:first-of-type) {
    margin: 0.5em 0.2em 0 40px;
  }
  body > header > nav ul:not(:first-of-type) li {
    display: inline-block;
  }
  body > header > nav ul:not(:first-of-type) li a {
    padding: 0.8rem 0.4rem;
  }
  body > header > nav label[for=menutoggle] {
    display: block;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto 120px;
    background-image: url("icons.svg");
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    z-index: 999;
    border-bottom-right-radius: 5px;
  }
  body > header > nav #menutoggle:checked ~ ul:first-of-type {
    display: block;
    z-index: 9999;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    position: fixed;
    background: #fff;
    outline: none;
    top: 0px;
    width: auto;
    height: auto;
  }
  body > header > nav #menutoggle:checked ~ label[for=menutoggle] {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9998;
  }
}
#menu_main_home a:before {
  background-position: 0rem 0rem;
}
#menu_main_aboutme a:before {
  background-position: 0rem -3rem;
}
#menu_main_contact a:before {
  background-position: -4.5rem -1.5rem;
}
@media (max-width:480px) {
  main {
    margin-top: 0;
  }
}
/************* Bottom Navigation *************/
body > footer nav {
  display: none;
}
@media (max-width:480px) {
  body > footer nav {
    display: block;
  }
}
body > footer nav h2 {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: normal;
  margin: 0;
  width: 100%;
  color: #ccc;
  border-bottom: 1px dashed #ccc;
}
body > footer nav ul {
  overflow: auto;
  display: block;
  margin: 0 auto;
  list-style-type: none;
  padding: 0 0 1em 0;
  width: 100%;
  background-color: #fff;
}
@media (max-width:480px) {
  body > footer nav ul {
    text-align: left;
  }
}
body > footer nav ul li {
  display: block;
  list-style-image: none;
  text-align: center;
}
body > footer nav ul li a {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: 0.85rem;
  display: inline-block;
  border-bottom: none;
  color: #999;
}
body > footer nav ul li.current a {
  color: #ccc;
}
#menu_main_home a:before {
  background-position: 0rem 0rem;
}
#menu_main_aboutme a:before {
  background-position: 0rem -3rem;
}
#menu_main_contact a:before {
  background-position: -4.5rem -1.5rem;
}
@media (max-width:480px) {
  main {
    margin-top: 0;
  }
}
/************* Audio Player *************/
button.play,
button.pause {
  border-radius: 50%;
  text-align: center;
  outline: none;
  width: 2em;
  height: 2.1em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
  border: 1px solid #ccc;
}
button.play {
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%3Cpath%20d%3D%22M32.16%2C16.08%2C8.94%2C4.47A2.07%2C2.07%2C0%2C0%2C0%2C6%2C6.32V29.53a2.06%2C2.06%2C0%2C0%2C0%2C3%2C1.85L32.16%2C19.77a2.07%2C2.07%2C0%2C0%2C0%2C0-3.7Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");
  background-color: #fff;
}
button.pause {
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%3Crect%20x%3D%223.95%22%20y%3D%224%22%20width%3D%2211%22%20height%3D%2228%22%20rx%3D%222.07%22%20ry%3D%222.07%22%3E%3C%2Frect%3E%0A%20%3Crect%20x%3D%2220.95%22%20y%3D%224%22%20width%3D%2211%22%20height%3D%2228%22%20rx%3D%222.07%22%20ry%3D%222.07%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A");
  background-color: #e6e6e6;
}
/*button.play:before {
  content: "\25B6";
}

button.pause:before {
  content: "\275A\275A";
}*/
/************* Simple image lists *************/
ul.images {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
ul.images > li {
  list-style-image: none;
  margin: 0.5em;
}
ul.images > li figure {
  margin: 0;
  text-align: center;
}
ul.images > li figure img {
  margin: 0 auto;
  transform: none;
  -webkit-transform: none;
}
/************* Gallery *************/
.gallery {
  width: 95vw;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .gallery {
    /* "vw" is buggy on iPhone4/iOS7. */
    width: 95%;
  }
}
.gallery a {
  border: none;
}
.gallery img {
  width: 100%;
  height: auto;
}
.gallery figure {
  display: block;
  margin: 0;
}
.gallery figcaption {
  display: none;
}
.gallery span[itemprop="copyright"] {
  color: #888;
  float: right;
}
.gallery span[itemprop="copyright"]:before {
  content: "Foto: ";
}
.pswp .pswp__caption__center {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  font-weight: normal;
}
.pswp .pswp__caption__center span[itemprop='copyright'] {
  margin-left: 1em;
  color: #d34335;
}
.pswp .pswp__caption__center span[itemprop='copyright']:before {
  content: "\00a9";
  margin-right: 0.2em;
}
/************* Panorama *************/
figure.panorama {
  margin: 1.7rem 0;
}
figure.panorama > div {
  width: 95vw !important;
  height: 50vh !important;
  display: block;
  margin-left: 50% !important;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
figure.panorama > div:-webkit-full-screen {
  margin-left: 0 !important;
  transform: none;
  -webkit-transform: none;
}
figure.panorama > div:-moz-full-screen {
  margin-left: 0 !important;
  transform: none;
  -webkit-transform: none;
}
figure.panorama > div:fullscreen {
  margin-left: 0 !important;
  transform: none;
  -webkit-transform: none;
}
figure.panorama > div:-ms-fullscreen {
  margin-left: 0 !important;
  transform: none;
  -webkit-transform: none;
}
@media (max-width:480px) {
  figure.panorama > div {
    max-width: 100vw;
  }
}
figure.panorama figcaption {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  text-align: center;
  font-size: 0.9rem;
  color: #d34335;
  font-weight: normal;
}
/************* Code Highlights (manni) *************/
/* Error */
.chroma .ss4 {
  color: #aa0000;
  background-color: #ffaaaa;
}
/* LineHighlight */
.chroma .hl {
  background-color: #ffffcc;
  display: block;
  width: 100%;
}
/* LineNumbers */
.chroma .ln {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
}
/* Keyword */
.chroma .s3e8 {
  color: #006699;
  font-weight: bold;
}
/* KeywordPseudo */
.chroma .s3ec {
  color: #006699;
}
/* KeywordType */
.chroma .s3ee {
  color: #007788;
  font-weight: bold;
}
/* NameAttribute */
.chroma .s7d1 {
  color: #330099;
}
/* NameBuiltin */
.chroma .s7d2 {
  color: #336666;
}
/* NameClass */
.chroma .s7d4 {
  color: #00aa88;
  font-weight: bold;
}
/* NameConstant */
.chroma .s7d5 {
  color: #336600;
}
/* NameDecorator */
.chroma .s7d6 {
  color: #9999ff;
}
/* NameEntity */
.chroma .s7d7 {
  color: #999999;
  font-weight: bold;
}
/* NameException */
.chroma .s7d8 {
  color: #cc0000;
  font-weight: bold;
}
/* NameFunction */
.chroma .s7d9 {
  color: #cc00ff;
}
/* NameLabel */
.chroma .s7dc {
  color: #9999ff;
}
/* NameNamespace */
.chroma .s7dd {
  color: #00ccff;
  font-weight: bold;
}
/* NameTag */
.chroma .s7e2 {
  color: #330099;
  font-weight: bold;
}
/* NameVariable */
.chroma .s7e3 {
  color: #003333;
}
/* LiteralString */
.chroma .sc1c {
  color: #cc3300;
}
/* LiteralStringDoc */
.chroma .sc23 {
  color: #cc3300;
  font-style: italic;
}
/* LiteralStringEscape */
.chroma .sc25 {
  color: #cc3300;
  font-weight: bold;
}
/* LiteralStringInterpol */
.chroma .sc27 {
  color: #aa0000;
}
/* LiteralStringOther */
.chroma .sc29 {
  color: #cc3300;
}
/* LiteralStringRegex */
.chroma .sc2a {
  color: #33aaaa;
}
/* LiteralStringSymbol */
.chroma .sc2c {
  color: #ffcc33;
}
/* LiteralNumber */
.chroma .sc80 {
  color: #ff6600;
}
/* Operator */
.chroma .sfa0 {
  color: #555555;
}
/* OperatorWord */
.chroma .sfa1 {
  color: #000000;
  font-weight: bold;
}
/* Comment */
.chroma .s1770 {
  color: #0099ff;
  font-style: italic;
}
/* CommentSpecial */
.chroma .s1774 {
  color: #0099ff;
  font-weight: bold;
  font-style: italic;
}
/* CommentPreproc */
.chroma .s17d4 {
  color: #009999;
}
/* GenericDeleted */
.chroma .s1b59 {
  background-color: #ffcccc;
}
/* GenericEmph */
.chroma .s1b5a {
  font-style: italic;
}
/* GenericError */
.chroma .s1b5b {
  color: #ff0000;
}
/* GenericHeading */
.chroma .s1b5c {
  color: #003300;
  font-weight: bold;
}
/* GenericInserted */
.chroma .s1b5d {
  background-color: #ccffcc;
}
/* GenericOutput */
.chroma .s1b5e {
  color: #aaaaaa;
}
/* GenericPrompt */
.chroma .s1b5f {
  color: #000099;
  font-weight: bold;
}
/* GenericStrong */
.chroma .s1b60 {
  font-weight: bold;
}
/* GenericSubheading */
.chroma .s1b61 {
  color: #003300;
  font-weight: bold;
}
/* GenericTraceback */
.chroma .s1b62 {
  color: #99cc66;
}
/* TextWhitespace */
.chroma .s1f41 {
  color: #bbbbbb;
}
/*@ sourceMappingURL=styles.css.map */