* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100vh;
  font-family: "inter", sans-serif;
  background-color: rgb(57, 57, 57);
}

main {
  width: 100%;
  height: 100%;
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 100%;
  width: 30%;
  min-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.container #overlay {
  position: absolute;
  height: 70%;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.1s;
}
.container #overlay .mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.3s;
}
.container #overlay .mid i {
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(43, 43, 43, 0.535);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s all;
}
.container #overlay .mid i.muted {
  display: none;
}
.container #overlay .mid i.play {
  height: 50px;
  width: 50px;
}
.container #overlay .mid i:active {
  scale: 0.9;
}
.container .video-container {
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -10;
  scale: 1.0001;
}
.container .video-container video {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.content img {
  width: 50px;
}
.content .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .top i {
  scale: 1.2;
}
.content .centralArea {
  width: 100%;
  height: auto;
  flex: 1;
  position: relative;
}
.content .bottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 10px;
  align-items: center;
}
.content .bottom .left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.content .bottom .left img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 50%;
  border: 2px solid rgb(195, 116, 215);
}
.content .bottom .left .follow-btn {
  padding: 5px 10px;
  border: 1.5px solid white;
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.content .bottom .left .follow {
  border: 1.5px solid rgb(187, 187, 187);
  color: rgb(169, 169, 169);
}
.content .bottom .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.content .bottom .right i {
  scale: 1.4;
}
.content .bottom .right i.filled-heart {
  color: rgb(242, 23, 88);
  display: none;
  animation: pop 0.35s ease;
}
.content .bottom .right .animate {
  animation: pop 0.35s ease;
}
@keyframes pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

.centralArea i {
  position: absolute;
  font-size: 5rem;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  top: 70%;
  left: 50%;
  transform: scale(0) translate(-50%, -50%);
}

.animate {
  animation: instaHeartAnimation 950ms cubic-bezier(0.17, 0.89, 0.32, 1.27) 1;
}

@keyframes instaHeartAnimation {
  0% {
    top: 70%;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  14% {
    transform: translate(-50%, -50%) scale(1.35) rotate(0deg);
  }
  28% {
    transform: translate(-50%, -50%) scale(1.05) rotate(-8deg);
  }
  42% {
    transform: translate(-50%, -53%) scale(1.18) rotate(6deg);
  }
  60% {
    top: 50%;
    transform: translate(-50%, -58%) scale(0.95) rotate(-4deg);
  }
  78% {
    transform: translate(-50%, -65%) scale(0.65) rotate(2deg);
  }
  100% {
    top: 75%;
    transform: translate(-50%, -55%) scale(0) rotate(0deg);
  }
}/*# sourceMappingURL=style.css.map */