.welcomecon {
  text-align: center;
}

.title {
  font-size: 1.3rem;
  font-weight: 700;
}

#Bubbles [fill] {
  fill: #e5e9f0;
  transition: fill 0.5s ease;
}
body.dark-mode #Bubbles [fill] {
  fill: #434c5e;
  transition: fill 0.5s ease;
}

#Shadow [fill] {
  fill: #5e81ac;
}
body.dark-mode #Shadow [fill] {
  fill: #4c566a;
}
#BackBubble [fill] {
  fill: #bf616a;
}
#girlTop [fill] {
  fill: #ebcb8b;
}
body.dark-mode #girlTop [fill] {
  fill: #3b4252;
}

#boyTop1 [fill] {
  fill: #ebcb8b;
}
#boyTop2 [fill] {
  fill: #ebcb8b;
}
body.dark-mode #boyTop1 [fill] {
  fill: #3b4252;
}
body.dark-mode #boyTop2 [fill] {
  fill: #3b4252;
}
#videoShirt [fill] {
  fill: #5e81ac;
}
body.dark-mode #videoShirt [fill] {
  fill: #2e3440;
}
#videohead {
  animation: videoGuy 1s ease-in-out infinite alternate;
  transform-origin: bottom;
  transform-box: fill-box;
}
#ytMarker1 {
  animation: marker 12s ease-in infinite;
  transform-origin: left;
  transform-box: fill-box;
}
#ytMarker2 {
  animation: marker2 12s ease-in infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

@keyframes videoGuy {
  from {
    transform: translateY(0%) translateX(0%);
  }
  to {
    transform: translateY(1%) translateX(1%);
  }
}

@keyframes marker {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(1300%);
  }
}

@keyframes marker2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(1200%);
  }
}
