CSS not working within Reactjs like another project - html

Question

CSS not working within Reactjs like another project.
I am working on a project within Reactjs and for my home page I want to have a particular UI/UX and I have made it within regular HTML/CSS (see: https://replit.com/#Reverence/DistantUnconsciousFibonacci#index.html). But when I add the code to my react project (see: https://replit.com/#Reverence/MemorableExperiencedGoal#src/App.jsx) it is somewhat off and not what I had written before despite it being the same code. Is there something I'm missing?
Here is the CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins&family=Source+Sans+Pro&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: #0d1721;
}
#box{
margin: 0;
padding: 0;
position: relative;
display: inline-block;
width: calc(32vw - 3px);
height: 100vh;
text-align: center;
}
#box:hover{
cursor: pointer;
animation: hoverAnimation 1.5s forwards;
}
#keyframes hoverAnimation {
0% {background-color: #009688; height: 0vh;}
100% {background-color: #009688; height: 100vh;}
}
#keyframes fadeInDown {
0% {opacity: 0; transform: translateY(-20px);}
100% {opacity: 1;transform: translateY(0);}
}
.title{
font-family: Poppins, sans-serif;
color: #FBFCFC;
text-align: center;
padding-top: 35vh;
display: inline-block;
height: 100vh;
font-size: 30px;
font-weight: 600;
text-decoration-line: none;
animation: fadeInDown 2s;
}
.title::after {
content: "";
display: block;
margin: 5px auto 0 auto;
height: 2px;
width: 0px;
background-color: #FBFCFC;
}
.title:hover::after {
width: 100%;
transition: all 0.5s;
}
#media screen and (max-width: 820px){
#box{width:100vw!important;padding:0!important;height:0!important;}
}
#mountains{
margin: 0;
padding: 0;
position: relative;
display: inline-block;
width: calc(33.3% - 3px);
height: 100vh;
text-align: center;
background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/mountains.jpg");
}
#mountains:hover{
cursor: pointer;
animation: hoverAnimation 1.5s forwards;
}
#piedmont{
margin: 0;
padding: 0;
position: relative;
display: inline-block;
width: calc(33.3% - 3px);
height: 100vh;
text-align: center;
background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/boat.png");
}
#piedmont:hover{
cursor: pointer;
animation: hoverAnimation 1.5s forwards;
}
#coast{
margin: 0;
padding: 0;
position: relative;
display: inline-block;
width: calc(33.3% - 3px);
height: 100vh;
text-align: center;
background-image: url("https://distantunconsciousfibonacci.reverence.repl.co/coastal-waterway.jpg");
}
#coast:hover{
cursor: pointer;
animation: hoverAnimation 1.5s forwards;
}