@import url("https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap");
@import url("https://fonts.cdnfonts.com/css/jenkine?styles=169178");
@import url("https://fonts.googleapis.com/css2?family=Lacquer&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lancelot&display=swap");

.background-image {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 720/600;
  margin: auto;
  background-image: url("/assets/blog/baba/baba.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  container-type: inline-size;
  filter: contrast(105%) brightness(95%);
  padding: 5px;
  box-sizing: border-box;
}

.jack-box {
  width: 25%;
  max-height: 40%;
  overflow-y: scroll;
  top: 37.5%;
  left: 6.25%;
  position: absolute;
  background-color: transparent;
  font-family: Lancelot, sans-serif;
  font-size: clamp(10px, 1.5cqw, 12px); /* Responsive font size slightly */
  line-height: 1.1;
  letter-spacing: 0.1px;
  color: #202020;
  text-align: justify;
  z-index: 1;
}

/* Fallback for font-size if clamp/cqw is not desired or needed, 11px is fine usually */
@media (max-width: 480px) {
  .jack-box,
  .jack-titolo {
    font-size: 10px;
  }
}

.jack-box::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.jack-box::-webkit-scrollbar-thumb {
  background: transparent;
}

.jack-box::-webkit-scrollbar-track {
  background: transparent;
}

.jack-titolo {
  width: 25%;
  top: 34.66%;
  left: 6.25%;
  position: absolute;
  background-color: transparent;
  font-family: Lancelot, sans-serif;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.1px;
  color: #202020;
  text-align: justify;
  z-index: 1;
}

n {
  font-family: Lancelot, serif;
  color: #634a2a;
  font-size: 1.2em;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: #000;
  box-shadow: inset 0px -2px 0px rgb(160, 136, 104, 0.9);
  border-radius: 30% 80%;
}

o {
  font-family: "Lancelot", serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #634a2a;
  line-height: 1;
  font-style: italic;
}

.baba-placed-img {
  position: absolute;
  width: 16.66%;
  z-index: 5;
  border-bottom: 13px #b29f96 solid;
  border-left: 5px #b29f96 solid;
  border-right: 5px #b29f96 solid;
  border-top: 5px #b29f96 solid;
  box-shadow: 1px 1px 6px #222222;
  filter: brightness(80%);
  opacity: 1;
  box-sizing: content-box; /* Maintain border behavior */
}

.baba-img-1 {
  top: 64.16%;
  left: 34.02%;
  transform: rotate(-7deg);
}

.baba-img-2 {
  top: 73.33%;
  left: 40.97%;
  transform: rotate(2deg);
}