footer{background-color:var(--menu);color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:10px 0;font-family:Knewave,sans-serif;font-size:1.5em;display:flex;position:relative;bottom:0;& p,& label{color:#fff}@media (width>=835px){padding-left:300px}}.recently-visited.mobile{background-color:var(--menu);color:#fff;flex-direction:column;justify-content:center;align-items:center;margin:0 20px 20px;display:flex;@media (width>=835px){display:none}& h2{color:#fff;margin:0 0 .5rem;font-family:Oswald,sans-serif;font-size:1em;font-weight:400}& ul{flex-direction:column;display:flex;& li{list-style-type:none;& a{color:#fff;font-family:Oswald,sans-serif;font-size:1rem;line-height:1.5;text-decoration:none;display:block;&:hover{text-decoration:underline}}}}}.subscribe.mobile{background-color:var(--menu);color:#fff;flex-direction:column;justify-content:center;align-items:center;margin:0 20px 20px;display:flex;@media (width>=835px){display:none}& form{flex-direction:column;justify-content:center;align-items:center;margin:0;display:flex}& p{margin:0;font-size:1rem}& label{color:#fff;font-size:1rem}& input{width:100%}& button{margin-top:1rem}}.nav-container{color:#fff;background-color:var(--menu);box-sizing:border-box;flex-flow:wrap;justify-content:space-between;align-items:center;width:100%;padding:1rem;font-size:1.5em;display:flex;position:relative;@media (width>=835px){flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:1rem;width:280px;height:100%}& a{color:#fff;max-height:100px;padding-right:1rem;font-family:Knewave,sans-serif;text-decoration:none;& img{width:50px;height:50px;@media (width>=835px){width:100px;height:100px}}}& .title{color:#fff;margin-left:1rem;@media (width>=835px){margin:0;display:block}@media (width>=1200px){margin-bottom:1rem;font-size:1.5em}}& .sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}#nav-toggle{cursor:pointer;z-index:1000;background:0 0;border:none;width:30px;height:20px;margin:0 1rem 0 0;position:relative;@media (width>=835px){display:none}}#nav-toggle:before,#nav-toggle:after,#nav-toggle span{content:"";background:var(--white);width:100%;height:4px;transition:transform .3s,opacity .3s;display:block;position:absolute}#nav-toggle:before{top:0}#nav-toggle span{top:50%;transform:translateY(-50%)}#nav-toggle:after{bottom:0}#nav-toggle.open:before{transform:translateY(8px)rotate(45deg)}#nav-toggle.open span{opacity:0}#nav-toggle.open:after{transform:translateY(-8px)rotate(-45deg)}#nav-menu{background-color:var(--menu);visibility:hidden;z-index:999;border-bottom:2px solid #fff;width:100%;max-height:0;padding:1rem;transition:max-height .3s ease-out;position:absolute;top:0;left:0;@media (width>=835px){visibility:visible;align-items:flex-start;width:auto;max-height:none;padding-top:0;top:0}@media (width>=1024px){box-shadow:none;width:100%;position:relative;top:0}@media (width>=1550px){width:unset}}#nav-menu a{color:#fff;margin-left:1rem;text-decoration:none;display:block;@media (width>=835px){margin:0}@media (width>=1200px){margin-bottom:1rem;font-size:1em;line-height:1}}#nav-menu a:hover{color:#603d34;@media (width>=1200px){color:#603d34}}#nav-menu a.has-favs:after{content:" ★";font-size:.8em}#nav-menu a:focus-visible{outline:2px solid var(--white);outline-offset:2px}#nav-toggle:focus-visible{outline:2px solid var(--white);outline-offset:4px}.open~#nav-menu{visibility:visible;max-height:500px}.header-block{& h2,& h3{color:#fff;margin:0;font-family:Oswald,sans-serif;font-size:1em;font-weight:400}& ul{flex-direction:column;display:flex;& li{margin:0;padding:0;list-style-type:none;& a{word-wrap:break-word;font-family:Oswald,sans-serif;font-size:1rem;line-height:1.5;display:block;&:hover{text-decoration:underline}}}}&.popular-mixes,&.search,&.recently-visited{display:none;@media (width>=835px){box-sizing:border-box;width:100%;display:block}}& form,& input{box-sizing:border-box;width:100%}& input{border:none;border-radius:0}& button{border:2px solid var(--white)}}.subscribe.non-mobile{background-color:var(--menu);color:#fff;flex-direction:column;justify-content:center;align-items:center;display:none;@media (width>=835px){box-sizing:border-box;width:100%;display:flex}& form{flex-direction:column;justify-content:center;align-items:center;margin:0;display:flex}& p{margin:0;font-size:1rem}& label{color:#fff;font-size:1rem}& input{width:100%}& button{margin-top:1rem}}:root{--menu:#5d3fd3;--white:#fff;--text:#333}.skip-link{background:var(--menu);color:var(--white);z-index:9999;padding:.5rem 1rem;font-weight:700;text-decoration:none;position:absolute;top:-100%;left:0}.skip-link:focus{top:0}*{box-sizing:border-box;margin:0;padding:0}:before,:after{box-sizing:border-box}::selection{background:var(--menu);color:var(--white)}html,body{text-rendering:optimizelegibility;background-color:var(--white);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Oswald,sans-serif;font-size:1rem;line-height:1.5}input{box-sizing:border-box;border:3px solid var(--text);border-radius:4px;height:3rem;margin:0;padding:.5rem}form{flex-direction:row;justify-content:space-between;align-items:center;width:100%;display:flex;& button{height:3rem;margin-bottom:0}}textarea{border:3px solid var(--text);border-radius:4px;width:100%;margin:.5rem 0;padding:.5rem}label{color:var(--text);margin:.5rem 0}button{background:var(--menu);color:var(--white);cursor:pointer;box-sizing:border-box;height:3rem;margin:0;padding:.5rem 1rem}@font-face{font-family:Knewave;src:url(/fonts/Knewave-Regular.woff2)format("woff2");font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Oswald;src:url(/fonts/Oswald-VariableFont_wght.woff2)format("woff2");font-display:swap;font-weight:200 700;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}html{height:100%;min-height:100%}body{box-sizing:border-box;color:var(--text);height:100%;min-height:100%;margin:0;padding:0;font-family:Oswald,sans-serif;font-size:18px}div.page-container{flex-direction:column;width:100%;min-height:100%;display:flex;position:relative;& main{flex-direction:column;flex-grow:1;align-items:center;margin:0 auto;display:flex}@media (width>=835px){flex-direction:row}}.container{max-width:1000px}div.logoandtitle{@media (width<=835px){text-align:center}flex-direction:row;justify-content:space-around;align-items:center;width:100%;display:flex}h1,h2{color:#333;margin:10px;font-family:Knewave,sans-serif;font-size:3em;@media (width<=835px){font-size:1.75em}}h2{color:var(--menu);font-size:1.5rem;@media (width<=835px){font-size:1.5rem}}ul{margin:0;padding:0;list-style-type:none}ol{@media (width<=835px){padding:0 20px}color:#333;padding:0;& li{margin:0;padding:0}& li a,& li p{color:#333;text-decoration:none}}img{max-width:100%;height:auto}button{background-color:var(--menu);color:var(--white);cursor:pointer;border:none;height:2.5rem;margin-bottom:1rem;padding:.5rem 1rem;font-family:Oswald,sans-serif;font-size:1rem}select{background-color:var(--menu);color:var(--white);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;background-size:.6rem;border:none;height:2.5rem;margin-bottom:1rem;padding:.5rem 3rem .5rem 1rem;font-family:Oswald,sans-serif;font-size:1rem}.fav-btn{color:var(--text);border:2px solid var(--text);background:0 0;height:auto;margin-bottom:1rem;padding:.25rem .75rem;font-size:1rem;transition:background .15s,color .15s;&:hover,&.fav-btn--active{background:var(--menu);color:var(--white);border-color:var(--menu)}&.fav-btn--inline{vertical-align:middle;height:auto;margin:0 0 0 .4rem;padding:.1rem .4rem;font-size:1.1rem}}.dj-byline{flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0 1rem;display:flex;& .dj-byline__item{align-items:center;display:flex;& a{color:var(--menu);font-weight:600;text-decoration:none;&:hover{text-decoration:underline}}}}.your-djs-page{width:100%;padding:1rem;& p{margin-bottom:1rem;& a{color:var(--menu)}}}.your-djs-list{flex-wrap:wrap;gap:.75rem;margin-top:1rem;display:flex;& li{flex-basis:unset;align-items:center;gap:.25rem;display:flex;& a{background:var(--menu);color:var(--white);padding:.4rem 1rem;font-size:1rem;text-decoration:none;display:inline-block;&:hover{opacity:.85}&:focus-visible{outline:2px solid var(--menu);outline-offset:2px}}}}
