<div class="stage">
  <div class="boyfriend">
    <div class="head"></div>
    <div class="torso"></div>
    <div class="left-arm"></div>
    <div class="right-arm"></div>
    <div class="legs"></div>
  </div>
</div>

/* Base styling for the stage and character container */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #383e58; /* FNF-style dark background */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boyfriend {
  position: relative;
  width: 200px;
  height: 300px;
  animation: idle-bounce 1.5s ease-in-out infinite;
}

/* Define the idle bounce animation */
@keyframes idle-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/*
 * Creating the character's body parts
 * using pseudo-elements and CSS shapes.
 */
.head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 90px;
  background-color: #64d1f2; /* Light blue head */
  border-radius: 50%;
  border: 5px solid black;
}

.head::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 40px;
  background-color: #1f375f; /* Blue hat */
  border-radius: 20px 20px 0 0;
  border: 5px solid black;
  border-bottom: none;
}

.head::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 20px;
  background-color: #fff; /* White visor */
  border: 3px solid black;
  border-radius: 5px;
}

.torso {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 110px;
  background-color: #3b82f6; /* Blue t-shirt */
  border-radius: 10px;
  border: 5px solid black;
}

/* Use a pseudo-element for the microphone */
.right-arm::before {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -50px;
  width: 20px;
  height: 80px;
  background-color: #9ca3af; /* Silver mic */
  border: 3px solid black;
  transform-origin: top center;
  transform: rotate(20deg);
  animation: mic-swing 1.5s ease-in-out infinite;
}

/* Animate the microphone swinging */
@keyframes mic-swing {
  0%, 100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

.legs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  background-color: transparent;
}

.legs::before, .legs::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 50px;
  background-color: #1f375f; /* Dark pants */
  border: 5px solid black;
}

.legs::before {
  left: 0;
}

.legs::after {
  right: 0;
}