body{
background-color: #CBC3C1;
background-image: url('');
color: #363538;
}
 
#all{
background-color: #ccc;
width: 615px;
margin: 0 auto;
}
 
#side{
float: left;
width: 170px;
position: fixed;
}
 
#sidepadding{
padding: 10px;
}
 
.sideimgholder{
display: flex;
justify-content: center;
align-items: center;
opacity: 0.7;
}
 
#sideimg{
width: 175px;
}
 
#nav{
font-size: 14px;
padding: 5px 0px 5px 0px;
}
 
ul{
margin: 0px;
padding-left: 0px;
width: 175px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
 
li{
list-style-type:1px;
width: 71px;
display: inline;
float: left;
}
 
#sidecontent{
font-size: 13px;
text-align: justify;
}
 
.divider{
border-top: 1px dotted #7A787D;
}
 
#main{
background-color: #fff;
float: right;
width: 425px;
}
 
.subheaders{
margin: 0px;
font-weight: normal;
letter-spacing: 2px;
font-size: 20px;
line-height: 13px;
color: #fff;
background-color: #7A787D;
}
 
.maincontent{
padding: 0px 15px 15px 15px;
text-align: justify;
font-size: 14px;
letter-spacing: 1px;
}
 
a{
text-decoration: none;
color: #BA7F61;
}
 
a:visited{
color: #BA7F61;
}
 
a:hover{
font-style: italic;
}
 
a:active{
font-weight: bold;
}
 
::-webkit-scrollbar{
width: 8px; 
}
 
::-webkit-scrollbar-track{
background-color: transparent;
}
 
::-webkit-scrollbar-thumb{
background-color: #7A787D;
}
 
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}


 
.border10 {
  border-width: 7px;
  border-style: solid;
  border-image: url("https://files.catbox.moe/n55045.png") 7 fill round;
    }



#player {
    width: 175px;
    background: #f5f0ee;
    border: 1px solid #d4ccc9;
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
    font-family: Georgia, serif;
    position: fixed;
    left: calc(50vw - 307px);
    top: 430px;
    box-sizing: border-box;
}


#player-title {
    font-size: 11px;
    color: #BA7F61;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

#player-artist {
    font-size: 10px;
    color: #7A787D;
    text-align: center;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#player-progress-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}


#player-seek {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e0d5d0;
    outline: none;
    cursor: pointer;
}

#player-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BA7F61;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(186,127,97,0.4);
}

#player-seek::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BA7F61;
    cursor: pointer;
    border: none;
}

#player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.p-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    min-width: unset;
    min-height: unset;
    box-shadow: none;
}

.p-btn:hover {
    background: #ede5e0;
}

.p-btn svg {
    width: 14px;
    height: 14px;
    fill: #7A787D;
}

#btn-play svg {
    width: 18px;
    height: 18px;
    fill: #BA7F61;
}

#btn-play {
    background: #f0e6e0;
    border: 1.5px solid #d4b8aa;
    border-radius: 50%;
    padding: 6px;
}

#btn-play:hover {
    background: #e8d8d0;
}

#player-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 8px;
}

.p-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4ccc9;
    cursor: pointer;
    transition: background 0.2s;
}

.p-dot.active {
    background: #BA7F61;
}
 
#separador {
    width: 100%;
    max-width: 100%;
    display: block;
}



.ultima-act {
    font-size: 11px;
    color: #7A787D;
    margin-top: 5px;
    margin-bottom: 0;
}