html,
        body {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            object-fit: fill;
            z-index: -1;
        }


        .bg-image {
            background-image: url(/images/background.jpg);
            filter: blur(2.8px);
            -webkit-filter: blur(2px);
            height: 100%;
            background-repeat: repeat;
            background-position: center;
            background-size: cover;
            position: fixed;
            animation: slide 10s linear infinite;
            top: 0;
            left: 0;
            width: 215vw;
            height: 100vh;
            box-sizing: border-box;
            object-fit: fill;
            z-index: -1;

        }

        @keyframes slide {
            0% {
                transform: translateX(0px);
            }

            100% {
                transform: translateX(-1000px);
            }
        }

        .text {
            background-color: rgb(175, 238, 238, 0.2);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-shadow: 3px;
            border: 3px solid rgba(255, 255, 255, 0.653);
            border-radius: 25px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px;
        }

        .corner-image-plz {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 300px;
            height: auto;
            z-index: 1000;
            animation: 6s sway ease-in-out infinite;
        }

        @keyframes sway {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-15px) rotate(5deg);
            }

            100% {
                transform: translateY(0px) rotate(0deg);
            }


        }

        .title-spin {
            display: inline-block;
            animation: spin-title 2s linear infinite;
            color: white;
            font-size: 3rem;
        }

        @keyframes spin-title {
            0% {
                transform: perspective(600px) rotateX(12deg) rotateY(0deg)
            }

            50% {
                transform: perspective(600px) rotateX(12deg) rotateY(180deg);
            }

            100% {
                transform: perspective(600px) rotateX(12deg) rotateY(360deg);
            }
        }

        .music-player {
            position: fixed;
            bottom: 24px;
            left: 24px;
            z-index: 9999;
            display: flex;
            padding: 8px;
            border-radius: 30;
            background-color: rgb(175, 238, 238, 0.2);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-shadow: 3px;
            border: 3px solid rgba(255, 255, 255, 0.653);
            border-radius: 25px;
            text-align: center;
            padding: 10px;
        }

        .music-player-audio {
            height: 40px;
            width: 260px;
            gap: 20;
        }

        .Icons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 0px;
            margin: 0 0 -10px;
        }

        .Things {
            display: flex;
            justify-content: center;
            grid-template-columns: repeat(3, 120px);
            align-items: center;
            gap: 25px;
            padding: 0;
            margin: 0 0 0 0;
        }

        .corner-text-yes {
            right: 20px;
            bottom: 0.3px;
            color: skyblue;
            font-family: Arial, Helvetica, sans-serif;
            position: fixed;
        }