/* This task requires a bit of finagling and can get tricky pretty quickly, but you can check out this sample code for fitting flowed text into an irregular shape. If you don't need it to be this exact (for example, you are just putting in titles rather than flowed text, then you can just use border-radius or put in an svg as a background image) */



*:before {
  box-sizing: border-box;
  padding: 2%;
}

body {
  font-family: "Titillium Web", sans-serif;
  font-size: 1em;
  line-height: 1.0;
}

.quote-wrapper {
  width: 370px;
  height: 370px;
  position: relative;
  margin: 20vh auto 0;
}

.text {
  width: 100%;
  height: 100%;
  border-top-left-radius: 80% 60%;
  border-top-right-radius: 30% 40%;
  border-bottom-right-radius: 30% 60%;
  border-bottom-left-radius: 70% 40%;
  background-color: #f3e4db; 
  position: relative;
  margin: 0;
  color: slateblue;
  padding: 2%;
}

.text p {
  height: 100%;
  font-size: 1.3rem;
  line-height: 1.5;
  padding: 0;
  text-align: center;
  font-style: italic;
}

.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(0px 0px, 100.16% 1px, 54.86% 8.97%, 25.02% 21.08%, 6% 32.6%, 0px 50%, -1.03% 72.09%, 21.24% 87.02%, 50% 94%, 98% 100%, 0px 100%);
  shape-margin: 7%;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(19.84% -6.22%, 107.57% -5.14%, 111.35% 97.57%, -0.16% 94.86%, 52.16% 93.73%, 85.79% 82.7%, 97.24% 65.33%, 100% 50%, 102.11% 30.71%, 96.06% 8.38%, 75.94% -0.21%);
  shape-margin: 7%;
}