:root {
  --main-nav-size: calc(0.6em + 1vw);
  --bg-color: #141414;
  --txt-color: #fff;
}
@font-face {
  font-family: 'JudeBold';
  src: url('../fonts/JudeBold.woff2') format('woff2'), url('../fonts/JudeBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Akzidenz';
  src: url('../fonts/AkzidenzGrotesk-Extended.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Akzidenz';
  src: url('../fonts/AkzidenzGrotesk-BoldExtended.otf');
  font-weight: 700;
  font-style: normal;
}
body {
  background: var(--bg-color);
  color: #fff;
  box-sizing: border-box;
  font-family: Akzidenz;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
  /* WebKit  */
}
h1 {
  font-size: var(--main-nav-size);
  text-transform: uppercase;
}
a {
  text-decoration: none;
  color: #fff;
}
.gedicht {
  font-family: JudeBold;
  font-size: calc(0.9em + 2.7vw);
  padding-right: 30vh;
  line-height: 1.3;
  margin-top: calc(-0.2em - 0.5vh);
}
@media (max-width: 800px) {
  .gedicht {
    padding-right: 5vh;
    width: auto;
  }
}
.text-body>.gedicht {
  width: 60vw;
}
#gedicht-panel {
  min-width: 0;
}
.move-marker {
  /*
  underline:
  https://css-tricks.com/styling-underlines-web/
*/
  text-shadow: -2px -2px var(--bg-color), -2px 2px var(--bg-color), 2px -2px var(--bg-color), 2px 2px var(--bg-color);
  background-size: 1px 1em;
  -webkit-box-shadow: inset 0 -0.15em var(--bg-color), inset 0 -0.2em var(--txt-color);
  box-shadow: inset 0 -0.15em var(--bg-color), inset 0 -0.2em var(--txt-color);
  display: inline;
  line-height: 0.85;
  cursor: none;
}
main {
  left: -100%;
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 100vh
}
section {
  flex-shrink: 1;
  flex-basis: auto;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transition: all 0.8s;
  min-width: calc(1.5em + 1vw);
}
.collapse {
  flex-grow: 0.0001;
}
.collapse>.text-body {
  display: none;
}
.next-poem {
  max-width: calc(1.5em + 1vw);
}
.balken h1 {
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
}
.rotate-box {
  margin: calc(0.5em + 1vw) 0 0 0;
  transform: rotate(90deg);
}
.balken {
  width: var(--main-nav-size);
  border-left: 2px solid #fff;
  height: 100vh;
  margin-right: 10px;
  padding-left: 5px;
}
.gedicht-headline {
  border: none
}

/* Show "About" when hovering "Motion Poetry"*/

.about span {
  opacity: 0;
  transition: opacity 0.3s;
}
.about:hover>span {
  opacity: 1;
}
.text-body {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: default;
  transition: all 1s;
  /*  padding-right: 150px;*/
}

/*
Hide Scrollbar:
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
*/

.text-body::-webkit-scrollbar {
  display: none;
}
.about-site,
.diy-site {
  margin: calc(0.8em + 1vw) 0 0 0;
}


/*Display Intro on first visit*/

.intro {
  z-index: 99;
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: var(--bg-color);
}
.intro .intro-text {
  color: var(--txt-color);
  max-width: 50vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.intro svg {
  fill: none;
  stroke: url(#SVGID_1_);
  stroke-width: 300;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
  width: 100%;
  height: 100%;
}
.intro .path {
  /*  24881.9765625*/
  stroke-dasharray: 23688;
  stroke-dashoffset: 23688;
  animation: dash 17s cubic-bezier(0.645, 0.045, 0.355, 1) normal infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 23688;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*END INTRO*/


/*TOOLS*/

#hoverbox {
  cursor: none;
  pointer-events: none;
  display: none;
  position: fixed;
  border: white 2px solid;
  background: var(--bg-color);
  padding-left: 6px;
  padding-right: 5px;
  color: white;
  z-index: 99;
  font-size: calc(0.4em + 1vw);
}

/*END Tools*/


/*"Create Your own" Site*/

.diy-site {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 70vw;
}
.explainer-img {
  margin: 1%;
  width: 48%;
}
.explainer-img img {
  max-width: 100%;
  max-height: 100%;
}

/*END "Create Your own"*/

/*About Site*/

.about-site {

}

.about-site .Over-Canvas {
  position: absolute;
  top: calc(0.8em + 1vw);
    width: 70vw;
  line-height: 1.3;
}

#canvas-about {
  position: absolute;
    top: 0;
/*  cursor: url(../img/iphone-pointer.png), auto;*/
}

/*END ABout Site*/

#svgmovement {
  pointer-events: none;
}

#svgmovement>.svgbox {
  position: fixed;
    top: 0px;
  left 0px;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
}
#svgmovement>.svgbox>svg {
/*  height: 100%;*/
  width: 100%;
  display: none;
  position:absolute;
  top:50%;
  bottom:50%;
    transform:translate(0, -50%);
  
  fill: none;
  stroke: url(#SVGID_1_);
  stroke-width: 150;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
}