* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  font-family: 'Crimson Text', serif;
  overflow:hidden;
  background: #e3e3e3;
  color: #525252;
}


/* -------------------------------------------------- 
INDEX - END
-----------------------------------------------------*/

body#index {
  overflow:visible;
  min-height:3000px;
}

.text {
  width: 70%;
  margin: 0 auto 0 auto;
}

.text p {
  font-size: 3em;
  margin-bottom: 0.5em;
}
.title {
  margin-top: 40px;
  margin-bottom: 100px;
}
.title h1 {
  font-size: 3em;
  font-weight: normal;
}
.title h2 {
  font-size: 1em;
  font-weight: normal;
}
#mark1-area{
  align-items:center;
  display:flex;
  flex-direction:row;
  min-height:100vh;
  justify-content:center;
  text-align:center;
  max-height:100%;
}

#mark1 {
  display: block;
  width: 100px;
  height: 100px;
  max-width:100%;
  border-radius: 50%;
  background: 
  radial-gradient(
    circle at 30% 30%,
    #757575,
    #000000
  );
}
#index .dot {
  height: 20px;
  width: 20px;
}
#index .dot:hover {
  background: 
  radial-gradient(
    circle at 30% 30%,
    #757575,
    #000000
  );
  cursor:text;
}
body#end {
  overflow:visible;
}
#mark-end {
  display: block;
  width: 100px;
  height: 100px;
  max-width:100%;
  background-image:url(the-snail.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index:99999;
  filter: drop-shadow(0.25rem 0.25rem 0.3rem rgba(0, 0, 0, 0.5));
  animation: end 90s infinite normal;
}
@keyframes end {
  100% {transform: rotate(360deg);}
}

/* -------------------------------------------------- SNAIL CIRCLE -----------------------------------------------------*/
.snail {
  width: 40px;
  height:40px;
  position:fixed;  
  background-image:url(the-snail.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index:99999;
  filter: drop-shadow(0.25rem 0.25rem 0.3rem rgba(0, 0, 0, 0.5));

}
.circle {
  width: 25px;
  height:25px;
  background: 
    radial-gradient(
      circle at 30% 30%,
      #757575,
      #000000
    );
  position:fixed;  
  z-index:99999;
  border-radius: 50%;
}
.circle:hover {
  background: 
    radial-gradient(
      circle at 30% 30%,
      #4c4c4c,
      #000000
    );
}
.tr {
  top:0; right:0;  
  rotate: 210deg;
}
.tl {
  top:0; left:0;  
  rotate: 210deg;
}
.tlm {
  top:0; left:50%;  
  rotate: -210deg;
}
.tm {
  top:50%; left:0%;  
  rotate: -210deg;
}
.br {
  bottom:0; right:0;  
  rotate: -60deg;
}
.bl {
  bottom:0; left:0;  
  rotate: 0;
}
.blm {
  bottom:0; left:50%;  
  rotate: 0deg;
}




/* -------------------------------------------------- MARKS-----------------------------------------------------*/


@keyframes pulsate1 {
  0% {opacity: 0.5; transform: translate(0px,0px);}
  33% {opacity: 0.7; transform: translate(4px,-4px);}
  66% {opacity: 0.5; transform: translate(7px,7px);}
}
@keyframes pulsate2 {
  0% {opacity: 0.7; transform: translate(-4px,4px);}
  70% {opacity: 0.5; transform: translate(8px,-8px);}
  100% {opacity: 0.7; transform: translate(0px,0px);}
}
@keyframes pulsate3 {
  0% {opacity: 0.5; transform: translate(0px,0px);}
  30% {opacity: 0.7; transform: translate(-4px,2px);}
  100% {opacity: 0.5; transform: translate(6px,-6px);}
}
@keyframes pulsate4 {
  0% {opacity: 0.7; transform: translate(4px,-7px);}
  50% {opacity: 0.5; transform: translate(-2px,2px);}
  100% {opacity: 0.7; transform: translate(6px,6px);}
}
@keyframes pulsate5 {
  0% {opacity: 0.5; transform: translate(3px,3px);}
  70% {opacity: 0.7; transform: translate(-6px,0px);}
  100% {opacity: 0.5; transform: translate(7px,-3px);}
}
@keyframes pulsate6 {
  0% {opacity: 0.7; transform: translate(0px,-5px);}
  20% {opacity: 0.5; transform: translate(-2px,0px);}
  100% {opacity: 0.7; transform: translate(6px,-6px);}
}
@keyframes pulsate7 {
  0% {opacity: 0.5; transform: translate(0px,-3px);}
  70% {opacity: 0.7; transform: translate(6px,4px);}
  100% {opacity: 0.5; transform: translate(2px,-6px);}
}


ul#elements li {
list-style-type:none;
font-size: 10px;
width: 20%;
height:fit-content;
position: absolute; 
animation-iteration-count:infinite;
animation-direction: alternate;
opacity: 0.5;
transform: translate(0px,0px);
}
ul#elements li:hover {
opacity:1;  
cursor:pointer;
}


.box1 {
  scale:1;
  transition: all 2s;
  left: 10%;
  top: 10%;
  animation: pulsate1 2s ease-out;
}
.box1:hover {
  scale:4;
  animation:none;
  transform-origin: left top;
  z-index: 99;
}

.box2 {
  scale:1;
  transition: all 2s;
  right: 10%;
  top: 15%;
  animation: pulsate2 3s ease-out;
}
.box2:hover {
  scale:4;
  animation:none;
  transform-origin: right top;
  z-index: 99;
}

.box3 {
  scale:1;
  transition: all 2s;
  left: 30%;
  top: 25%;
  animation: pulsate3 2s ease-out;
}
.box3:hover {
  scale:4;
  animation:none;
  transform-origin: 40% 50%;
  z-index: 99;
}

.box4 {
  scale:1;
  transition: all 2s;
  right: 20%;
  bottom: 25%;
  animation: pulsate4 4s ease-out;
}
.box4:hover {
  scale:4;
  animation:none;
  transform-origin: 80% 100%;
  z-index: 99;
}

.box5 {
  scale:1;
  transition: all 2s;
  left: 15%;
  bottom: 30%;
  animation: pulsate5 3s ease-out;
}
.box5:hover {
  scale:4;
  animation:none;
  transform-origin: 10% 80%;
  z-index: 99;
}

.box6 {
  scale:1;
  transition: all 2s;
  left: 35%;
  bottom: 50%;
  animation: pulsate6 3s ease-out;
}
.box6:hover {
  scale:4;
  animation:none;
  transform-origin: 50% 50%;
  z-index: 99;
}
.box7 {
  scale:1;
  transition: all 2s;
  right: 20%;
  top: 40%;
  animation: pulsate7 2s ease-out;
}
.box7:hover {
  scale:4;
  animation:none;
  transform-origin: 80% 50%;
  z-index: 99;
}
.dot {
  width: 8px;
  height: 8px;
  background: 
  radial-gradient(
    circle at 30% 30%,
    #757575,
    #000000
  );
  border-radius: 50%;
  display:inline-block;
  transition: all 0.5s;
  vertical-align:middle;
}
.dot:hover {
  background: 
  radial-gradient(
    circle at 30% 30%,
    #4c4c4c,
    #000000
  );
}



/* -------------------------------------------------- MARK 1 -----------------------------------------------------*/
.marqueebox {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top:0;
}
/*.marqueebox:nth-of-type(2) {top:calc(0em + 0.5em);}*/
.marqueebox:nth-of-type(2) {top:calc(1em * 0.5);}
.marqueebox:nth-of-type(3) {top:calc(2em * 1);}
.marqueebox:nth-of-type(4) {top:calc(3em * 1.5);}
.marqueebox:nth-of-type(5) {top:calc(4em * 2);}
.marqueebox:nth-of-type(6) {top:calc(5em * 2.5);}
.marqueebox:nth-of-type(7) {top:calc(6em * 3);}
.marqueebox:nth-of-type(8) {top:calc(7em * 3.5);}
.marqueebox:nth-of-type(9) {top:calc(8em * 4);}
.marqueebox:nth-of-type(10) {top:calc(9em * 4.5);}
.marqueebox:nth-of-type(11) {top:calc(10em * 5);}
.marqueebox:nth-of-type(12) {top:calc(11em * 5.5);}
.marqueebox:nth-of-type(13) {top:calc(12em * 6);}
.marqueebox:nth-of-type(14) {top:calc(13em * 6.5);}
.marqueebox:nth-of-type(15) {top:calc(14em * 7);}
.marqueebox:nth-of-type(16) {top:calc(15em * 7.5);}
.marqueebox:nth-of-type(17) {top:calc(16em * 8);}
.marqueebox:nth-of-type(18) {top:calc(17em * 8.5);}
.marqueebox:nth-of-type(19) {top:calc(18em * 9);}
.marqueebox:nth-of-type(20) {top:calc(19em * 9.5);}


#mark1b {
  font-size: 8px;
}
.track1b {
  font-size: 1em;
  animation: marquee 60s linear infinite;
}
.track2b {
  font-size: 2em;
  animation: marquee 70s linear infinite;
}
.track3b {
  font-size: 3em;
  animation: marquee 50s linear infinite;
}
.track4b {
  font-size: 4em;
  animation: marquee 20s linear infinite;
}
.track5b {
  font-size: 5em;
  animation: marquee 40s linear infinite;
}
.track6b {
  font-size: 6em;
  animation: marquee 30s linear infinite;
}
.track7b {
  font-size: 7em;
  animation: marquee 40s linear infinite;
}
.track8b {
  font-size: 8em;
  animation: marquee 20s linear infinite;
}
.track9b {
  font-size: 9em;
  animation: marquee 80s linear infinite;
}
.track10b {
  font-size: 10em;
  animation: marquee 70s linear infinite;
}
.track11b {
  font-size: 11em;
  animation: marquee 50s linear infinite;
}
.track12b {
  font-size: 12em;
  animation: marquee 40s linear infinite;
}
.track13b {
  font-size: 13em;
  animation: marquee 30s linear infinite;
}
.track14b {
  font-size: 14em;
  animation: marquee 20s linear infinite;
}
.track15b {
  font-size: 15em;
  animation: marquee 40s linear infinite;
}
.track16b {
  font-size: 16em;
  animation: marquee 20s linear infinite;
}
.track17b {
  font-size: 17em;
  animation: marquee 30s linear infinite;
}
.track18b {
  font-size: 18em;
  animation: marquee 20s linear infinite;
}
.track19b {
  font-size: 19em;
  animation: marquee 40s linear infinite;
}
.track20b {
  font-size: 20em;
  animation: marquee 20s linear infinite;
}


@keyframes marquee {
  from { transform: translateX(0);}
  to { transform: translateX(-50%);}
}
/* -------------------------------------------------- MARK 2 -----------------------------------------------------*/

.environment {
  width: 100%;
  height: 100vh;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: center 60%;
}

.section {
  width: 400px;
  position: absolute;
}
h2 {
  font-size: 2em;
  font-weight: normal;
}

#item1 {
  z-index:30;
  opacity:1;
  transform: translate3d( 0, 0, -2000px );
  animation: zoomin1 10s linear 0s forwards;
}
@keyframes zoomin1 {
  0% {transform: translate3d( 0, 0, -2000px );}
  50% {opacity:1;}
  100% {transform: translate3d( 10px, 10px, 1000px );opacity:0.2;}
}

#item2 {
  opacity:0.3;
  transform: translate3d( 0, 0, -2000px );
  animation: zoomin2 4s linear 6s forwards;
}
@keyframes zoomin2 {
  from {transform: translate3d( 0, 0, -2000px );}
  50% {opacity:1;}
  to {transform: translate3d( -30px, -30px, 1000px );opacity:0;}
}

#item3 {
  opacity:0.3;
  transform: translate3d( 0, 0, -3000px );
  animation: zoomin3 3s linear 9s forwards;
}
@keyframes zoomin3 {
  from {transform: translate3d( 0, 0, -3000px );}
  50% {opacity:1;}
  to {transform: translate3d( 50px, 50px, 1000px );opacity:0;}
}

#item4 {
  opacity:0.3;
  transform: translate3d( 100px, 100px, -3000px );
  animation: zoomin4 4s linear 12s forwards;
}
@keyframes zoomin4 {
  from {transform: translate3d( 100px, 100px, -3000px );}
  50% {opacity:1;}
  to {transform: translate3d( 0px, 0px, 1000px );opacity:0;}
}

#item5 {
  opacity:0.3;
  transform: translate3d( -300px, -300px, -3000px );
  animation: zoomin5 4s linear 15s forwards;
}
@keyframes zoomin5 {
  from {transform: translate3d( -300px, -300px, -3000px );}
  50% {opacity:1;}
  to {transform: translate3d( 100px, 100px, 1000px );opacity:0;}
}

#item6 {
  opacity:0.3;
  transform: translate3d( 0, 0, -3000px );
  animation: zoomin6 4s linear 18s forwards;
}
@keyframes zoomin6 {
  from {transform: translate3d( 0, 0, -3000px );}
  50% {opacity:1;}
  to {transform: translate3d( 50px, 50px, 1000px );opacity:0;}
}

#item7 {
  opacity:0.3;
  transform: translate3d( 100px, 100px, -3000px );
  animation: zoomin7 3s linear 20s forwards;
}
@keyframes zoomin7 {
  from {transform: translate3d( 100px, 100px, -3000px );}
  50% {opacity:1;}
  to {transform: translate3d( 0px, 0px, 1000px );opacity:0;}
}

#item8 {
  opacity:0.3;
  transform: translate3d( 0, 0, -2000px  );
  animation: zoomin8 8s linear 17s forwards;
}
@keyframes zoomin8 {
  0% {transform: translate3d( 0, 0, -2000px );}
  50% {opacity:1;}
  100% {transform: translate3d( 20px, 20px, 1000px );opacity:0.2;}
}

#item9 {
  opacity:0.3;
  transform: translate3d( 0px, 0px, -2000px );
  animation: zoomin9 10s linear 24s forwards;
}
@keyframes zoomin9 {
  0% {transform: translate3d( 0px, 0px, -2000px );}
  50% {opacity:1;}
  100% {transform: translate3d( 0px, 0px, 1000px );opacity:0.2;}
}

#item10 {
  opacity:0.3;
  transform: translate3d( 10px, 10px, -2000px );
  animation: zoomin10 15s linear 28s forwards;
}
@keyframes zoomin10 {
  0% {transform: translate3d( 10px, 10px, -2000px );}
  50% {opacity:1;}
  100% {transform: translate3d( 0px, 0px, 500px );opacity:1;}
}


#item1:hover, 
#item2:hover, 
#item3:hover, 
#item4:hover, 
#item5:hover, 
#item6:hover, 
#item7:hover, 
#item8:hover, 
#item9:hover, 
#item10:hover
{
  animation-play-state: paused;
  cursor:pointer;
}






/* -------------------------------------------------- MARK 3 -----------------------------------------------------*/

.gallery {
	position: absolute;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.cards {
	position: absolute;
	width: 50%;
	height: 40vh;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cards li {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 60%;
	height: 40vh;
	position: absolute;
	top: 0;
	left: 0;
  display: flex;
  align-items:center;
  justify-content: center;
}

.actions {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
}

button {
  display:inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  cursor: pointer;
  font-size: 13px;
  display: none;
}

button:hover {
  background: #57a818;
  color: #ffffff;
  text-decoration: none;
}



/* -------------------------------------------------- MARK 4 -----------------------------------------------------*/

body#mark4 {
  width: 100%;
  height: 100vh;
  position: relative;
}

.scene1 {
  max-width:50em;
  perspective:50em;
  position: absolute;
  top: 10%;
  left: 5%;
}
.square1 {
  width:100%;
  height:100%;
  font-size: 1.5em;
  transform: rotateY(60deg);
  transition: all 4s;
  transform-origin: left top;
  opacity:0.5;
}
.square1:hover {
  transform: rotateY(-40deg);
  cursor:pointer;
  opacity:1;
}
.scene2 {
  max-width:20em;
  perspective:20em;
  position: absolute;
  top: 25%;
  left: 25%;
}
.square2 {
  width:100%;
  height:100%;
  font-size: 2em;
  transform: rotateY(60deg);
  transition: all 4s;
  transform-origin: right top;
  opacity:0.3;
}
.square2:hover {
  transform: rotateY(-30deg);
  cursor:pointer;
  opacity:1;
}
.scene3 {
  max-width:40em;
  perspective:40em;
  position: absolute;
  top: 15%;
  right: 5%;
  transform: rotateX(0deg);
}
.square3 {
  width:100%;
  height:100%;
  font-size: 1.5em;
  transform: rotateY(-70deg);
  transition: all 4s;
  transform-origin: right top;
  opacity:0.3;
}
.square3:hover {
  transform: rotateY(30deg);
  cursor:pointer;
  opacity:1;
}
.scene4 {
  max-width:40em;
  perspective:40em;
  position: absolute;
  bottom: 20%;
  left: 15%;
  
}
.square4 {
  width:100%;
  height:100%;
  font-size: 1.5em;
  transform: rotateY(90deg);
  transition: all 4s;
  transform-origin: 0 0;
  opacity:0.5;
}
.square4:hover {
  transform: rotateY(-40deg);
  cursor:pointer;
  opacity:1;
}
.scene5 {
  max-width:40em;
  perspective:40em;
  position: absolute;
  bottom: 25%;
  right: 30%;
  transform: rotateX(0deg);
}
.square5 {
  width:100%;
  height:100%;
  font-size: 2em;
  transform: rotateY(-70deg);
  transition: all 4s;
  transform-origin: right top;
  opacity:0.3;
}
.square5:hover {
  transform: rotateY(30deg);
  cursor:pointer;
  opacity:1;
}

/* -------------------------------------------------- MARK 5 -----------------------------------------------------*/



#rotate-words div {
 position:absolute;
 opacity:0;
 overflow:hidden;
 left:50%;
 top:50%;
 width:30%;
 font-size: 2em;
 animation: rotate-word 35s linear infinite 0s;
 transition: 1s ease-in-out all;
}

@keyframes rotate-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(2)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 4s; top: 20%; left: 20%;}
#rotate-words div:nth-child(3) { animation-delay: 6s; top: 0; left: 0;}
#rotate-words div:nth-child(4) { animation-delay: 8s; top: 40%; left: 40%;}
#rotate-words div:nth-child(5) { animation-delay: 12s; top: 10%; left: 10%;}
#rotate-words div:nth-child(6) { animation-delay: 14s; top: 70%; left: 0%;}
#rotate-words div:nth-child(7) { animation-delay: 16s; top: 0%; left: 20%;}
#rotate-words div:nth-child(8) { animation-delay: 18s; top: 50%; left: 0%;}
#rotate-words div:nth-child(9) { animation-delay: 20s; top: 30%; left: 50%;}
#rotate-words div:nth-child(10) { animation-delay: 22s; top: 70%; left: 70%;}
#rotate-words div:nth-child(11) { animation-delay: 24s; top: 30%; left: 30%;}
#rotate-words div:nth-child(12) { animation-delay: 26s; top: 0%; left: 70%;}
#rotate-words div:nth-child(13) { animation-delay: 28s; top: 20%; left: 60%;}



/* -------------------------------------------------- MARK 6 -----------------------------------------------------*/

main {
  width: 70%;
  height: 50vh;
  border: 0px dashed lightgrey;
  margin: 0 auto;
  position: relative;
  perspective: 800px;
  translate: -10% 0%;
}
#mark6 main div {
  width: 300px;
  font-size: 1.5em;
  display: block;
  offset-path: path('M0,0 C100,400 320,-100 300,300');
}
.d1 {
  position: absolute;
  top:20%;
  rotate: x 60deg;
  transform: rotateX(-60deg);
  animation: e 9000ms infinite alternate ease-in-out
    /*, r 4000ms infinite alternate ease-in-out*/;
}

.d2 {
  position: absolute;
  top:20%;
  left: 50%;
  rotate: x 90deg;
  transform: rotateX(-90deg);
  animation: d 5000ms infinite alternate ease-in-out
    /*, r 4000ms infinite alternate ease-in-out*/;
}

.d3 {
  position: absolute;
  top:20%;
  left: 0%;
  rotate: x -90deg;
  transform: rotateX(90deg);
  animation: d 8000ms infinite alternate ease-in-out
    /*, r 4000ms infinite alternate ease-in-out*/;
}


.d4 {
  position: absolute;
  top:20%;
  left: 60%;
  rotate: x -60deg;
  transform: rotateX(60deg);
  animation: e 9000ms infinite alternate ease-in-out
    /*, r 4000ms infinite alternate ease-in-out*/;
}



@keyframes d {
  100% {
    offset-distance: 100%;
  }
}
@keyframes e {
  100% {
    offset-distance: 50%;
  }
}
@keyframes r {
  100% {
    rotate: x 0deg;
  transform: rotateX(0deg);
  }
}


/* -------------------------------------------------- MARK 7 -----------------------------------------------------*/

#sentences li {
  list-style-type:none;
  height:fit-content;
  position: absolute; 
  }
#sentences li:hover {
  opacity:1;  
  }
.box8 {
font-size: 60px;
opacity: 0.5;
left: 0;
top: 0;
width: 70%;
transition: all 2s;
}
.box9 {
  font-size: 50px;
  opacity: 0.4;
  left: 50%;
  top: 20%;
  width: 50%;
  transition: all 2s;
}
.box10 {
  font-size: 40px;
  opacity: 0.3;
  left: 10%;
  top: 30%;
  width: 50%;
  transition: all 2s;
}
.box11 {
  font-size: 30px;
  opacity: 0.2;
  left: 50%;
  top: 50%;
  width: 50%;
  transition: all 2s;
}
.box12 {
  font-size: 20px;
  opacity: 0.1;  
  left: 0%;
  top: 80%;
  width: 50%;
  transition: all 2s;
}
.box13 {
  font-size: 10px;  
  opacity: 0.1;  
  right: 0%;
  top: 90%;
  width: 50%;
  transition: all 2s;
}
.box8:hover, .box9:hover, .box10:hover, .box11:hover, .box12:hover, .box13:hover {
  transform-origin: 0 0;
  z-index:999;
}
.drag:hover {
  cursor:grab;
}
.drag:active {
  cursor:grabbing;
}