*{
box-sizing:border-box;
}
body{
background-color:#fafafa;
color:#000;
font-family:Arial;
font-size:16px;
margin:40px 0 0;
}
audio{
margin:0 auto;
display:block;
}
main{
margin:0 auto;
max-width:320px;
padding:10px;
border-radius:5px;
box-shadow:0px 0px 5px #aaa;
background-color:#fff;
overflow-x:auto;
}
h1{
font-size:16px;
}
a{
color:#000;
}
button{
cursor:pointer;
}
label{
cursor:pointer;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.speed-wrapper{
display:flex;
align-items:center;
}
.speed{
margin-right:10px;
cursor:pointer;
}
.speed-status{
min-width:23px;
}
.btn-increase-playback-rate{
margin-left:5px;
}
.btn-decrease-playback-rate{
margin-right:5px;
}
@media(prefers-color-scheme:dark){
body,
button,
a,
input,
main{
background-color:#000!important;
color:#acb!important;
}
button{
border:1px solid #acb!important;
}
}