* {
  box-sizing: border-box;
}

body {
  max-width: 750px;
  margin: auto;
  padding: 20px;
  background: #D1CDC4;
  background: radial-gradient(circle, rgba(209, 205, 196, 1) 21%, rgba(172, 169, 162, 1) 100%);
  /* font-family: 'Cormorant Garamond', serif; */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* font-family: Optimistic Display, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
  /* font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */
  /* font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */

  /* min-height: 100vh;
  display: flex;
  align-items: center; */
}

#content {
  /* background: white; */
  background-color: #ebe9e6;
  /* background-color: #e8e3dd; */
  border-radius: 19px;
  /* box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); */
  /* box-shadow: 0 4px 12px rgb(0 0 0 / 21%); */
  padding: 28px;
  margin: 20px 0;
  border: 1px solid #c4c4c4;
  text-align: center;
  margin-top:35%;
  /* bottom-only shadow */
  /* box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25); */
  
  box-shadow: 
    0 8px 15px rgba(0, 0, 0, 0.2), 
    0 15px 30px rgba(0, 0, 0, 0.1); 

}

#content::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -20px;
  height: 20px;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0.25) 0%,
              rgba(0, 0, 0, 0) 80%);
  border-radius: 50%;
  z-index: -1;
}

p {
  /* line-height: 1.2; */
  /* font-size: 1.7rem; */
  /* font-size: 2.0rem; */
  font-size: 2.8rem;
  font-weight: 900;
  /* color: #ffffff; */
  color: #2b2b2b;
  /* color: #32302d; */
  /* color: #1a1a1a; */
  /* subtle shadow */
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);  */
  /* lighter glow shadow */
  text-shadow: 0 2px 4px rgba(182, 182, 182, 0.6);
  /* text-shadow: 0 2px 6px rgba(233, 233, 233, 0.4); */
  /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); */
  /* light border */
  -webkit-text-stroke: 1.3px #ffffff; 
  /* experimental */
  /* text-stroke: 1px #ffffff;  */
  letter-spacing: 0.4px;
}

.author {
  text-align: right;
  font-style: italic;
  /* margin-top: 10px; */
}

@media only screen and (max-width: 768px) {
  body {
    padding: 10px;
  }
  
  #content {
    margin-top:35%;
    padding: 20px;
    margin: 10px 0;
  }
}