Seperate "Friend" heading codes?

Does anyone know how to change the Friend space heading separately from the friend comment heading?

I cant get it to work!! every time i try to change one, the other is the exact same and im not sure how to differentiate them in my code :(

*
{cursor: url('https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur'), auto;}a:hover
{cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), auto;}



main {
color: #ca2dff;
font-size: 80%;
}

body{
background-image:url("https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif")
}

:root {
--logo-blue: #fd02ea;
--darker-blue: #ca2dff;
--lighter-blue:url(https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif);
background-position: center;
--even-lighter-blue: url(https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif);
background-position: center;
--lightest-blue: url(https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif);
--dark-orange:url(https://media.tenor.com/Wypbjs6EIP4AAAAC/night-sky-stars.gif)
--light-orange:url(https://media.tenor.com/Wypbjs6EIP4AAAAC/night-sky-stars.gif); background-position: center;
--even-lighter-orange:url(https://media.tenor.com/Wypbjs6EIP4AAAAC/night-sky-stars.gif);
--red: #fd02ea;
}

.count {
color: #fd02ea;
}





.comments-table td:first-child, .music-table td:first-child {
background:url(https://media.tenor.com/Wypbjs6EIP4AAAAC/night-sky-stars.gif);



nav .top {
background-image: url('https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif');
background-position: center
}

footer {
background-image: url('https://media.tenor.com/xqvBeoKIZFEAAAAC/glitter-purple.gif');
background-position: center;
}




main{
background:rgba(0, 0, 0, 0.28);
}