body {
  /* Genrated SVG Background */
  background-color: #330000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

.container {
  max-width: 100%;
  height: 100vh;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: 600px;
  /* ADD */
  height: 500px;

  text-align: center;
  background-color: #fff;
  font-size: 18px;

  /* Generated Border Radius */
  border-radius: 30% 70% 47% 53% / 30% 19% 81% 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__body {
  padding: 20px;
  width: 400px;
}

.card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

/* Generated Shadow */
.shadow {
  box-shadow: 3.4px 3.4px 2.7px rgba(0, 0, 0, 0.022),
    8.7px 8.7px 6.9px rgba(0, 0, 0, 0.031),
    17.7px 17.7px 14.2px rgba(0, 0, 0, 0.039),
    36.5px 36.5px 29.2px rgba(0, 0, 0, 0.048),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}
