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



div.buttoninboble{
    position: relative;
    top: 60px;
    right: 100px;

    }

#buttoninboble2{
    right:160px;
}

#buttoninboble3{
    right:160px;
} 
#buttoninboble4{
    right:160px;
} 
#buttoninboble5{
    right:160px;
}  

#buttonplay{
        cursor: pointer;
        background: none;
        box-sizing: border-box;
        padding:0;
        width: 74px;
        height: 74px;
        border-width: 37px 0px 37px 74px;
        border-color: transparent transparent transparent white;
        display: inline;
}

#buttonplayall1, #buttonplayall2, #buttonplayall3, #buttonplayall4{
    cursor: pointer;
    background: none;
    box-sizing: border-box;
    padding:0;
    width: 74px;
    height: 74px;
    border-width: 37px 0px 37px 74px;
    border-color: transparent transparent transparent white;
    display: inline;
    
}




#buttonplay2{
    cursor: pointer;
    background: none;
    box-sizing: border-box;
    padding:0;
    width: 74px;
    height: 74px;
    border-width: 37px 0px 37px 74px;
    border-color: transparent transparent transparent white;
    display: none;
}


#buttonplay3{
    cursor: pointer;
    background: none;
    box-sizing: border-box;
    padding:0;
    width: 74px;
    height: 74px;
    border-width: 37px 0px 37px 74px;
    border-color: transparent transparent transparent white;
    display: none;
}



#buttonpause {
    display: none;
    cursor: pointer;
    z-index: 1;
    background: none;
    width: 60px;
    height: 60px;
    border-style: solid;
    border-width: 37px;
    border-color: white;
    border-style: double;
    border-width: 0px 0px 0px 40px;
  }

 

  #buttonpause2 {
    display: none;
    cursor: pointer;
    z-index: 1;
    background: none;
    width: 60px;
    height: 60px;
    border-style: solid;
    border-width: 37px;
    border-color: white;
    border-style: double;
    border-width: 0px 0px 0px 40px;
  }

  #buttonpause3 {
    display: none;
    cursor: pointer;
    z-index: 1;
    background: none;
    width: 60px;
    height: 60px;
    border-style: solid;
    border-width: 37px;
    border-color: white;
    border-style: double;
    border-width: 0px 0px 0px 40px;
  }

.parallax{
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
.musicbubbles{
    margin-top: 100px;
    padding-left: 30px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    transform: translateZ(0);
}

.musicbubbles div{
    height: 200px;
}
.musicbubbles .rhytm{
    position: absolute;
    display: flex;
   

    position: relative;
    width: 200px;
    
}
.musicbubbles .rhytm img:hover{
    width:300px;
    height:300px;
    
    
}
.frog {
    
    /* border: 1px solid black; */
    position: relative;
    width: 150vh;
    height: 90vh;
    margin-top: 1700px;

    
    
   
    /* overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 1px;
    perspective: 100px;
    font-size: 200%;
    transform: translateX(25%); */
    /* transform: translate3d(700px, 0, -800px) rotateY(30deg); */
}


.frog .part {

   width: 100vh;
    position: absolute;
   
    

    /* padding: 100vh 0; */
    /* transform: translateZ(0px); */
}



.part:nth-child(1) {
    transform: translateZ(-1px) scale(2);
}

.part:nth-child(2) {
    transform: translateZ(-2px) scale(3);
}

.part:nth-child(3) {
    transform: translateZ(-2px) scale(3);
}

.part:nth-child(4) {
    transform: translateZ(-2px) scale(3);
}

.part:nth-child(5) {
    transform: translateZ(-1px) scale(2);
}

.part:nth-child(6) {
    transform: translateZ(-1px) scale(2);
}

.part:nth-child(7) {
    transform: translateZ(-2px) scale(3);
}

.part:nth-child(8) {
    transform: translateZ(-3px) scale(4);
}

.part:nth-child(9) {
    transform: translateZ(-2px) scale(3);
}

.part:nth-child(10) {
    transform: translateZ(-2px) scale(3);
}

.prison{
    display: flex;
    justify-content: space-evenly; 
}

.prison > div {
   border: 1px solid black;
   background-color: black;
   box-sizing: border-box;
   width: 100px;
   height: 1500px;  
}

#prison1{
    margin-top: 100px;
    height: 1900px;
}
#prison2{
    margin-top: 500px;
}
#prison3{
    margin-top: 50px;
    height: 1950px;
}
#prison4{
    margin-top: 200px;
    height: 1800px;
}
#prison5{
    
    height: 2000px;
}

.allplay{
    height: auto;
    display: inline;
    margin-left:350px;
    
    
}

.overlappingplay{
    margin: 20px;
    width: 200px;
    height: 200px;
    display: inline-block;
    margin-top: 200px;

}


   .buttoninboble_all{
       
        position: relative;
        cursor: pointer;
        background: none;
        box-sizing: border-box;
        padding:0;
        width: 74px;
        height: 74px;
        border-width: 37px 0px 37px 74px;
        border-color: transparent transparent transparent white;
        display: inline;
        bottom:140px;
        left:65px;
}