@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  color: #352a40;
  background: #fffaf3;
  font: 1rem/1.8 "Noto Sans Thai", sans-serif;
}
main { max-width: 62rem; margin: auto; padding: clamp(1rem, 4vw, 3rem); }
header, section { text-align: center; padding: 2rem 1rem; }
header {
  padding-block: clamp(3rem, 9vw, 7rem);
  border: 1px solid #96743e;
  border-radius: 48% 48% 1rem 1rem / 18% 18% 1rem 1rem;
  background: radial-gradient(ellipse at 0 0, #aec4e2 0, transparent 52%),
              radial-gradient(ellipse at 100% 100%, #dac9e8 0, transparent 52%);
}
h1, h2 { font-family: "Bai Jamjuree", sans-serif; line-height: 1.25; }
h1 { font-size: clamp(2rem, 6vw, 4rem); margin: .4em 0; }
h1 span { color: #76582b; }
.button {
  display: inline-block;
  background: #352a40;
  color: white;
  text-decoration: none;
  padding: .75rem 1.75rem;
  border-radius: 3rem;
  font-weight: 600;
}
.button:focus-visible { outline: 3px solid #96743e; outline-offset: 4px; }
.score {
  width: min(15rem, 100%);
  margin: 2.5rem auto 0;
  text-align: center;
  color: #76582b;
  font-size: 1.7rem;
  line-height: 3rem;
  background: repeating-linear-gradient(to bottom, #96743e55 0 1px, transparent 1px 8px) center / 100% 33px no-repeat;
}
section + section { border-top: 1px solid #ded3df; }
section p { max-width: 36rem; margin-inline: auto; }
header img { width: min(80%, 22rem); height: auto; border-radius: 50%; display: block; margin: 0 auto 1.5rem; }
@media (max-width: 30rem) {
  h1 span { display: block; }
  .button { width: 100%; }
}