html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: monospace;
  background: #E5BCEB;
  color: black;
  text-shadow: 2px 0 0 #FFEB42;
  overflow-y: auto;
  min-height: 100vh;
}


.crarrow1 {
  position: fixed;
  top: 10px;
  left: 10px;
}

.crarrow1 img {
  width: 210px;
  height: auto;
  display: block;
}


.tarot {
  font-family: monospace;
  background: #FFABAB;
  color: #0012AD;
  text-shadow: 1px 0 0 yellow;
  padding-top: 10%;
  padding-left: 20%;
  padding-right: 20%;
  text-align: justify;
  line-height: 1.6;
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  overflow-y: auto;
}



#scroll-space {
  height: 500vh;
  pointer-events: none;
}

#boxes-container {
  position: fixed;
  overflow: hidden;
  inset: 0;
  width: 100%;
  height: 100vh;
  touch-action: pan-y;
  z-index: 999;
}



/* BOX / BOX / BOX / BOX / BOX / BOX / BOX / BOX / BOX / BOX /BOX / BOX / BOX / BOX / BOX / BOX / BOX / BOX/ */
.box {
  position: absolute;
  z-index: 100;
  padding: 12px 16px;
  background: transparent;
  border: 3px dashed #E50581;
  display: inline-block;
  width: fit-content;
  will-change: transform;
  transform: skewX(-12deg);
  transform-origin: center;
}

.box .box-text {
  display: inline-block;
  transform: skewX(12deg);
}

.box-text {
  margin: 0;
  font-size: 35px;
  font-family: monospace;
  color: #E4FFB3;
  text-shadow: 2px 0 0 #001BBA;
}

.box-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.box:hover {
  border-color: #E4FFB3;
}

.box:hover .box-text {
  color: #001BBA;
  text-shadow: 2px 0 0 #E50581;
}





.intro-box {
  top: 100px;  
  right: 180px;
}
  
.motivation-box {
  top: 320px; 
  right: 420px;
}

.projekte-box {
  top: 600px; 
  right: 700px;
}

.tarot-box {
  top: 800px; 
  right: 250px;
}

.gedanken-box {
  top: 1000px; 
  left: 120px;
}





/* SEA LIFE  / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE / SEA LIFE*/

.floatings {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}


.anemone00blue {
 position: absolute;
 width: 700px;
 top: 300px;
 left: -130px; 
}
 
 .anemone00000 {
 position: absolute;
 width: 500px;
 top: 2500px;
 right: 80px;
 }
 
 .seaweed1 {
 position: absolute;
 width: 700px;
 top: -90px;
 left: 10px;
 }
 
 .anemoneroots3 {
 position: absolute;
 width: 800px;
 top: 100px;
 right: -180px;
 }
 
    .snailx {
 position: absolute;
 width: 800px;
 top: 870px;
 right: -35px;
 }
 
 
  .sealeaf4 {
 position: absolute;
 width: 1200px;
 top: 1000px;
 right: 300px;
 z-index: 1;
 }