:root{--font-family:Arial,sans-serif;--color-text:#fff;--color-primary:rgba(124,177,193,.9);--color-bg-item:rgba(255,255,255,.9);--color-title:#111;--color-subtitle:#222;--color-number:#333;--color-shadow:rgba(14,16,21,.5);--radius:10px;--spacing-item:10px 10px;--gap-item:10px;--transition-speed:.3s}html,body{font-family:var(--font-family);margin:0;padding:0;color:var(--color-text);height:100%;width:100%}*{box-sizing:border-box}.main-container{display:flex;flex-direction:row;height:100%;width:100%;background:url("../img/bg.webp") center/cover no-repeat}.recents-column{display:flex;flex-direction:column;width:380px;min-width:380px;flex-shrink:0;overflow-y:auto;z-index:300}.player-column{flex-grow:1;position:relative;min-width:0;overflow:hidden}footer{position:absolute;bottom:0;width:100%;text-align:center;padding:2px;font-size:12px;z-index:999}footer a{color:var(--color-text);text-decoration:none}footer a:hover,footer a:focus{color:var(--color-primary)}#recent-songs{padding:10px 15px;color:var(--color-text);overflow-y:auto;z-index:1000}#recent-songs h2{color:var(--color-text);margin-bottom:10px;font-size:1em;text-align:left}.song-list{list-style:none;padding:0;width:100%}.song-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--gap-item);padding:var(--spacing-item);background:var(--color-bg-item);box-shadow:4px 4px 4px var(--color-shadow);border-radius:var(--radius);max-width:100%;transition:background-color var(--transition-speed) ease}.song-item:last-child{margin-bottom:0}.song-item:hover{background-color:var(--color-primary)}.song-details{flex:1;min-width:0;padding-right:10px;overflow:hidden;transition:transform .2s cubic-bezier(0.25,0.46,0.45,0.94)}.song-item:hover .song-details{transform:translateX(5px)}.song-details h3,.song-details p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-height:1.2em}.song-details h3{font-size:1em;color:var(--color-title);margin-bottom:2px}.song-details p{font-size:.9em;color:var(--color-subtitle)}.song-number{flex:0 0 50px;font-size:2em;font-weight:bold;color:var(--color-number);text-align:right}.loading-text{background:none !important;box-shadow:none !important}@media screen and (max-width:1366px){.main-container{flex-direction:column}.recents-column{display:none}.player-column{width:100%;height:100%}}@media screen and (max-height:540px){footer{display:none}}