style.css

@font-face{font-display:swap;font-family:'league_mono_variableregular';src:url("font/league_mono_variableregular.ttf") format("truetype"),url("font/league_mono_variableregular.woff2") format("woff2-variations"),url("font/league_mono_variableregular.woff2") format("woff2");font-weight:30 200;font-stretch:50 200}@font-face{font-display:swap;font-family:'league_spartanbold';src:url("font/leaguespartan-bold-webfont.woff2") format("woff2"),url("font/leaguespartan-bold-webfont.woff") format("woff");font-weight:normal;font-style:normal}body{font-family:'league_spartanbold', sans-serif;font-size:48px;line-height:1.2;word-break:break-word;background:#FFF;color:#39424E;margin:100px auto;width:100%;height:100%;display:flex;display:-webkit-flex;justify-content:center;align-items:center;text-rendering:geometricPrecision}div{width:auto;height:auto;margin:0 auto;text-align:center}textarea{position:fixed;top:0;left:0;height:100%;width:100%;opacity:0}a{color:#52A2F4;transition:0.4s all}a:visited{color:#52A2F4}a:hover{color:#0471E1;cursor:pointer;transition:0.4s all}#preview-container{display:flex;display:-webkit-flex;justify-content:center;align-items:center;padding:0 100px;font-family:'league_mono_variableregular', mono;height:auto;display:inline-block;padding:0 5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}#preview{color:#000;font-weight:80;font-variation-settings:"wdth" 100}#attribution{position:absolute;bottom:50px;left:50px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-family:'league_spartanbold', serif;font-size:12px;line-height:1;text-align:left;text-transform:none;letter-spacing:0.5px;border:none;border-radius:0;padding:0}.slidecontainer{text-align:left}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;border-radius:24px;background:#ffffff;cursor:pointer;margin-top:-8px;box-shadow:1px 1px 6px 0 #ACB9C8}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 6px 0 #ACB9C8;height:24px;width:24px;border-radius:24px;background:#ffffff;cursor:pointer}input[type=range]::-ms-thumb{box-shadow:1px 1px 6px 0 #ACB9C8;height:24px;width:24px;border-radius:24px;background:#ffffff;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;cursor:pointer;background:#DFE7EF;border-radius:8px}input[type=range]:focus::-webkit-slider-runnable-track{background:#DFE7EF}input[type=range]::-moz-range-track{width:100%;height:8px;cursor:pointer;background:#DFE7EF;border-radius:1.8px}input[type=range]::-ms-track{width:100%;height:8px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#DFE7EF;border-radius:8px}input[type=range]:focus::-ms-fill-lower{background:#DFE7EF}input[type=range]::-ms-fill-upper{background:#DFE7EF;border-radius:8px}input[type=range]:focus::-ms-fill-upper{background:#DFE7EF}@media (max-width: 1279px){#attribution{font-size:8px;line-height:1}}@media (max-width: 1079px){#attribution{display:none}}@media (max-width: 991px){body{font-size:24px;margin:50px auto}#preview-container{padding:0 50px}#footer{bottom:25px;left:calc(50% - 63.11px)}#label{font-size:12px}#artist{font-size:16px}#attribution{display:none}}