@font-face {
    font-family: 'Dalelands';
    src: url('/static/Dalelands Uncial.otf')
}
@font-face {
    font-family: 'DnDC';
    src: url('/static/DnDC.ttf')
}

:root {
    --button_background_color: rgb(200, 200, 200);
    --player_height: 50px;
    --player_background: grey;
    --player_padding: 5px;
    --player_button_hover: #909090;
    --player_button_active: #d9d9d9;
    --heading-color: #ffffff;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: calc(100% - var(--player_height));
    background-color: #f4f4f4;
}
.channel {
    background-color: black;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-size: cover;
    /*width: 768px;
    height: 768px;*/
    background-position: center;
    display: flex;
}
.pls_selector {
    flex: 3;
    padding-right: 15px;
}
.now_playing {
    flex: 2;
}
.now_playing img {
    max-width: 768px;
    max-height: 768px;
    border-radius: 15px3;
}
.playlists {
    /*margin-left: 20px;
    margin-right: 20px;*/
}
.playlist-item {
    margin: 10px 0;
}
.icon {
    height: 1em;
}
.channel_container {
    display: block;
    margin-top: var(--player_height);
}

h1 {
    color: var(--heading-color);
}

.audio_container {
    width: calc(100% - calc(2 * var(--player_padding)));
    height: var(--player_height);
    position: fixed;
    top: 0px;
    background-color: var(--player_background);
    padding: var(--player_padding);
    z-index: 999;
}

/*.bigPlayButton {
    opacity: 40%;
    border: none;
    text-decoration: none;
    background: none;

}*/


.now_playing {
    position: relative; /* This allows the button to be positioned relative to the container */
    width: 100%; /* Ensure the container takes up 100% width of its parent */
    height: auto; /* Let the container adjust the height based on content */
}

.now_playing img {
    width: 100%; /* The image will scale to the width of its container */
    height: 100%; /* This makes the image fill its container's height */
    object-fit: cover; /* Ensure the image covers the entire space of the container */
    display: block; /* Remove extra space below the image */
}

.bigPlayButton {
    position: absolute; /* Position it absolutely over the image */
    top: 0; /* Align the top of the button to the top of the image */
    left: 0; /* Align the left of the button to the left of the image */
    width: 100%; /* Button takes up the full width of the image */
    height: 100%; /* Button takes up the full height of the image */
    background: transparent; /* Remove background */
    border: none; /* Remove button border */
    opacity: 0.3; /* Set 50% opacity */
    cursor: pointer; /* Make the button clickable */
    padding: 0; /* Remove any padding to make the button fit the image */
}

.bigPlayButton .icon {
    width: 70%; /* The icon will fill the button */
    height: 70%; /* The icon will fill the button */
    object-fit: contain; /* Ensure the icon maintains its aspect ratio */
    display: block; /* Remove any extra space below the icon */
    margin: auto; /* Center the icon in the button */
    background: none;
}


/* Borrowed from old player */
audio {
    display: block;
    width: calc(100% - 8px);
    border-radius: 15px;  
    margin: 4px 4px 4px 4px;
    /*bottom: 0px;
    position: fixed;*/
}
.player_buttons {
    display: block;
    justify-content: space-between;
    margin: 5px;
}
.player_button {
    width: calc(100%);
    /*text-align: center;*/
    border-radius: 15px;
    height:auto;
    text-align: left;
    font-size: 24pt;
    font-family: 'Dalelands', sans-serif;
    text-decoration: none;
    background-color: var(--button_background_color);
}
button img {
    /*width: min(4em, 8vw);*/
    width: 1em;
    border-radius: 30px;
    background-color: rgb(224,224,224,.6);
}
.player_button:hover {
  background-color: var(--player_button_hover);
}
.player_button:active {
  background-color: var(--player_button_active);
}

/* New: now playing inline text styling */
.nowplaying_text {
    color: #e6e6e6;
    font-size: 0.95em;
    margin-top: 6px;
}