@media screen and (min-width: 900px) and (min-height: 800px) {
  .shadow {
    z-index: 0;
    position: absolute;
    top: 72%;
    left: 50%;
    height: 80px;
    width: 700px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.353);
    border-radius: 50%;
    filter: blur(30px);
    animation: shrink 3s ease-in-out infinite;
  }

  @keyframes shrink {
    0% {
      width: 700px;
    }
    50% {
      width: 550px;
    }
    100% {
      width: 700px;
    }
  }

  .business-card {
    z-index: 1;
    width: 640px;
    height: 360px;
    position: relative;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    50% {
      transform: translateY(10px);
    }
  }
}

@media screen and (max-width: 899px) {
  .business-card {
    z-index: 1;
    width: 640px;
    height: 360px;
    position: relative;
    animation: float 3s ease-in-out infinite;
  }


  .shadow {
    z-index: 0;
    position: absolute;
    top: 72%;
    left: 50%;
    height: 80px;
    width: 700px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.353);
    border-radius: 50%;
    filter: blur(30px);
    animation: shrink 3s ease-in-out infinite;
  }

  @keyframes shrink {
    0% {
      width: 700px;
    }
    50% {
      width: 550px;
    }
    100% {
      width: 700px;
    }
  }

  @keyframes float {
    50% {
      transform: translateY(10px);
    }
  }
}

.business-card {
    z-index: 1;
    width: 640px;
    height: 360px;
    position: relative;
}

* {
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
  box-sizing: border-box;
  transition: all 0.5s linear;
}

.warning {
  display: none;
}

section {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: #434343;
  min-width: 100vw;
}

.business-card .front,
.business-card .back {
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
}

.business-card .front {
  background-color: #242424;
  color: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  padding: 60px;
}

.business-card:hover .front {
  transform: perspective(700px) rotateX(180deg);
}

.business-card .front .name {
  font-size: 32px;
  font-weight: 600;
}

.business-card .front .job {
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  color: #949494;
}

.highlight {
  color: #949494;
}

.business-card .back {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 24px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  transform: perspective(700px) rotateX(-180deg);
  background-color: #242424;
}

.business-card:hover .back {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 24px;
  position: absolute;
  top: 0;
  padding: 20px;
  left: 0;
  transform: perspective(700px) rotateX(0deg);
}

.business-card .back .left,
.business-card .back .right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.business-card .back .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.business-card .back .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.business-card .back .left .info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 40%;
  width: 100%;
  border-right: solid;
  border-color: #949494;
}

.business-card .back .right .info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  height: 40%;
  width: 100%;
}

.business-card .back .left .info .name {
  color: white;
  font-size: 21px;
  font-weight: 600;
  margin-block: 8px;
}

.business-card .back .left .info .job {
  color: #949494;
  font-size: 14px;
  font-weight: 600;
}

.business-card .back .right .info .text {
  color: white;
  font-family: "poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 5px;
  width: 100%;
}

.business-card .back .right .info .links {
  display: flex;
  width: 95%;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 25px;
}

.business-card .back .right .info a {
  color: #949494;
}