html,
body {
  padding: 10px;
  /* height: 100%;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 20px;
  z-index: -100000; */
  
}
  #background-image{
  width: auto; 
  height: 120%;
  position: fixed;
  z-index: -1000;
  top: -10px;
  left: -10px;
  background-size: cover;

 }

 #myDIV1{
  height: 2000px;
  width: 120%;
  background-color: black;
  z-index: 500;
  position: fixed;
  left: -20px;
  top: -50px;
  opacity: 1;
  transition: opacity 0.5s ease-in 0.1s; 
  pointer-events: none;
 
  
}  

#myDIV1.hidden{
  opacity: 0;
  /* z-index: -1000; */
 
}

#button1{
  position: fixed;
  right: 150px;
  top: 15px; 
  height: 80px;
  width: 80px;
  border-radius: 50%;
  z-index: 600;
  margin: 20px;
  border: none; 
  background-color:rgba(154, 18, 179, 1);
  font-size: 50px;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  transition: all 0.5s ease-in-out;
  
} 
.button1right{
  right: 15px !important;
  background-color: white !important;
  transform: rotateY(180deg)rotateX(180deg);
  
} 

.button1right:hover{
  background-color:rgba(154, 18, 179, 1)!important;

}

.links {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: black;
  color:white;
  text-align: center;
  padding: 0px;
  margin: 20px;
  z-index: 10;
  position: fixed;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 20px;
  left: 15px;
  transition: all 0.8s ease-in-out;
}
.links:hover{
  background-color: rgba(154, 18, 179, 1);
  

}


.link1{
  top: 15px;
}

.link2{
  top: 100px;
}
.link3{
  top: 185px;
}

.links.active {
  left: 150px;
  background-color:rgba(154, 18, 179, 1);
  transform: rotateY(180deg)rotateX(180deg);


}

.paragraph{
	background-color:white;
  padding: 10px;
  height: 45vh;
  width: 30vw;
  position: fixed;
  bottom:60px;
  overflow: auto;
}

#content0{
  background:none;
  grid-area: content0;
}

#content1 {
  background: none;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
	padding: 20px;
  color: black;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 24px;
  font-weight: 200;
  line-height: 30px;
  text-align: left;
  
}

#content2 {
  background: none;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding: 10px;
  color: black;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 24px;
  font-weight: 200;
  line-height: 30px;
  text-align: left;
}

#content3 {
  background: none;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding: 10px;
  color: black;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 24px;
  font-weight: 200;
  line-height: 30px;
  text-align: left;
}


#title {
  background: none;
	padding: 10px;
  color:white;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 10vh;
  font-weight: 400;
  line-height: 30px;
  text-align: right;
  position: fixed;
  top: 40px;
  right: 140px;
  z-index: 10; 
}

.titlecorps{
  background: none;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  padding: 10px;
  color: black;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 48px;
  font-weight: 200;
  line-height: 30px;
  text-align: left;

}
#more {
  background: none;
	padding: 10px;
  color:white;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 8vh;
  font-weight: 400;
  line-height: 30px;
  text-align: right;
  position: fixed;
  top: 50vh;
  left: 15vw;
  transform: rotate(90deg);
  z-index: -1000;
  
}


footer{
  position: fixed;
  bottom:10px;
  left:15px;
  font-size: small;
  font-style: italic;
  color:white;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
 


}

.cubetitle{
  background-position: center;
  background-repeat: no-repeat; 
  padding: 10px;
  text-align: left;
  font-size: 50px;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 500;
  color: white;
}

.cubecorps{
  background-position: center;
  background-repeat: no-repeat; 
  padding: 10px;
  text-align: left;
  font-size: 24px;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 500;  
  color: white;
  background-color: black;

}

#cube1 {
  width: 400px;
  height: 400px;
  margin: 200px auto;
  perspective: 40000px;
  z-index: 15;
  position: absolute;
  right: 10vw;
  z-index: -800;
 
}

#cube2 {
  width: 400px;   
  transform-style: preserve-3d; 
  animation: rotate 15s linear infinite;


}

#cube2 div {
  position: sticky; /*static is fun*/
  width: 400px;
  height: 400px;
  opacity: 1;
  color: white;
}

#front {
  transform: translateZ(200px);
  background: black;
  background-position: center;
  background-repeat:no-repeat;
  overflow: auto;
}


#back {
  transform: rotateY(180deg) translateZ(200px);
  background: black;
  background-position: center;
  background-repeat: no-repeat; 
  overflow: auto;
 
}

 #backimage{
  width: 80%;
  position: fixed;
  right: 0px;
 

} 

#left {
  transform: rotateY(-90deg) translateX(-200px);
  transform-origin: left;
  background: black;
  background-position: center;
  background-repeat: no-repeat; 
  overflow: auto;
}

#right {
  transform: rotateY(90deg) translateX(200px);
  transform-origin: right;
  background: black; 
  background-position: center;
  background-repeat: no-repeat;
  overflow: auto;
}
 

@keyframes rotate {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
} 


#cube1:hover {
  width: 400px;
  height: 400px;
  margin: 200px auto;
  perspective: 40000px;
  z-index: 15;
  position: absolute;
  right: 10vw;
  z-index: -800;
  animation-play-state: paused;
 
}

#cube2:hover {
  width: 400px;   
  transform-style: preserve-3d; 
  animation: rotate 15s linear infinite;
   animation-play-state: paused;


}

#cube2 div {
  position: sticky; /*static is fun*/
  width: 400px;
  height: 400px;
  opacity: 1;
  color: white;
}

#front {
  transform: translateZ(200px);
  background: black;
  background-position: center;
  background-repeat:no-repeat;
  overflow: auto;
}


#back {
  transform: rotateY(180deg) translateZ(200px);
  background: black;
  background-position: center;
  background-repeat: no-repeat; 
  overflow: auto;
 
}

 #backimage{
  width: 80%;
  position: fixed;
  right: 0px;
 

} 

#left {
  transform: rotateY(-90deg) translateX(-200px);
  transform-origin: left;
  background: black;
  background-position: center;
  background-repeat: no-repeat; 
  overflow: auto;
}

#right {
  transform: rotateY(90deg) translateX(200px);
  transform-origin: right;
  background: black; 
  background-position: center;
  background-repeat: no-repeat;
  overflow: auto;
}
 

@keyframes rotate {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
} 



.space{
  height:70px;
}