* {
        outline: 1px solid red;
}

body {
        background-image: url('https://i.pinimg.com/736x/35/bb/e9/35bbe93e2d91ca7ea25f28e4205129cd.jpg');
        margin: 0;
        cursor: url("download(5).png"), auto;
}


.layout {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 10px;
}

.header {
        text-align: left;
        color: #000000;
        font-family: 'MedievalSharp', serif;
        padding: 0%;
        margin-bottom: 20px;
        flex-direction: column;
        align-items: flex-start;
}

.header img {
        display: block;
        width: 300px;
        left: 150px;
}

.header-box {
        border-radius: 9px;
        background: #000000;
        color: #000000;
        margin: 16px;
}


.sidebar {
        color: #e1d9d9;
        width: 20%;
        background-color: #000000;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        font-family: 'MedievalSharp', serif;
}

.main-content {

        margin: 0 auto;
        margin-left: auto;
        color: #e1d9d9;
        width: 90%;
        background-color: #000000;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        font-family: 'MedievalSharp', serif;
}

.song {
        margin: 0;
}

.angry {
        width: 120px;
        float: right;
        margin: 0 12px 6px 0;
}

.music-player {
        width: 520px;
        background: linear-gradient(180deg, #0a0a0a, #000);
        padding: 14px;
        border-radius: 14px;
        color: #e1d9d9;
        position: absolute;
        top: 200px;
        left: 200px;
        box-shadow: 0 0 12px rgba(255, 102, 204, 0.4);
        font-family: 'MedievalSharp', serif;
        cursor: url("download(5).png"), auto;
        transition: box-shadow 0.3s ease;
}

.music-player.playing {
        box-shadow: 0 0 25px rgba(255, 102, 204, 0.9);
}

.player-header {
        font-size: 1.2rem;
        color: #ff99dd;
        text-shadow: 0 0 6px #36192D;
        margin-bottom: 10px;
        cursor: grab;
        user-select: none;
}

.player-header:active {
        cursor: grabbing;
}

.player-layout {
        display: flex;
        gap: 14px;
}

.player-left {
        width: 170px;
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.player-left img {
        width: 100%;
        border-radius: 12px;
        border: 2px solid #ff66cc;
        box-shadow: 0 0 12px rgba(255, 102, 204, 0.6);
}

.controls {
        display: flex;
        align-items: center;
        gap: 8px;
}

.controls button {
        background: #000;
        border: 1px solid #ff66cc;
        color: #ff99dd;
        border-radius: 6px;
        padding: 4px 8px;
        cursor: pointer;
        box-shadow: 0 0 6px rgba(255, 102, 204, 0.5);
}

.controls button:hover {
        background: #111;
}

.progress-container {
        flex: 1;
        height: 6px;
        background: #111;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: inset 0 0 4px rgba(255, 102, 204, 0.4);
}

.progress {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #ff66cc, #5a1f45);
        border-radius: 10px;
        box-shadow: 0 0 8px #ff66cc;
        animation: pulse 1.5s infinite alternate;
}

.playlist {
        list-style: none;
        margin: 0;
        padding: 4px;
        flex: 1;
        max-height: 170px;
        overflow-y: auto;
}

.playlist li {
        padding: 8px;
        margin-bottom: 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        cursor: url("download(5).png"), pointer;
        transition: all 0.2s ease;
}

.playlist li:hover {
        background: #222;
        transform: translateX(3px);
}

.playlist li.active {
        background: linear-gradient(90deg, #36192D, #5a1f45);
        color: #ffb3e6;
        box-shadow: inset 0 0 8px rgba(255, 102, 204, 0.6);
}