Div disappears when window resize - html

Question

I am trying to make a small animation of two circles for the web, and I want it to be responsive so when I make the window "phone size" everything will still be there.
Each circle is a div, and both of them are inside a div with the class animation container. Everything changes sizes and is shown on the screen except the circles.
I have tried resizing them to see if they were too big, but it hasn't worked. I don't know what to do, help, please. We are using react and some bootstrap, but I think it has to do more with the CSS.
JSX Code
import React, { useEffect, useState } from 'react'
import { Container, Form } from 'react-bootstrap'
import useAuth from './useAuth'
import TrackSearchResult from './TrackSearchResult'
import SpotifyWebApi from 'spotify-web-api-node'
import Player from './Player'
import Navbar from './Navbar'
import './Dashboard.css'
const spotifyApi = new SpotifyWebApi({
clientId: '0d9e02c2d8504b05a8ae26f33b338212',
});
export default function Dashboard({code}) {
const accessToken = useAuth(code)
const [search,setSearch] = useState('')
const [searchResults,setSearchResults] = useState([])
const [playingTrack, setPlayingTrack] = useState()
function chooseTrack(track) {
setPlayingTrack(track)
//we clear the search when we choose a track
setSearch('')
}
useEffect(()=>{
if (!accessToken) return
spotifyApi.setAccessToken(accessToken)
},[accessToken])
useEffect(()=>{
if (!search) return setSearchResults([])
if (!accessToken) return
let cancel = false //so we just search on request at a time
spotifyApi.searchTracks(search)
.then(res => {
if (cancel) return
setSearchResults(res.body.tracks.items.map(track => {
//loop through all images and get the smallest image
const smallestAlbumImage = track.album.images.reduce((smallest, image) => {
if (image.height < smallest.height) {
return image
} else {
return smallest
}
}, track.album.images[0])
return {
artist: track.artists[0].name,
title: track.name,
uri: track.uri,
albumUrl: smallestAlbumImage.url
}
}))
})
return () => cancel = true
},[search, accessToken])
return (
<Container className="d-flex flex-column pt-2 pb-0 px-0" style={{height:"100vh"}}>
{/* <Form.Control
type="search"
placeholder="Search Songs/Artists"
value={search}
onChange={e => setSearch(e.target.value)} //to get the value of search
/> */}
<div className="animation-container align-items-center">
<div
id="shape-1"
class="
rounded-circle
position-absolute
opacity-70
scale-up-center
d-none d-md-block
"
></div>
<div
id="shape-2"
class="
rounded-circle
position-absolute
opacity-70
scale-up-center
fade-delay-2000
d-none d-md-block
"
></div>
</div>
<div className="song-container">
<div className="song">song1</div>
<div className="song">song2</div>
<div className="song">song3</div>
<div className="song">song4</div>
</div>
<div className="flex-grow-1 my-2" style={{overflowY: "auto"}}>
{/* VERY IMPORTANT
Here we use track arrow function with parentesis and not curly brackets
maybe because it returns a component */}
{searchResults.map(track =>(
<TrackSearchResult track={track} key={track.uri} chooseTrack={chooseTrack}/>
))}
</div>
<div><Player accessToken={accessToken} trackUri={playingTrack?.uri}/></div>
<Navbar/>
</Container>
)
}
CSS:
.animation-container {
height: 50vh;
max-width: 20vh;
align-items: center;
justify-content: center;
display: flex;
margin: 0 auto;
}
#shape-1,
#shape-2,
{
min-width: 25vh;
height: 25vh;
mix-blend-mode: multiply;
filter: blur(24px);
}
#shape-1 {
background-color: hsl(225, 100%, 43%);
left: 99vh;
}
#shape-2 {
background-color: hsl(0, 92%, 64%);
right: 99vh;
}
.scale-up-center {
animation: scale-up-center 7s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
}
#keyframes scale-up-center {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.fade-delay-2000 {
animation-delay: 2s;
}
.fade-delay-4000 {
animation-delay: 4s;
}
.song-container {
padding: 3em;
display: grid;
grid-gap: 2em;
height: auto;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.song {
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
height: 10vh;
width: auto;
}