@font-face {
font-family: 'chakrapetch';
src: url('../resources/chakrapetch.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}


*{
margin:0;
padding:0; 
outline: none;
border: none;
position: relative;
box-sizing: border-box;
}

html,.body{
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}


.flexcenter{
display: flex;
justify-content: center;
align-items: center;
}

.flexcolumn{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


.body{
justify-content: flex-start;
background: black url("../resources/background.jpg");
background-size: cover;
font: 14px Arial;
color: white;
}

.container{
height: 100%;
justify-content: flex-start;
border: 0px solid darkgray;
}
/******************************************************/

/*BLOCK ONE (HIDE GENRE FLAG)
-------------------------------------------------------*/
.block1{
width: 100%;
height: 30px;
margin: 10px 0 20px 0;
font-variant: small-caps;
justify-content: space-between;
}

p.show.hide{
width: 5ch;
height: 100%;
color: pink;
border: 1px solid;
padding: 5px;
cursor: pointer;
}



p.genre{
height: 100%;
color: yellow;
}

span.middle{
height: 100%;
padding: .5em 0 0 0;
border-bottom: 1px solid yellow;
}


span.left,span.right{
height: 100%;
width: 30px;
color: yellow;
border: 1px solid white;
cursor: pointer;
}

span.left svg,
span.right svg{
width: 100%;
height: 100%;
fill: black;
stroke: yellow;
}



p.in,p.sr{
height: 100%;
min-width: 30px;
border: 1px solid pink;
cursor: pointer;
}

img.in,img.sr{
width: 100%; 
height: 100%;
}


/*BLOCK TWO (STATION SPANS)
-------------------------------------------------------*/
.block2{
width: 100%;
margin-bottom: 20px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(40px, auto);
}

p.station{
padding: 5px;
color: white;
border:1px solid darkgray;
border-radius: 4px;
cursor: pointer;
text-align: center;
}

p.clicked,p.playing{
color:#39ff14;
border:1px solid #39ff14;
}

p.offline,p.paused{
color: red;
border:1px solid red;
}

p.playing::after{
content:"";
background: url("../resources/playing.svg") no-repeat;
height:1em; width:1em;
background-size:80%;
position: absolute; right: 0;
}

p.station[data-hidden="true"]{
opacity: 0.1;
}



/*BLOCK THREE (PREV PAUSE NEXT)
-------------------------------------------------------*/
.block3{
width: 100%;
height: 30px;
margin-bottom: 20px;
}

p.prev,p.pause,p.next{
height: 100%;
width: 7ch;
padding: 5px;
border: 1px solid black;
border-radius: 4px;
color: black;
background: darkgray;
cursor: pointer;
cursor: pointer;
}


p.pause{
margin: 0 10px;
width: 15ch;
/*pointer-events: none;*/
}


/*BLOCK FOUR (TIMER)
-------------------------------------------------------*/
.block4{
min-height: 30px;
padding: 5px;
text-align: center; 
color: darkblue;
background: darkgray;
border: 1px solid black;
border-radius: 4px;
}



/*BLOCK FIVE (FOOTER)
-------------------------------------------------------*/
.block5{
width: 100%;
padding: 0 0 10px 0;
position: absolute;
bottom: 0;
border-top: 1px solid darkgray;
font-variant: small-caps;
}

p.settings,p.about{
color: yellow;
cursor: pointer;

}

/*BLOCK SIX (OVERLAY SECTION)
-------------------------------------------------------*/

.block6{
z-index: 5;
position: fixed;
width: 100vw;
height: 100vh;
left: 0; top: 0;
background: rgb(0,0,0);
background: rgb(0,0,0,0.8);
opacity: 1;
pointer-events: auto;
transition: opacity .5s linear;
}

.block6.transparent{
opacity: 0;
pointer-events: none;
}



div.modal{
height: auto;
padding: 50px 35px 50px 10px;
color: black;
position: relative;
background: darkgray;
border: 4px solid blue;
transform: scale(1,1);
transition: transform .5s linear;
}




div.modal.minimized{
transform: scale(0,0);
}



div.customlist, div.sleep{
width: 100%;
height: 35px;
justify-content: space-between;
}


select.customlist, input.sleep{
width: calc(100% - 9ch);
height: 100%;
background: lightgray;
border: 1px solid black;
}

button.customlist, button.sleep{
width: 8ch;
height: 100%;
background: lightgray;
border: 1px solid black;
}

button.customlist:hover,
button.sleep:hover{
color: white;
background: black;
}



p.customlist{
border: none;
margin: 5px 0 50px 0;
color: green;
font: bold 14px Courier;
}


p.updated{
position: absolute;
right: 0; bottom: 0;
text-align: right;
padding: 0 2px 2px 0;
color: brown;
font: bold 12px Courier;
}






p.close{
z-index: 10;
width: 30px;
height: 30px;
padding: 5px;
position: absolute;
top: 0; right: 0;
color: red;
background: white;
border: 2px solid black;
cursor: pointer;
}


p.close svg{
width: 100%;
height: 100%;
fill: red;
}


p.skip{
width: 100%;
margin: 20px 0 20px;
font-variant: small-caps;
justify-content: flex-start;
}
	
	
p.skip::after{
content: attr(data-ignore);
margin: 0 0 0 5px;
}




.sleeptimer{
display: none;
}

.sleeptimer.open{
display: flex;
position: fixed;
bottom: 1px; right: 1px;
padding: 5px;
width: 200px;
}

/******************************************************/
[title]::before{
content: attr(title);
position: absolute;
top: -1.2em;
font-weight: bold;
font-variant: small-caps;
}


body::-webkit-scrollbar{
width: 3px;
height: 3px;
}

body::-webkit-scrollbar-track{
background: white;
}

body::-webkit-scrollbar-thumb{
background: yellow;
border-radius: 50px;
}



/******************************************************/
@media (orientation:portrait){
.container,.modal,
.sleeptimer.closed{
width: 95%;
}
}

@media (orientation:landscape){
.container,.modal,
.sleeptimer.closed{
width: 50%;
}
}