body {
    margin: 0;
    font-family: "Love Ya Like A Sister", serif;
    font-weight: 400;
    font-style: normal;
    background-color: pink;
    text-align: center;
    color: white;
}

 
.card {
    width: 250px;
    border: none;
    border-radius: 10px;
    background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
    background-blend-mode: normal, normal, screen, overlay, normal;
    box-shadow: 0px 0px 10px 1px #000000;
    margin: 20px;
  }
  
  /* From Uiverse.io by LilaRest */ 
button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 22px 20px 22px;
    box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    background-color: #e8e8e8;
    border-color: #ffe2e2;
    border-style: solid;
    border-width: 9px;
    border-radius: 35px;
    transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
    border-color 400ms ease-in-out,
    background-color 400ms ease-in-out;
    word-spacing: -2px;
  }
  
  @keyframes movingBorders {
    0% {
      border-color: #fce4e4;
    }
  
    50% {
      border-color: #ffd8d8;
    }
  
    90% {
      border-color: #fce4e4;
    }
  }
  
  button:hover {
    background-color: #eee;
    transform: scale(105%);
    animation: movingBorders 3s infinite;
  }
  
  .filled,
  .empty {
    fill: rgb(255, 110, 110);
    transition: opacity 100ms ease-in-out;
  }
  
  .filled {
    position: absolute;
    opacity: 0;
  }
  
  @keyframes beatingHeart {
    0% {
      transform: scale(1);
    }
  
    15% {
      transform: scale(1.15);
    }
  
    30% {
      transform: scale(1);
    }
  
    45% {
      transform: scale(1.15);
    }
  
    60% {
      transform: scale(1);
    }
  }
  
  button:hover .empty {
    opacity: 0;
  }
  
  button:hover .filled {
    opacity: 1;
    animation: beatingHeart 1.2s infinite;
  }
h1 {
    font-family: "Love Ya Like A Sister", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* From Uiverse.io by S4tyendra */ 
.container {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);

}

.container .preloader {
  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes rotate {
  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

.preloader span {
  --c: #f23f3f;
  position: absolute;
  display: block;
  height: 64px;
  width: 64px;
  background: var(--c);
  border: 1px solid var(--c);
  border-radius: 100%;
}

.preloader span:nth-child(1) {
  transform: translate(-28px, -28px);
  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_1 {
  60% {
    transform: scale(0.4);
  }
}

.preloader span:nth-child(2) {
  transform: translate(28px, -28px);
  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_2 {
  40% {
    transform: scale(0.4);
  }
}

.preloader span:nth-child(3) {
  position: relative;
  border-radius: 0px;
  transform: scale(0.98) rotate(-45deg);
  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shape_3 {
  50% {
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }

  100% {
    transform: scale(0.98) rotate(-45deg);
  }
}

.shadow {
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 16px;
  width: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}

@keyframes shadow {
  50% {
    transform: translateX(-50%) scale(0.5);
    border-color: #f2f2f2;
  }
}

.container1 {
  position: absolute;
  top: 50%;
  left: 90%;
  transform: translate(-50%, -50%);

}


/* From Uiverse.io by StealthWorm */ 
.container2 {
  position: absolute;
  top: 320%;
  left: 90%;
  transform: translate(-50%, -50%);

}

.container3 {
  position: absolute;
  top: 320%;
  left: 10%;
  transform: translate(-50%, -50%);

}