body {
    background-image: url('Background.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: padding-box;
  }


  @media (max-width: 767px) {
    body {
      background-size: cover;
    }
  }


.heart{
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background: #f20044;
    position: center;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    animation: heart 1s linear infinite;
}
@keyframes heart{
    40%{
        transform: rotate(-45deg) scale(1.07);
    }
    80%{
        transform: rotate(-45deg) scale(1.0);    
    }
    100%{
        transform: rotate(-45deg) scale(0.97);
    }

    80%{
        transform: rotate(-45deg) scale(0.9);
    }
    40%{
        transform: rotate(-45deg) scale(0.87);
    }

}

.heart:before{
    content: '';
    position: absolute;
    height: 100px;
    width: 100px;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px -10px 90px #f20044;

}

.heart::after{
    content: '';
    position: absolute;
    height: 100px;
    width: 100px;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: 10px 10px 90px #f20044;
}

    .text-effect {
        font-size: 36px;
        font-weight: bold;
        color: rgb(255, 39, 39);
        text-shadow: 3px 3px 0 rgb(112, 10, 10), 6px 6px 0 rgb(70, 11, 11);
    }

        .text-effect-2 {
            color: rgb(255, 39, 39);
            text-shadow: 1px 1px rgb(112, 10, 10), 2px 2px rgb(70, 11, 11), 3px 3px #000000;
            font-size: 36px;
            font-weight: bold;
        }


        .background-image {
            background-image: url('./Background.jpg');
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
}