Question: Name Anil Sanadhya Name Interactive Brokers LLC

this is sentence

how can i split like

Name: [Anil sanadhya, Interactive Brokers LLC]

Answer: 
You will need to rearrange your html. You can't select a higher level tag with selectors.

Also since you have position fixed you'll need to set the z-index of the heart for it to be visible.

```css
.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  animation-duration: 1s;
  animation-iteration-count: infinite;
  z-index: 1;
}
.heart:hover {
  animation-name: beat;
}
.heart:hover ~ .back {
  animation-name: backdiv;
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(0.6) rotate(-45deg);
  }
}
@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/css/mainStyles.css"
      media="screen"
    />
    <title>HeartBeat</title>
  </head>
  <body>
    <div class="heart"></div>
    <div class="back"></div> 
  </body>
</html>
```
One solution I have encountered (jQuery):

Modify the "backdiv" animation to your needs:

```html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
width: 50px;
height: 50px;
transform: rotate(-45deg);
animation-duration: 1s;
animation-iteration-count: infinite;
}

.heart:hover {
animation-name: beat;
}

.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}

.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}

@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}

@keyframes backdiv {
50% {
background: #ffe6f2;
}
100% {
background: #0b0203;
}
}
</style>
</head>

<body>

<div class="back"></div>
<div id="heart" class="heart"></div>

<script>
$(document).ready(function(){
  $(".heart").hover(function(){
    $(".back").css("animation-name", "backdiv");
    }, function(){
    $(".back").css("animation-name", "");
  });
});
</script>
</body>
</html>
```

Certainly possible with JS too!

Check [w3schools](https://www.w3schools.com/js/js_htmldom_events.asp) for more examples (very clear instructions)