/* 
* Please dont remove this attribution its required by the license of this code.
* This code is licensed under the CPSL License.
*
* Original code by: @chillcog
* See https://git.chillcog.com/chillcog/azuracast-themes
* Copyright (c) 2024-2026 ChillCog
*/ 

:root {
    --backrooms-yellow: #d1c28a;
    --backrooms-dark-yellow: #a3955e;
    --backrooms-shadow: #2b281a;
    --backrooms-fluorescent: #f4eedb;
    --backrooms-alert: #8b0000; 
}

body, .public-page {
    background-image: url('https://chillcog.com/gifs/backrooms.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: var(--backrooms-dark-yellow) !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: var(--backrooms-shadow) !important;
}

.card, .player-page .card {
    background-color: rgba(209, 194, 138, 0.9) !important;
    border: 3px solid var(--backrooms-shadow) !important;
    border-radius: 0px !important; 
    box-shadow: 10px 10px 0px var(--backrooms-shadow) !important;
    backdrop-filter: blur(2px);
}

h1, h2, h3, h4, h5, .now-playing-title {
    color: var(--backrooms-shadow) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold !important;
}

.now-playing-artist, .text-muted {
    color: #4a4531 !important;
}

.album-art img, .now-playing-art img {
    border-radius: 0px !important;
    border: 2px solid var(--backrooms-shadow);
    filter: sepia(0.6) contrast(1.2) brightness(0.9); 
}

.btn-player, .play-pause-btn {
    background-color: var(--backrooms-shadow) !important;
    color: var(--backrooms-fluorescent) !important;
    border-radius: 0px !important;
    border: 1px solid var(--backrooms-dark-yellow) !important;
    transition: all 0.2s ease-in-out;
}

.btn-player:hover, .play-pause-btn:hover {
    background-color: var(--backrooms-fluorescent) !important;
    color: var(--backrooms-shadow) !important;
    box-shadow: 0px 0px 8px var(--backrooms-fluorescent);
}

.progress {
    background-color: #544f37 !important;
    border-radius: 0px !important;
    height: 10px !important;
    border: 1px solid var(--backrooms-shadow);
}

.progress-bar {
    background-color: var(--backrooms-fluorescent) !important;
    box-shadow: 0 0 5px var(--backrooms-fluorescent); 
}

input[type=range] {
    accent-color: var(--backrooms-shadow) !important;
}

.list-group-item {
    background-color: transparent !important;
    border-bottom: 1px dashed var(--backrooms-shadow) !important;
    color: var(--backrooms-shadow) !important;
}

.now-playing-title::after {
    content: " [LIVE_FEED]";
    font-size: 0.65em;
    color: var(--backrooms-alert);
    vertical-align: super;
    animation: blink 1.5s infinite steps(2);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}