/*variables:
*/

:root{
--base-font-size:100%;
--base-margin:10%;

--color-0:#000000;  --rgba-0 :0,   0,   0  ;
--color-f:#ffffff;  --rgba-f :255, 255, 255;

--color-a1:#c0c0c0; --rgba-a1:192, 192, 192;
--color-a2:#7f7f7f; --rgba-a2:127, 127, 127;
--color-a3:#3f3f3f; --rgba-a3:63,  63,  63 ;
--color-a4:#1f1f1f; --rgba-a4:31,  31,  31 ;
--color-a5:#0f0f0f; --rgba-a5:15,  15,  15 ;
--color-a6:#070707; --rgba-a6:7,   7,   7  ;
--color-a7:#030303; --rgba-a6:3,   3,   3  ;

--color-b1:#00ff00;
--color-b2:#007f00;
--color-b3:#003f00;
--color-b4:#001f00;
--color-b5:#000f00;
--color-b6:#000700;

--color-c1:#ffff00;

--color-d1:#ff0000; --rgba-d1:255, 0,   0  ;
}


/* general-use:
*/

*{margin:0; padding:0; text-decoration:none; list-style-type:none;}
*:focus{outline:1px dotted var(--color-f);}
body{color:var(--color-a2); background:var(--color-0); font-size:var(--base-font-size); font-family:"verdana",sans-serif;}
h1, hr{display:none;}
img{max-width:100%; height:auto; margin:0 auto;}

header{border-bottom:1px dotted var(--color-f); text-align:center;}
header img{filter:brightness(50%);}
header img:hover{filter:brightness(100%); animation:hueh 0.1s linear infinite;}
@keyframes hueh{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}

footer{color:var(--color-b1); font-family:"arial"; font-size:calc(var(--base-font-size) - 20%); word-spacing:4px; letter-spacing:0px; border:none; margin:32px 0 32px; padding:8px 0 0; border-top:1px dotted var(--color-b1); text-align:center; transition:1s;}
footer:hover{border-top:1px dotted var(--color-f);}
footer a:link{color:var(--color-f);}
footer a:hover{color:var(--color-b1);}
footer a:focus{color:var(--color-b1); background:var(--color-a3);}

nav ul{margin:16px 0 0; text-align:center; word-spacing:8px;}
nav li{display:inline;}
nav li strong{font-weight:normal;}
nav a:link{color:var(--color-f); border-bottom:1px dotted var(--color-f);}
nav a:hover, nav a:focus{color:#00ff00; border-bottom:4px solid #00ff00; animation:border-rainbow 1s linear infinite;}
nav a:focus{background:var(--color-b3); animation:border-rainbow 0.2s linear infinite;}
@keyframes border-rainbow{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}

.tipjar a:link{display:block; color:var(--color-b2); background:var(--color-b4); width:128px; margin:32px auto 32px; word-spacing:0px; letter-spacing:0px; font-weight:normal; text-align:center; border-radius:16px; font-family:"arial"; transition:0.2s;}
.tipjar a:hover, .tipjar a:focus{color:var(--color-f); background:var(--color-b2); word-spacing:1px; letter-spacing:1px; font-weight:bold; animation:tiphue 0.5s linear infinite;}
@keyframes tiphue{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}


/* index:
*/

.index{margin:0 var(--base-margin); background-attachment:fixed;}

.index header{animation:header-anim 3s linear infinite; border:none;}
.index header img{filter:brightness(64%); width:auto; height:auto; image-rendering:auto; image-rendering:auto;}
@keyframes header-anim{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}

.index .tipjar a:link{color:var(--color-a2); background:var(--color-a4);}
.index .tipjar a:hover, .index .tipjar a:focus{color:var(--color-f); background:var(--color-b2); word-spacing:1px; letter-spacing:1px; font-weight:bold; animation:tiphue 0.5s linear infinite;}


/* /sm:
*/

.sm{margin:0 var(--base-margin);}

.smwrapper{display:grid; grid-gap:16px; margin:16px 0; grid-template-areas:"pb""mm"; grid-template-columns:1fr;}

.pb{grid-area:pb; background:url("img/sm_pb-bg.png") var(--color-a5);}
.mm{grid-area:mm; background:url("img/sm_smmm-bg.png") var(--color-a5);}

.pb a:link, .mm a:link{display:block; text-align:center; color:var(--color-b1); background:rgba(var(--rgba-0),0.5); padding:16px; transition:0.2s;}

.pb a:hover, .mm a:hover, .pb a:focus, .mm a:focus{text-decoration:underline; color:var(--color-f); background:rgba(var(--rgba-f),0.1); transition:0s;}

.pb p, .mm p{text-align:left; padding:16px 4%;}

.pb img, .mm img{display:block; max-width:50%; width:auto; height:auto;}


/* /music:
*/

.music{margin:0 var(--base-margin);}

.songs li{border-bottom:1px solid var(--color-a5); margin:0 0 16px; font-family:"arial"; transition:0.3s;}
.songs li:hover{border-color:var(--color-a3); transition:0s;}
.songs li:first-child{margin-top:32px;}

a.dl-all:link{color:var(--color-c1);}
a.dl-all:hover, a.dl-all:focus{color:var(--color-f);}
a.dl-all:focus{background:var(--color-a2);}

a.music-dl:link{color:var(--color-a2); text-align:center;}
a.music-dl:hover, a.music-dl:focus{color:var(--color-f);}
a.music-dl:focus{background:var(--color-a3);}

a.music-yt:link{color:rgba(var(--rgba-d1),0.5); background:var(--color-a5); margin:0 4px 0 0; padding:2px 4px 0;}
a.music-yt:hover, a.music-yt:focus{color:var(--color-f); background:var(--color-a3); animation:ytblink 0.1s alternate infinite;}
a.music-yt:focus{background:var(--color-a2);}
@keyframes ytblink{from{color:rgba(var(--rgba-d1),1);}to{color:rgba(var(--rgba-0),1);}}


/* /mix:
*/

.mix{margin:0 var(--base-margin); text-align:left;}

.mix h2{color:var(--color-a3); margin:16px 0; font-size:var(--base-font-size);}

.mix div{margin:64px auto 0; border-bottom:8px solid var(--color-a4);}
.mix div.top{margin:32px auto 0;}
.mix div.bottom{border:none; margin-bottom:32px;}

.mix div img{margin:0 0 16px; filter:grayscale(100%); transition:0.2s; width:auto; height:auto; image-rendering:auto; image-rendering:auto;}
.mix div img:hover{filter:grayscale(0%); transition:1s;}

.mix div a:link{color:var(--color-b1); border-bottom:1px dotted var(--color-b1); font-size:calc(var(--base-font-size) + 20%); text-transform:uppercase;}
.mix div a:hover{color:var(--color-f); border-bottom:1px dotted var(--color-f);}

.mix ol {counter-reset:tracknumber; color:var(--color-a2);}
.mix ol li {margin-bottom:12px; font-size:calc(var(--base-font-size) - 20%); font-family:"arial";}
.mix ol li:before {content:counter(tracknumber,decimal-leading-zero)".\00a0"; counter-increment:tracknumber; color:var(--color-a3);}


/* /img:
*/

.img{margin:0 var(--base-margin);}

.img div {margin:16px 0; text-align:center;}
.img div img{image-rendering: optimizeSpeed; image-rendering: pixelated; width:128px; height:128px; margin:16px;}
.img div a:link{transition:0.4s;}
.img div a:hover{filter:brightness(200%) contrast(50%) grayscale(100%); transition:0s;}
.img div a:focus{animation:imghue 0.1s alternate infinite;}
@keyframes imghue{from{filter:brightness(100%) contrast(100%) grayscale(0%);}to{filter:brightness(200%) contrast(90%) grayscale(100%);}}


/* responsiveness:
*/

@media (min-width: 64px) {
*{font-size:calc(var(--base-font-size) - 10%);}
nav ul{font-size:calc(var(--base-font-size) + 60%); word-spacing:16px;}
}

@media (min-width: 600px) {
:root{--base-margin:15%;}
footer{font-size:calc(var(--base-font-size) - 10%); word-spacing:4px; letter-spacing:1px; padding:12px 0 0;}
a.music-yt:link{margin:0 8px 0 0; padding:0px 8px;}
.songs li{font-family:"verdana";}
.mix div{margin:48px auto 0; border-bottom:12px solid var(--color-a4);}
.mix h2{font-size:calc(var(--base-font-size) + 20%);}
.mix ol li{font-family:"verdana";}
.sm div{grid-template-areas:"pb mm"; grid-template-columns:1fr 1fr;}
}

@media (min-width: 800px) {
:root{--base-margin:20%;}
*{font-size:var(--base-font-size);}
a.music-yt:link{margin:0 16px 0 0; padding:0px 16px;}
.mix div{margin:64px auto 0;}
.mix h2{font-size:calc(var(--base-font-size) + 40%);}
.tipjar a:link{width:178px;}
.pb img, .mm img{max-width:60%;}
}

@media (min-width: 1200px) {
:root{--base-margin:22.5%;}
*{font-size:calc(var(--base-font-size) + 10%);}
footer{font-size:var(--base-font-size); word-spacing:6px; letter-spacing:2px; margin:48px 0 32px; padding:16px 0 0;}
nav ul{margin:16px 0 0; word-spacing:32px; font-size:calc(var(--base-font-size) + 10%);}
.songs li{margin:0 0 24px;}
.songs li:first-child{margin-top:48px;}
.mix div{margin:80px auto 0; border-bottom:16px solid var(--color-a3);}
.mix ol li {font-size:calc(var(--base-font-size) - 30%);}
.tipjar a:link{margin:48px auto 48px;}
.bb-play {height:274px; width:150px;}
.bb-rewind {height:154px; width:90px;}
.txt p{margin:0 8% 32px;}
.txt strong{margin-bottom:16px;}
.img div img{width:256px; height:256px;}
}

@media (min-width: 1800px) {
:root{--base-margin:25%;}
*{font-size:calc(var(--base-font-size) + 15%);}
footer{margin:64px 0 48px;}
.songs li{border-bottom:4px solid var(--color-a5); margin:0 0 48px;}
.songs li:first-child{margin-top:64px;}
.mix div{margin:96px auto 0;}
.mix div.top{margin:48px auto 0;}
.mix div.bottom{margin-bottom:64px;}
.tipjar a:link{width:256px; margin:64px auto 64px;}
.pb img, .mm img{max-width:100%;}
}

@media(min-width: 2400px) {
*{font-size:calc(var(--base-font-size) + 20%);}
.mix ol li {font-size:calc(var(--base-font-size) - 10%);}
}

@media(min-width: 3800px) {
*{font-size:calc(var(--base-font-size) + 35%);}
footer{font-size:calc(var(--base-font-size) + 60%); word-spacing:8px; letter-spacing:4px; margin:96px 0 64px;}
nav ul{margin:64px 0 0; word-spacing:64px; font-size:calc(var(--base-font-size) + 40%);}
.smwrapper{grid-gap:48px; margin:48px 0;}
.index header img{width:970px; height:762px; image-rendering: optimizeSpeed; image-rendering: pixelated;}
.songs li{margin:0 0 64px;}
.mix div{margin:128px auto 0; border-bottom:24px solid var(--color-a3);}
.mix div.top{margin:80px auto 0;}
.mix div.bottom{margin-bottom:96px;}
.img div img{width:512px; height:512px;}
.mix div img{width:600; height:600; image-rendering: optimizeSpeed; image-rendering: pixelated;}
.mix h2{margin:24px 0; font-size:calc(var(--base-font-size) + 80%);}
.mix ol li {margin-bottom:24px; font-size:calc(var(--base-font-size) + 10%);}
.pb img, .mm img{width:420px; height:540px;}
.pb p, .mm p{padding:32px 4%;}
.pb a:link, .mm a:link{padding:32px;}
}

@media(min-width: 7000px) {
*{font-size:calc(var(--base-font-size) + 60%);}
footer{font-size:calc(var(--base-font-size) + 80%); word-spacing:16px; letter-spacing:8px; margin:128px 0 96px;}
nav ul{margin:96px 0 0; word-spacing:96px; font-size:calc(var(--base-font-size) + 60%);}
.smwrapper{grid-gap:96px; margin:96px 0;}
.index header img{width:1940px; height:1524px;}
.img div img{width:1024px; height:1024px;}
.songs li{margin:0 0 96px;}
.mix div{margin:256px auto 0; border-bottom:64px solid var(--color-a3);}
.mix div.top{margin:128px auto 0;}
.mix div.bottom{margin-bottom:256px;}
.mix ol li {margin-bottom:48px; font-size:calc(var(--base-font-size) + 30%);}
.mix h2{margin:32px 0; font-size:calc(var(--base-font-size) + 120%);}
.mix div img{width:1200; height:1200; margin:0 0 16px;}
.pb img, .mm img{width:840px; height:1080px;}
.pb p, .mm p{padding:64px 4%;}
.pb a:link, .mm a:link{padding:64px;}
}