@import url("css2.css");
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(20deg, deeppink, gold 80%);
  font-family: "Notable", sans-serif;
}

section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 4vw;
  line-height: 1em;
  letter-spacing: 2px;
  text-align: center;
}

.rectangle {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  opacity: 0.4;
  border-radius: 30px;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(20deg);
  box-shadow: 0 40px 65px 0 rgba(140, 170, 222, 0.42), inset 0 -10px 20px 0 #8be3f7;
}

.shadow .text {
  width: 50vw;
  height: 40vh;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(20deg);
}
.shadow .text:before {
  content: "My butter is melting!";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.2;
  filter: blur(1px);
  transform: translateZ(-15vw) translateX(10%);
}