*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  font-family: Garamond, 'Times New Roman', serif;
  font-kerning: none;
}

body {
  display: grid;
  place-content: center;
  padding: clamp(0.5rem, 2vw, 2rem);
  background-color: #f0f0f0;
}

.oval {
  --shadow-color: 0deg 0% 69%;
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  display: flex;
  flex-direction: column;
  justify-content: center;
  inline-size: clamp(340px, 80vw, 936px);
  max-inline-size: 90vw;

  padding: clamp(1.5rem, 6vw, 5rem) clamp(1.5rem, 8vw, 5rem);
  overflow: hidden;
  border-radius: 50%;

  background-color: #f6df13;
  box-shadow: var(--shadow-elevation-medium);
  text-align: center;

  h1 {
    margin: 0;
    font-size: clamp(2.5rem, 10vw, 7rem);
    line-height: 1;
  }

  p {
    max-inline-size: 45ch;
    margin-inline: auto;
    margin-block: 0;
    line-height: 1.3;
  }

  p:first-of-type {
    margin-block-start: 0.5em;
    margin-block-end: clamp(1rem, 4vh, 2rem);
    font-weight: 500;
    font-size: clamp(0.9rem, 3.5vw, 1.75rem);
  }

  img {
    inline-size: clamp(5rem, 12vw, 7rem);
    max-inline-size: 35%;
    block-size: auto;
    margin-inline: auto;
  }

  .bold {
    margin-block-start: clamp(0.5rem, 2vh, 1rem);
    margin-block-end: 0.3em;
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.75rem);
  }

  .small {
    margin-block-end: 0.5em;
    font-weight: 400;
    font-size: clamp(0.75rem, 2.8vw, 1.1rem);
  }
}