:root{
  --mfvq-bg:#FFF7EE;
  --mfvq-border:#F7BE7A;
  --mfvq-text:#333333;
  --mfvq-radius:14px;
  --mfvq-width:640px; /* fixed max width but responsive */
  --mfvq-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* Wrapper takes text alignment */
.mfvq-wrap{ width:100%; }

.mfvq-quote{
  position:relative;
  background:var(--mfvq-bg);
  border:2px solid var(--mfvq-border);
  border-radius:var(--mfvq-radius);
  padding:16px 18px;
  color:var(--mfvq-text);
  line-height:1.6;
  box-shadow:var(--mfvq-shadow);
  margin:34px auto 18px;
  font-size:16px;
  display:block;
  width:100%;
  max-width:var(--mfvq-width);
}

.mfvq-emoji{
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  background:#fff;
  border:2px solid var(--mfvq-border);
  border-radius:999px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  box-shadow:var(--mfvq-shadow);
  font-size:20px;
  line-height:1;
}

.mfvq-num{
  font-weight:600;
  margin-right:.4rem;
  opacity:.85;
}

.mfvq-body em{ font-style:italic; }

/* Responsiveness */
@media (max-width: 480px){
  .mfvq-quote{ font-size:15px; padding:14px 16px; }
  .mfvq-emoji{ width:32px; height:32px; top:-16px; font-size:18px; }
}

@media (min-width:768px){
  .mfvq-quote{ font-size:17px; }
}