* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow: hidden;
    text-align: center;
    margin: 0;
}


.material-symbols-sharp {
  font-variation-settings:
  'FILL' 100,
  'wght' 900,
  'GRAD' 100,
  'opsz' 48;
  color: rgb(250, 74, 103);
  transform: translateY(5px);
  ;
}

h3 {
    text-align: center;
    margin-bottom: 0;
}


small {
    display: block;
    margin-bottom: 25px;
    font-size: 1em;
}

.heart-that {
    height: 500px;
    width: 350px;
    background: url('https://source.unsplash.com/random/500X450PX') no-repeat center center/cover;
    margin: auto;
    max-width: 100%;
    position: relative;
    box-shadow: 0 5px 10px black, 0 7px 10px black;
    cursor: pointer;
}

.heart-that .material-symbols-sharp {
    position: absolute;
    animation: grow 0.43s linear;
    transform: translate(-50%, -50%) scale(0);
    color: rgb(245, 35, 150);
    border: none;
    
}

@keyframes grow {
    to  {
        transform: translate(-50%, -50%) scale(9);
        opacity: 0;
    }
}

.times {
    font-size: 1.5em;
    transition: 0.43s ;

}