body{background:#0d0d0d; background-image:url("homebg.png"); background-size:contain; background-position:center top; background-repeat:no-repeat; font-family:'Courier New'; cursor:url("favicon.ico"),default!important;}
.content{max-width:1080px; margin:auto; display:flex; flex-direction:row; padding:10px; align-items:stretch;}
.content img{display:block; padding:0px; margin:0px; max-width:100%;}

.container{display:block; margin:auto; max-width:1080px; background:black; border:2px solid #2c1012; }

#left{width:20%;  background:#0f0e0e;  margin-right:10px;}
#center{width:60%; border: 1px solid #b6171f;}
#right{width:20%;  background:#0f0e0e; margin-left:10px;}

.header{display:block; width:100%; padding-top:10px; font-family:'Courier New';}
.header img{margin:auto!important; max-width:1050px; display:block; border:1px solid #b22c30;}

.titulobox{display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.titulobox img{width:60px; height:auto;}

.header .menu{color:white; margin:auto; width:300px; padding-top:25px; padding-bottom:30px;}
#left ul{padding:0px;}
#left li{color:white; display:block; margin:0px 20px; width:100%; height:50px; border-bottom:1px solid gray;}
#left li a{color:#fe5b48;}

.content .title{display:flex; flex-direction:row; font-family:'Courier new'; background:#0e0e0e; justify-content:space-between; padding:0px 20px; color:#fc3e3e; font-size:11px; align-items: center;}


.caixa{border:1px solid #b02b30;}
.titulobox{background:#b02b30; color:black; padding:10px; font-family:'Courier new'; font-weight:600;}


.title img{width:20px; height:35px;}


/** if inserting into your css, just add the colors into your own root**/
:root {
/**music player colors, feel free to change**/
--playerbg: #0e0e0e;
--playerborder: #b02b30;
--playertext: #fc583e;
--playertitlebg: #0e0e0e;
--playerbar: #fc583e;
--playericons: #b02b30;
}

.playercontainer {
display: flex;
flex-flow: column nowrap;

background-color: var(--playerbg);
border: 3px outset var(--playerborder);
padding: 5px;
align-content: center;
align-items: center;
}

.playercontainer .now-playing {
width: 100%;
height: 15%;
color: var(--playertext);
text-align: center;
text-justify: center;
font-size: .8vw;
}

.playercontainer marquee {
width: 70%;
height: 35%;
border: 3px inset var(--playerborder);
background-color: var(--playertitlebg);
color: var(--playertext);
text-align: center;
font-size: 1.15vw;
}

.playercontainer .trackdurationcontrols {
width: 100%;
height: 50px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
gap: .4vw;
font-size: .85vw;
color: var(--playertext);
}

.playercontainer .trackdurationcontrols .bar {
width: 60%;
margin-left: .1vw;
}

.playercontainer .trackdurationcontrols .time {
width: 15%; 
}

.playercontainer .trackdurationcontrols #current-time {
margin-left: -3px; 
}

.playercontainer .trackdurationcontrols #duration {
margin-left: -3px; 
}

.playercontainer .trackdurationcontrols input[type="range"] {
-webkit-appearance: none;
background: transparent;
display: block;
margin-left: 0;
margin-right: 0;
width: 100%;
}

/** Chrome, Safari, Opera, and Edge Chromium Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-runnable-track {
background: var(--playerbar);
height: 0.1rem;
width: 100%;
}

/** Firefox Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-track {
background: var(--playerbar);
height: 0.1rem;
width: 100%;
}

/** Chrome, Safari, Opera, and Edge Chromium Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: .1rem solid var(--playerbar);
appearance: none;
margin-top: -12px;
background-color: var(--playericons);
height: .5rem;
width: .5rem;
}

/** Firefox Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-thumb {
border: .1rem solid var(--playerbar);
border-radius: 0;
background-color: var(--playericons);
height: .5rem;
width: .5rem;
}

.playercontainer .trackcontrols {
width: inherit;
height: 60px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
gap: 5px;
margin-top: -5%;
}

.playercontainer .trackcontrols button {
color: var(--playericons);
font-size: 1.8vw;
background-color: transparent;
border: none;
}

.playercontainer .creditstooltip {
color: var(--playerbar);
text-align: right;
align-self: flex-end;
margin-bottom: -5px;
margin-top:-20px;
}

/* Tooltip text */
.playercontainer .creditstooltip .playercredits {
visibility: hidden;
width: 170px;
font-size: 10px;
background-color: var(--playertitlebg);
color: white;
text-align: center;
padding: 2px 0;
border-radius: 2px;
margin: 18px 0 0 -162px;
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.playercontainer .creditstooltip:hover .playercredits {
visibility: visible;
}

@media only screen and (max-width: 750px) {
 .playercontainer .now-playing {
 font-size: 1.7vw;
}

.playercontainer marquee {
 font-size: 2.3vw;
}

.playercontainer .trackdurationcontrols {
 gap: .4vw;
 font-size: 1.7vw;
}

.playercontainer .trackdurationcontrols .bar {
 margin-left: .2vw;
 margin-right: .3vw;
}

.playercontainer .trackdurationcontrols #current-time {
margin-left: -2px; 
}

.playercontainer .trackdurationcontrols #duration {
margin-left: -3px; 
}

.playercontainer .trackcontrols button {
 color: var(--playericons);
 font-size: 4vw;
 background-color: transparent;
 border: none;
}
}