@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --white: #fff;
  --pink-color: #e3156d;
  --pink-bg: #ed257c1a;
  --light-pink: #ffe1ee;
  --bold-title: #202939;
  --text-color: #364152;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background-color: var(--white);
  font-family: Plus Jakarta Sans;
}

.d-flex {
  align-items: center;
  display: flex;
  justify-content: center;
}

.d-flex-column {
  flex-direction: column;
}

.container {
  display: block;
  padding: 24px;
  height: 90%;

  .top-left-decoration {
    left: -169px;
    position: fixed;
    top: -212px;

    span {
      background: linear-gradient(143.71deg, #c6196f 15.29%, #322954 145.78%);
      border-radius: 50%;
      display: block;
      position: relative;
      height: 400px;
      width: 400px;
    }

    img {
      left: 290px;
      position: absolute;
      top: 152px;
    }
  }

  .bottom-right-decoration {
    bottom: -380px;
    display: flex;
    position: fixed;
    right: -280px;

    span {
      background: linear-gradient(90deg, #ff1d6a -3.25%, #ff6e2e 101.19%);
      border-radius: 50%;
      display: block;
      position: relative;
      height: 600px;
      width: 600px;
    }

    img {
      height: 200px;
      left: 260px;
      opacity: 50%;
      position: absolute;
      rotate: -15deg;
      top: -10px;
      width: 100px;
    }
  }
}

.flex-box {
  align-items: unset;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10%;

  .flex-row {
    backdrop-filter: blur(10px);
    border: 2px solid var(--light-pink);
    border-radius: 32px;
    max-width: 600px;
    width: 40vw;
    cursor: pointer;
    justify-content: space-around;
    padding: 24px 0 40px;
    text-decoration: none;
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    -webkit-filter: blur(0);
    -webkit-transform: translateZ(0);

    .content {
      justify-content: flex-end;
      gap: 8px;
      padding: 16px 8px;
      text-align: center;
      height: 90%;

      .title {
        color: var(--bold-title);
        font-size: 24px;
        line-height: 32px;
        margin: 30px 0 0;
      }

      span {
        max-width: 348px;
        color: var(--text-color);
        font-size: 16px;
        line-height: 26px;
        text-align: center;
      }
    }

    .continue-btn {
      background-color: var(--white);
      border: 1px solid var(--pink-color);
      border-radius: 8px;
      color: var(--pink-color);
      cursor: pointer;
      gap: 8px;
      outline: none;
      padding: 13px 24px 13px 32px;

      span {
        font-size: 16px;
      }

      svg {
        path {
          stroke: var(--pink-color);
        }
      }

      &:hover {
        background-color: var(--pink-color);
        color: var(--white);

        svg {
          path {
            stroke: var(--white);
          }
        }
      }
    }

    &:hover {
      background-color: var(--pink-bg);
      border-color: var(--pink-color);
    }
  }
}

@media only screen and (max-height: 580px) {
  .container {
    .flex-box {
      .flex-row {
        .content {
          img {
            width: calc(100vh / 6) !important;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 816px) {
  .container {
    height: auto;

    .flex-box {
      align-items: center;
      margin-top: unset;

      &:last-child {
        .content {
          justify-content: flex-start;
        }
      }

      .flex-row {
        width: 90%;
        height: calc(100vh / 1.5);
      }
    }
  }
}

@media only screen and (max-width: 576px) {
  .container {
    .bottom-right-decoration {
      bottom: -100px;
      right: -80px;

      span {
        height: 200px;
        width: 200px;
      }

      img {
        left: unset;
        right: 30px;
        height: 100px;
        width: 100px;
      }
    }

    .top-left-decoration {
      left: -100px;
      top: -100px;

      span {
        height: 200px;
        width: 200px;
      }

      img {
        display: none;
      }
    }

    .flex-box {
      gap: 8px;
      width: 100%;

      .flex-row {
        padding: 12px 12px 28px;
        height: calc(100vh / 3);

        &:last-child {
          .content {
            img {
              width: 60%;
            }
          }
        }

        .content {
          justify-content: center;
          height: 50%;

          span,
          .title {
            display: none;
          }
        }

        .continue-btn {
          padding: 8px;
          min-height: 20%;
          min-width: 65%;

          span {
            font-size: 14px;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }

        img {
          width: 80%;
        }
      }
    }
  }

  @supports (-webkit-backdrop-filter: blur(10px)) {
    .top-left-decoration,
    .bottom-right-decoration {
      filter: blur(10px);
    }
  }
}