body {
    background-color: #ffe6f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
}

    .envelope {
      position: relative;
      width: 320px;
      height: 220px;
      background: #a678b4;
      border-radius: 8px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      cursor: pointer;
      perspective: 1000px;
      border: 4px solid #d8b4f8;
      background-image: linear-gradient(to bottom right, #d9b2ff, #a678b4);
    }

    .flap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 110px;
      background: #b38cd9;
      clip-path: polygon(0 0, 50% 100%, 100% 0);
      transform-origin: top;
      transition: transform 0.6s ease;
      z-index: 2;
      background-image: linear-gradient(to top left, #e6c5ff, #b38cd9);
    }

    .letter {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 300px;
      height: 200px;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      font-size: 13.5px;
      line-height: 1.6;
      border-radius: 6px;
      z-index: 1;
      transform: translateY(100%);
      transition: transform 0.6s ease;
      overflow-y: auto;
    }

    .envelope.open .flap {
      transform: rotateX(180deg);
    }

    .envelope.open .letter {
      transform: translateY(0);
    }

    .letter h4 {
      margin-top: 0;
      color: #a678b4;
    }

    .signature {
      margin-top: 1em;
      font-style: italic;
      text-align: right;
    }

    .ribbon {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      height: 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: inset 0 0 0 2px #a678b4;
    }

    .flower {
      position: absolute;
      width: 40px;
      height: 40px;
      background: #f4c3ec;
      border-radius: 50%;
      top: -15px;
      left: 15px;
      box-shadow:
        20px 10px 0 #f4c3ec,
        10px 20px 0 #f4c3ec,
        20px 20px 0 #f4c3ec,
        30px 10px 0 #f4c3ec;
    }

    .flower::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background: #a678b4;
      border-radius: 50%;
      top: 15px;
      left: 15px;
    }

 .link {
    display: block;
    margin-bottom: 20px;
}