/*cursor: url(hatPinBubblePopper-Cursor.png), auto;
*/

body{
  z-index: 10000;
  /*cursor: url("images/hatPinBubblePopper-Cursor");*/
}


.bodyStart{
  background-image: url("images/bubbleBkgrd3blue.jpg");
  background-size: cover;
}

.bodyBub{
  background-image: url("images/bubbleBkgrd.jpg");
  background-size: cover;
  margin: 0
  padding 0;
  overflow: hidden;
}

.bodyEndFirstGame{
  background-image: url("images/bubbleEndBkgrd3.jpeg");
  background-size: cover;
}
h1{
  font-size: 40pt;
  font-weight: bolder;
  text-align: center;
}
.gameIntro {
  text-align: center;
}
.instructions, .startBtn{
  font-size: 20pt;
  font-weight: bold;
  text-align: center;
}
.startBtn {
  font-weight: bold;
  color: yellow;
}
.startBtn2 {
  font-weight: bold;
  color: black;
  font-size: 15pt;
  height: 30px;
  width: 85px;
}

.inputTxt {
  height: 30px;
  width:150px;
  font-size: 20pt;
  font-weight: bold;
  text-align: center;
}

.gameStart {
  display:flex;
}

.bubble {
  height: 75px;
  width: 75px;
   display:inline-block;
  background-color: black;
  /*#75FFC0*/;
  border-radius: 50%;
  margin: 0;
  top: 0;
  left: 0;
  background-image: url("images/bubbleBlueClear1.jpeg");
  background-size: cover;
  /*background: radial-gradient(circle at 50px 50px, white, #66b0ff, white, gray);*/
  opacity: .8;
  position: relative;
  /*animation: bubFloat 25s infinite;*/
  transform-origin: top;
  border-bottom: 5px solid pink;
  border-top: 5 px solid blue;
}

.bubble2 {
  height: 35px;
  width: 35px;
  background-color: black;
  /*#75FFC0*/;
  border-radius: 50%;
  margin: 0;
  top: 0;
  left: 0;
  background-image: url("images/bubbleBlueClear1.jpeg");
  background-size: cover;
  background: radial-gradient(circle at 50px 50px, white, #66b0ff, white, gray);
  opacity: .7;
  position: relative;
  animation: bubFloat2 40s infinite ;
  transform-origin: top;
  border-bottom: 5px solid pink;
  border-top: 5 px solid blue;
}

@keyframes bubFloat {
    0%       { transform: translatey(-100px) transform:translatex(-150px) }
    100%     { transform: rotate(630deg)  translatey(500px) }
}
@keyframes bubFloat2 {
    0%       { transform: translatey(0px)  }
    100%     { transform: rotate(600deg)  translatey(1000px) }
}

.splash{
  background-image: url("images/splash2.jpeg");
  height: 75px;
  width: 75px;
  position: relative;
 /* border-radius: 50%;*/
  animation: bubFloat 25s infinite;
  background-size: cover;
}
/*This is my inital attempt to vary my bubble styling*/
.bubbleOut {
  transform: scale(1.5, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: center;
  background-color: #66b0ff;
  display: relative;
  background: radial-gradient(circle at 125px 125px, white, gray);
  margin: 0;
}
.scoreTally{
  width: 150px;
  height: 50px;
  border: 3px solid aqua;
  color: yellow;
  font-size: 16pt;
  padding: 3px;
  margin-left: 10px;
  margin-right: 50px;
  flex-direction: row;
  flex: 4;
}
.timer {
  margin-left: 10px;
  margin-right: 50px;
  width: 100px;
  height: 50px;
  border: 3px solid #33FFFC;
  color: yellow;
  font-size: 16pt;
  padding: 3px;
  flex-direction: row;
  flex: 2;

}
.player1{
  margin-left: 10px;
  margin-right: 1px;
  width: 100px;
  height: 50px;
  border: 3px solid aqua;
  color: yellow;
  font-size: 16pt;
  padding: 3px;
  flex-direction: row;
  flex: 1;
}


/*.gameEnd {
text-align: center;
}*/
.congrats{
  width: 700px;
  height: 50px;
  margin-top: 75px;
  margin-left: 400px;
  color: orange;
  font-size: 50pt;
  padding: 3px;
  z-index: 50000;
  text-align: center;
}

  .youLost {
  width: 700px;
  height: 50px;
  margin-top: 75px;
  margin-left: 400px;
  color: red;
  font-size: 30pt;
  padding: 3px;
  z-index: 50000;
  text-align: center;
}
.replayBtn {
  margin-top: 120;
  font-weight: bold;
  color: black;
  font-size: 30pt;
  height: 50px;
  width: 300px;
  margin-left:00;
  z-index: 50000
}