@media only screen and (max-width:1000px){
  #button1{
    position: fixed;
    right: 150px;
    top: 15px; 
    height: 70px;
    width: 70px;
    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;
  } 


  .links {
    height: 70px;
    width: 70px;
    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;
  }
  
  .link1{
    /* left: 15px; */
    top: 100px;
  
  
  }
  
  .link2{
    /* left: 15px; */
    top: 185px;
  
  }
  .link3{
    
    /* left: 15px; */
    top: 270px;
  }
  
  .links.active {
    left: 150px;
    background-color:rgba(154, 18, 179, 1) !important;
    
  }

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

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


  #content1 {
    background: none;
    grid-area: content1;
    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: 17px;
    font-weight: 200;
    line-height: 25px;
    text-align: left;
    
  }
  
  #content2 {
    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: 17px;
    font-weight: 200;
    line-height: 25px;
    text-align: left;
  }
  
  #content3 {
    background: none;
    grid-area: content3;
    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: 17px;
    font-weight: 200;
    line-height: 25px;
    text-align: left;
  }

.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: 35px;
  font-weight: 200;
  line-height: 30px;
  text-align: left;

}
  
.cubetitle{

  background-position: center;
  background-repeat: no-repeat; 
  padding: 10px;
  text-align: left;
  font-size: 35px;
  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: 17px;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 500;  
  color: white;
  background-color: black;

}

#cube1 {
  width: 30vh;
  height: 30vh;
  perspective: 40000px;
  z-index: 15;
  position: absolute;
  right: 10vw;
  z-index: -800;
}

#cube2 {
  width: 30vh;   
  transform-style: preserve-3d; 
  animation: rotate 15s linear infinite;
}

#cube2 div {
  position: sticky; 
  width: 30vh;
  height: 30vh;
  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: 30vh;
  height: 30vh;
  perspective: 40000px;
  z-index: 15;
  position: absolute;
  right: 10vw;
  z-index: -800;
  animation-play-state: paused;
}

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

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



 @media only screen and (max-width:570px){

  #title {
    background: none;
    padding: 10px;
    color:white;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-size: 4vh;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
    position: fixed;
    top: 40px;
    right: 12vh;
    z-index: 9; 
  }
  #more {
    background: none;
    padding: 10px;
    color:white;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-size: 3.8vh;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
    position: fixed;
    top: 30vh;
    left: -50px;
    transform: rotate(90deg);
    z-index: -1000; 
  }
  
  .paragraph{
    background-color:white;
    padding: 10px;
    height: 40vh;
    width: 50vh;
    position: fixed;
    bottom:10vh;
    left: 5.5px;
    overflow: auto;
  }

  #button1{
    position: fixed;
    right: 150px;
    top: 15px; 
    height: 60px;
    width: 60px;
  }

  .links {
    height: 60px;
    width: 60px;
  }

}}