body {
  position: relative;
  background-color: #98C2DB;
  background-image: url(imgs/star-10.png);
}


.sticky-note {
  position: absolute;
}

/* Tall one on the right */
.sticky-note1 {
  top: 70px;
  right: 150px;
  rotate: calc(2deg);
}

/* Small one, left & higher */
.sticky-note2 {
  top: 70px;
  right: 570px;
  rotate: calc(-2deg);
}

/* image */
.sticky-note img {
  display: block;
}

/* text overlay */
.note-text {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #0e4e74;
  font-size: 16px;
  font-weight: bold;
  
}
.sticky-note1 .note-text {
  padding-top: 80px;
  padding-right: 60px;
  padding-bottom: 145px;
  padding-left: 40px;
}

.sticky-note2 .note-text {
  padding-top: 80px;
  padding-right: 60px;
  padding-bottom: 120px;
  padding-left: 40px;
  font-size: smaller;
}

.cooltext{
    position: absolute;
    left: 850px;
}

.bubble {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #d5ead0;
  cursor: grab;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: Arial, sans-serif;
  z-index: 1000;
}

.bubble-text {
  color: #422d11;
  font-size: 16px;
  font-weight: bold;
  padding-left: 20px;

  opacity: 0; 
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.bubble.show-text .bubble-text {
  opacity: 1;
}

#bubble2 { top: 315px; left: 650px; }
#bubble1 { top: 250px; left: 250px; }

#bubble1{
    border-radius: 50%;
    border: solid #692562;
    background-color: #e8cae5;
    
}

#bubble2{
    border-radius: 5px;
    rotate: calc(2deg);
    border: solid #173a17;
}

.icecream {
  position: absolute;
  left: 1220px;
  bottom: 45px;
  z-index: 50;
}