/* DESIGN FOR MUSIC PLAYER FROM VIVARISM!!! 
https://vivarism.net/
muawhhhh credits to them for the original code wawawawa*/
body {
               font-family: "kawaii", serif;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
            margin: 0;
            padding: 40px;
            min-height: calc(100 * var(--vh, 1vh));
        }

        #musicplayer {
            background: url('/assets/images/tiles/blue.png');
            background-size: cover;
            background-repeat: no-repeat;
            padding: 12px;
            width: 250px;
            position: absolute;
            top: 20px;
            left: 400px;
        }

        .display-area {
            background: #f8f9ff;
            border: 3px solid #f2f7ff;
            padding: 15px 20px;
            text-align: center;
            box-shadow: 
                inset 1px 1px 3px rgba(0, 0, 0, 0.1),
                inset -1px -1px 3px rgba(255, 255, 255, 0.8);
            overflow: hidden;
        }

        .songtitle {
            font-size: 20px;
            color: #2c3e50;
            font-weight: bold;
            margin: 0;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-block;
            animation: scroll 12s linear infinite;
        }

        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .decoration {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('/assets/images/tiles/music-icon.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .decoration.left {
            top: -15px;
            left: -15px;
        }

        .decoration.right {
            top: -15px;
            right: -15px;
        }

        audio {
            display: none;
        }

@media (max-width: 768px) {
    body {
        padding: 72px 16px 120px;
    }

    #musicplayer {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin-bottom: 16px;
    }
}