@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;
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{
position: relative;
justify-content: flex-start;
background: black url("../resources/background.jpg");
background-size: cover;
font: 14px Arial;
color: white;
border: 0px solid red;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

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

.finishing{
width: 100vw;
height: 100vh;
position: absolute;
color: yellow;
background: black;
opacity: 1;
transition: opacity 2s linear;
}




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

p.show.hide{
display: inline-flex;
width: 40px;
height: 100%;
color: pink;
border: 1px solid;
cursor: pointer;
}



p.genre{
display: inline-flex;
height: 100%;
color: yellow;
}

span.middle{
display: inline-flex;
height: 100%;
min-width: 8ch;
border-bottom: 1px solid yellow;
}


span.left,span.right{
display: inline-flex;
height: 100%;
width: 30px;
padding: 2px;
color: yellow;
border: 0px solid white;
cursor: pointer;
}

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



p.in,p.sr{
display: inline-flex;
height: 100%;
width: 40px;
border: 1px solid pink;
cursor: pointer;
}

.in>svg,.sr>svg{
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{
position: relative;
padding: 5px;
color: white;
border:1px solid darkgray;
border-radius: 5px;
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: "";
position: absolute;
right: 0;
width: 20px; height: 20px;
border: 0px solid yellow;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 55 80' xmlns='http://www.w3.org/2000/svg' fill='%23FFF'%3E%3Cg transform='matrix(1 0 0 -1 0 80)'%3E%3Crect width='10' height='20' rx='3'%3E%3Canimate attributeName='height' begin='0s' dur='4.3s' values='20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='15' width='10' height='80' rx='3'%3E%3Canimate attributeName='height' begin='0s' dur='2s' values='80;55;33;5;75;23;73;33;12;14;60;80' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='30' width='10' height='50' rx='3'%3E%3Canimate attributeName='height' begin='0s' dur='1.4s' values='50;34;78;23;56;23;34;76;80;54;21;50' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='45' width='10' height='30' rx='3'%3E%3Canimate attributeName='height' begin='0s' dur='2s' values='30;45;13;80;56;72;45;76;34;23;67;30' calcMode='linear' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") center no-repeat;
}

p.station[data-hidden="true"]{
display: none;
}

/*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%;
height: 30px;
position: absolute;
bottom: 0px;
padding: 0 0 10px 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%;
padding: 5px;
background: lightgray;
border: 1px solid black;
}

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

button:hover{
color: white;
background: 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.flexcenter{
display: flex;
text-align: center;
position: fixed;
bottom: 1px; right: 1px;
padding: 5px;
width: 200px;
background: white;
color: black;
border: 1px solid red;
}





/******************************************************/
div[title]{
position: relative;
}

div[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{
width: 95%;
}
}

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

textarea{
width: 100%;
padding: 4px;
height: 200px;
}