:root {
            --primary-red: #e63946;
            --dark-red: #9d0208;
            --light-red: #ffccd5;
            --bg-color: #fff0f3;
        }

        .shapes-container{
            z-index: -1;
        }

        .shapes-container> .shape {
            border-radius: 50%;
            background: rgba(230, 57, 70, 0.1);
            z-index: -1;
            animation: float 6s ease-in-out infinite;
        }

        .shapes-container> .shape:first-child {
            width: 300px;
            height: 300px;
            top: -50px;
            right: -50px;
        }

        .shapes-container> .shape:last-child {
            width: 200px;
            height: 200px;
            bottom: 50px;
            left: -50px;
            animation-delay: 1s;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        #page-404 .container {
            box-shadow: 0 10px 30px rgba(157, 2, 8, 0.15);
            border-top: 5px solid var(--primary-red);
            
        }

        #page-404 .error-code {
            font-size: 8rem;
            font-weight: 900;
            text-shadow: 2px 2px 0px var(--light-red);
        }
        #page-404 .title-404{
            margin-top: -15px;
            color: #9d0208;
         }