@keyframes pop {
    from{
        transform: scale(1.75);
        opacity: 1;
    }
    to{
        transform: scale(1.75);
        opacity: 0;
    }
}

@keyframes appear{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

body{

    margin: 0;
     height: 100%; 
     overflow: hidden

    padding-top: 3.5%;

    font-family: 'Elsie', cursive;
    background-color: black;

}

p{


    font-family: 'Reenie Beanie', sans-serif;
    font-size: 18pt;
    color:black;
    font-weight: bold;


}

.dot {

  background-color: #57068c; /*nyu purple*/
  border-radius: 50%;
  opacity: 0;
}

#pbutton{

    position: absolute;
    top: 65%;
    left: 51%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: pointer;
    background-color: black;
    border: 2px solid black; 
      color: white;
    opacity: 0.7;
    padding: 0px 120px;
    height: 40px;
    margin: auto;
       display: inline-block;

}

#pbutton:hover {
  background-color: #57068c; /*nyu purple*/
 border: 2px solid #57068c; 
  color: white;
}

#button_text{

     position: relative;
     top: -30%;
     left: -200%;
     max-width: 10px;

   

}

#text{
  position: absolute;
  top: 55%;
  left: 51%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    font-size: 12pt;
    font-family: 'Montserrat', sans-serif;
      font-weight: normal;



}

#box{
    background-color: blue;
}

/* for main button  */

#b0{
  position: absolute;
  text-align: center;
  top: 35%;
  left: 51%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  z-index: 10;

}

#main{
    width: 275px;


}


#bubbles{
    padding-top : 5%;
}
/* for bubble 1 */

#b1{
    /* padding-top: -10%; */
    position: relative;
    display: inline-block;
}

#image1{
    width: 200px;
}

#bubble1{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
    
}

#circle1{
    height: 110px;
    width: 110px;
    position: absolute;
    top: 48%;
    left: 51%;
    transform: translate(-50%,-50%);

}


#label1{
    position: absolute;
    top: 40%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text1{
    opacity: 0;
}

#bubble1:hover{
    transform: scale(1.5)
}

#bubble1:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}


/* for bubble 2 */
#b2{
    position: relative;
    /* padding-top: 10%; */
    display: inline-block;
}

#image2{
    width: 250px;
}

#bubble2{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
    
}

#circle2{
    height: 133px;
    width: 133px;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%,-50%);

}


#label2{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text2{
    opacity: 0;
}

#bubble2:hover{
    transform: scale(1.5)
}

#bubble2:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}


/* for bubble 3 */
#b3{
    position: relative;
    padding-left: 40%;
    display: inline-block;

}

#image3{
    width: 275px;
}

#bubble3{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;

}

#circle3{
    height: 150px;
    width: 150px;
    position: absolute;
    top: 49%;
    left: 52%;
    transform: translate(-50%,-50%);

}


#label3{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text3{
    opacity: 0;
}

#bubble3:hover{
    transform: scale(1.5)
}

#bubble3:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);

}


/* for bubble 4 */

#b4{
    position: relative;
    /* display: inline-block; */

}

#image4{
    width: 230px;
}

#bubble4{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
        
}

#circle4{
    height: 128px;
    width: 128px;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%,-50%);
}



#label4{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text4{
    opacity: 0;
}

#bubble4:hover{
    transform: scale(1.5)
}

#bubble4:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}

/* for bubble 5 */

#b5{
    position: relative;
    padding-left: 35%;
    display: inline-block;
}

#image5{
    width: 190px;
}

#bubble5{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
        
}

#circle5{
    height: 103px;
    width: 103px;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%,-50%);

}


#label5{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text5{
    opacity: 0;
}

#bubble5:hover{
    transform: scale(1.5)
}

#bubble5:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}

/* for bubble 6 */

#b6{
    position: absolute;
    padding-left: 30%;
    bottom: 25%;
    right: 7%;
    display: inline-block;
}

#image6{
    width: 200px;
}

#bubble6{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
        
}

#circle6{
    height: 108px;
    width: 108px;
    position: absolute;
    top: 48%;
    left: 51%;
    transform: translate(-50%,-50%);
}


#label6{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text6{
    opacity: 0;
}

#bubble6:hover{
    transform: scale(1.5)
}

#bubble6:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}

/* for bubble 7 */

#b7{
    position: absolute;
    display: inline-block;
    padding-left: 10%;
}

#image7{
    width: 240px;
}

#bubble7{
    display: inline-block;
    position: relative;
    transition: all ease;
    outline: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
        
}

#circle7{
    height: 130px;
    width: 130px;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%,-50%);

}


#label7{
    position: absolute;
    top: 43%;
    left: 52%;
    transform: translate(-50%,-50%);
}

#text7{
    opacity: 0;
}

#bubble7:hover{
    transform: scale(1.5)
}

#bubble7:active{
    animation: pop 1s cubic-bezier(0.16, 0.87, 0.48, 0.99);
}