Problem solving for my CSS code

[SlipSlip]

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.