body {
    background-color: #ffdaf7;
}

h1 {
    color: #181897;
    text-align: center;
    border-radius: 30px;
    background-color: #c2a8fe;
    padding: 5px;
    font-size: 50px;
}

#s3d {
  perspective: 1500px;
}

#platform {
  width: 200px;
  height: 350px;
  background-color: #857fdbf2;
  transform: translateX(120px) rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  border-radius: 16px;
  box-shadow: 1px 1px 0 1px #3b3b3b, -1px 0 28px 0 #1b09451a,
    28px 28px 28px 0 #11106340;
  transition: 0.4s ease-in-out transform, 0.4s ease-in-out box-shadow;
}
#platform:hover {
  transform: translateX(120px) translate3d(0px, -16px, 0px) rotateX(51deg)
    rotateZ(43deg);
  box-shadow: 1px 1px 0 1px #3b3b3b, -1px 0 28px 0 #291b781a,
    54px 54px 28px -10px #10136326;
}

#platform p {
  width: 450px;
  transform: translateY(35px) translateX(-105px) translateZ(30px)
    rotateX(-90deg) rotateY(90deg);
  transform-style: preserve-3d;
  opacity: 0;
  transition: 0.4s ease-in-out opacity;
}

#platform:hover p {
  opacity: 0.9;
  text-shadow: 2px 6px 6px #0c0a4d80;
}

#platform1 {
  width: 200px;
  height: 350px;
  background-color: #756edaf2;
  border-radius: 16px;
  box-shadow: 1px 2px 10px #260865f2,
    44px 44px 24px #05075a40;
  transition: 0.5s ease-in-out box-shadow;
}
#platform1:hover {
  box-shadow: 1px 2px 10px #1f1876f2,
    70px 70px 24px #27177726;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  background-color: #ff91ae;
  font-size: 25px;
}

nav a {
  padding: 0.8rem;
  color: #9c1b1b;
}

nav a:hover {
  padding: 0.8rem;
  color: #370000;
}