.bot-profile-art {
  display: grid;
  place-items: center;
  min-height: 460px;
  background-color: var(--cream);
  background-image: radial-gradient(var(--brown) 1px, transparent 1px);
  background-size: 16px 16px;
}

.profile-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(66%, 290px);
  aspect-ratio: 1;
  padding: 14px;
  background: var(--orange);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--brown);
  animation: profile-float 3s steps(4, end) infinite;
}

.profile-frame::before,
.profile-frame::after {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--skin);
  border: 3px solid var(--ink);
  content: '';
}

.profile-frame::before { top: -12px; left: 24px; }
.profile-frame::after { right: 24px; bottom: -12px; }

.profile-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
  image-rendering: pixelated;
}

.profile-label {
  position: absolute;
  right: 50%;
  bottom: 28px;
  z-index: 2;
  padding: 8px 12px;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--orange);
  font: 700 14px/1 'Pixelify Sans', sans-serif;
  letter-spacing: .12em;
  transform: translateX(50%);
}

.profile-spark {
  position: absolute;
  color: var(--orange-dark);
  font-size: 30px;
  animation: profile-sparkle 2.4s steps(3, end) infinite;
}

.spark-one { top: 22%; left: 17%; }
.spark-two { top: 17%; right: 18%; animation-delay: .6s; }
.spark-three { right: 13%; bottom: 25%; animation-delay: 1.1s; }

@keyframes profile-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes profile-sparkle {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 800px) {
  .bot-profile-art { min-height: 350px; }
  .profile-frame { width: min(62%, 230px); }
  .profile-label { bottom: 22px; }
}