@font-face{font-family:Comic-Sans-MS;src:local('Comic Sans MS'),url(../font/comic-sans-ms.woff2) format('woff2')}

body.dark-mode {
    background-color: #111;
    color: #f8f8f8;
}
body.dark-mode h1 {
    color: #f8f8f8;
}
body.dark-mode a,
body.dark-mode #print,
body.dark-mode #back {
color:#f8f8f8;
}
body.dark-mode a:hover,
body.dark-mode #print:hover,
body.dark-mode #back:hover {
color:#fff590;
}
html{color-scheme:light dark;forced-color-adjust:none}
body{font:22px/1.6em Comic-Sans-MS,sans-serif;word-spacing:.14em;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#f8f8f8;margin:15px 10% 100px 10%}
p{padding:.3em 0 .3em 0}
.top{max-width:730px;display:flex}
.mar-t{margin-top:1.6em}
#back,#print,a{display:inline-block;color:#009;text-decoration:underline;padding:4.5px 0 4.5px 0}
a:hover,#back:hover,#print:hover{color:#900;text-decoration:none;cursor:pointer}
#print{margin-left:auto}
.footer{padding-bottom:100px}
audio{width:550px;transform:scale(1.1);transform-origin:left;margin:0 0 20px 0;border-radius:50px;forced-color-adjust:auto}
#volumeControl{background:color:#5C5C5C;margin:auto;color:#f8f8f8}
*:focus{outline:3px #f33 solid;outline-offset:4px}
.vsl{display:flex;align-items:center;width:290px;height:17px;margin-top:25px}
input{-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer;width:15rem}
input{-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer;width:15rem}
input:focus{outline:0}
input::-webkit-slider-runnable-track{background-color:#969696;border-radius:.5rem;height:.5rem}
input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-8px;background-color:#5cd5eb;height:25px;width:12px;border:1px solid #5cd5eb}
input::-moz-range-track{background-color:#969696;border-radius:.5rem;height:.5rem}
input::-moz-range-thumb{border:none;border-radius:0;background-color:#5cd5eb;height:25px;width:12px;border:1px solid #5cd5eb}
input:focus::-webkit-slider-thumb{outline:#f33 solid 3px;outline-offset:4px}
input:focus::-moz-range-thumb{outline:#f33 solid 3px;outline-offset:4px}

audio::-webkit-media-controls{outline:none}
audio::-webkit-media-controls-play-button:focus{outline:3px solid #f33}

@media screen and (max-width:1023px) {
body{margin:50px 15px 100px 25px;font-size:36px}
#back,#print,a{padding:0}
h1{font-size:55px}
.footer{padding-bottom:150px}
audio{width:49%;transform:scale(1.8);margin:60px 0 40px 0}
.vsl{display:none}
*:focus{outline:5px #f33 solid;outline-offset:5px}
audio::-webkit-media-controls{outline:none}
audio::-webkit-media-controls-play-button:focus{outline:4px solid #f33}
.lyrics{margin:auto;width:760px}
}
@media print {
body{background:#fff;color:#000;font-family:arial,helvetica,sans-serif}
p,div,a{color:#000;font-size:16px;line-height:26px;border:0}
body.dark-mode h1{font-size:22px;color:#000}
#back,#print,#track,a{display:none}
}