@import url('https://fonts.googleapis.com/css?family=Oswald');

* {
    box-sizing: border-box; /*if we add border or padding, it doesn't affect the width of it. */
}

html {
    user-select: none;
}

body {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    height: 100vh;
    overflow: hidden; /*don't want scroll bar to appear.*/
    margin: 0px;
    background-image: radial-gradient(at 30% 20%, rgb(122, 255, 237) 0, transparent 50%),
    radial-gradient(at 80% 0%, hsla(138, 100%, 56%, 0.5) 0, transparent 50%),
    radial-gradient(at 0% 50%, rgba(155, 23, 135, 0.836) 0, transparent 50%),
    radial-gradient(at 80% 50%, hsla(301, 83%, 38%, 0.5) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgb(174, 184, 100) 0, transparent 50%),
    radial-gradient(at 80% 100%, hsla(43, 60%, 47%, 0.5) 0, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 53%, 75%, 0.9) 0, transparent 50%);
    /* radial-gradient(at (position of center from the left) (position of center from the top), color) */
}

h3 {
    margin-bottom: 0px;
    text-align: center;
    color: rgb(255, 0, 221);
}

small {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    color: rgb(146, 127, 255);
}

span {
    color: red;
    font-weight: bold;
}

.fa-heart {
    color: red;
}

.loveMe {
    height: 397px;
    width: 400px;
    max-width: 100%;
    background: url(Images/doubleHeartClick.jpg) no-repeat center center/contain;
    margin: auto;
    cursor: pointer;
    position: relative;
    box-shadow: 0px 5px 20px rgba(153, 17, 17, 0.292), 0px 5px 20px rgba(28, 12, 12, 0.22);
    overflow: hidden;
    /* if you double clicked the .loveMe div too fast it will show the hearts outside the div,
So Added overflow hidden for .loveMe CSS Selector. */
}

/* present in JS */
.loveMe .fa-heart {
    position: absolute;
    animation: growheart 0.6s linear;
    transform: translate(-50%, -50%) scale(0);
}

/* make heart grow through scale and disappear through opacity */
@keyframes growheart {
    to {
        transform: translate(-50%, -50%) scale(7);
        opacity: 0.5;
    }
}