Why is my custom CSS code causing errors on my website?

Technical Q&A
, ,
1

Hello,

I’ve been having problems when making my custom CSS code for my website. I want to make a custom 3D image corousel but whenever i want to add my CSS code to custom CSS for a specific section (in my case liquid code) it says “Correct the errors to save your custom CSS.” however then i tried puting CSS code into the theme settings custom CSS and it works perfectly, however everything else on the website gets messed up. I have my code right here "

body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #2c5364, #0f2027);
overflow: hidden;
}

.slider {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
margin: auto;
}

@keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}

100% {
transform: perspective(1000px) rotateY(360deg);
}
}

.slider span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(–i) * 45deg)) translateZ(350px);
border: 3px solid #ffffff;
border-radius: 15px;
}

.slider span img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 2s;
}

.slider span:hover img {
transform: translateY(-50px) scale(1.2);
}

@media (max-width: 768px) {
.slider {
width: 150px;
height: 150px;
}
}

"

I would love some help with this one:)

Thanks.