@charset "utf-8";
@font-face {
  font-family:'OpenSans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Open Sans'),
    url('./../assets/fonts/OpenSans/static/OpenSans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'OpenSans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local('Open Sans'),
    url('./../assets/fonts/OpenSans/static/OpenSans/OpenSans-Light.ttf') format('truetype');
}
@font-face {
  font-family:'OpenSans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Open Sans'),
    url('./../assets/fonts/OpenSans/static/OpenSans/OpenSans-Bold.ttf') format('truetype');
}

:root {
  --paddingCorners: 10rem;
  --heightHeader: 10rem;
}
*, *::before, *::after { background: none; margin: 0; padding: 0; border: none; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { font-size: 62.5%; }
html, html[data-theme="light"] { --fontColorMain: #000; }
html[data-theme="dark"] { --fontColorMain: #DDD; }
html, body { width: 100%; height: 100%; }
body {
  font: normal normal 400 1.6rem/normal system-ui, sans-serif;
  color: var(--fontColorMain);
  background: linear-gradient(150deg, #0086c4 0%,#0068a0 40%,#000000 100%);
}

/*******************************/
/*********** GENERAL ***********/
/*******************************/
a { text-decoration: none; }
ul { list-style: none; }
hr { width: 100%; height: 1px; display: block; }
input { box-shadow: none; outline: none; }
input::-moz-focus-inner { border: 0; }
.button, button, select { font: inherit; cursor: pointer; }
.button.disabled, button:disabled, select:disabled { cursor: initial; }
code { color: inherit; display: block; }
code pre { white-space: pre-wrap; }
mark { color: inherit; background: rgba(255, 236, 128, 0.4); }

/*******************************/
/*********** HEADER ************/
/*******************************/

/*******************************/
/********* NAVIGATION **********/
/*******************************/

/*******************************/
/*********** SECTION ***********/
/*******************************/
main {
  width: 100%; max-width: 80rem;
  padding: 1rem;
  position: relative;
  top: 0; left: 0;
  margin: 0 auto;
}

main li.year {
  font-weight: bold;
  background: rgba(255,255,255,0.4);
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 1rem;

  &::before { content: ''; margin-left: 1rem; }
}

main li.year li {
  border-top: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.2);

  &:first-of-type { border-top: none; padding-top: 1rem; }
  &:last-of-type { border-bottom: none; }
}

main li.year li a {
  font-weight: normal;
  color: inherit;
  display: block;
  padding: 0.5rem 1rem 0.5rem 2.5rem;

  &:hover {
    background: rgba(255,255,255,0.4);
  }
}

/*******************************/
/************ MISC *************/
/*******************************/


/**********************************************************/
/************* Displays aller Art - Hochformat ************/
/**********************************************************/
@media screen and (max-width: 800px), screen and (max-device-aspect-ratio: 10/10) {

}