How do I fix a child replacing its parent background when trying to add glowing border? [closed]

I am currently creating my portfolio and running into an annoying issue. I am attempting to add an animated border to my card within my container. The way the html is structured is I have a card within a container file that houses text as well as buttons. I am using ::before and ::after but it seems as though when adjusting the index of ::before and ::after to be behind the card itself it seems to replace its parents background entirely rather than adding the glowing affect behind it.

Here is the CSS code I can also attach HTML code if need be:

.container {
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 4rem;
padding-bottom: 4rem;
padding-inline: 10px;
}
.container .main-text {
background: #313435;
max-width: 1000px;
padding-inline: 20px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
border-radius: 10px;
position: relative;
z-index: 1;
}
.container .main-text::before,
.container .main-text::after {
content: "";
position: absolute;
inset: -15px;
z-index: -1;
background: conic-gradient(
    from var(--gradient-angle),
    #904E55,
    #97353e,
    #9b0c1a,
    #97353e,
    #904E55
);
border-radius: inherit;
animation: rotation 20s linear infinite;
}
.container .main-text::after {
filter: blur(30px);
}