@import"https://fonts.googleapis.com/css?family=Jaldi&display=swap";body{display:flex;height:100vh;margin:0;background:#fff;font-family:Jaldi,sans-serif;font-size:14px;color:#fff}#title{color:#000;text-align:center;opacity:1}.container{position:relative;width:100%}#wrapper{margin:auto;display:flex;flex-direction:column;align-items:center}p{-webkit-user-select:none;-moz-user-select:none;user-select:none}#info{opacity:.2;margin:0;text-align:center}#termometer{width:50px;background:#38383f;height:580px;position:relative;border:9px solid #2a2a2e;border-radius:20px;z-index:1;margin-bottom:100px}#termometer:before,#termometer:after{position:absolute;content:"";border-radius:50%}#termometer:before{width:100%;height:59px;bottom:9px;background:#38383f;z-index:-1}#termometer:after{transform:translate(-50%);width:100px;height:100px;background-color:#3dcadf;bottom:-91px;border:9px solid #2a2a2e;z-index:-3;left:50%}#termometer #graduations{height:59%;top:20%;width:50%}#termometer #graduations,#termometer #graduations:before{position:absolute;border-top:2px solid rgba(0,0,0,.5);border-bottom:2px solid rgba(0,0,0,.5)}#termometer #graduations:before{content:"";height:34%;width:100%;top:32%}#termometer #temperature{bottom:0;background:linear-gradient(#046108,#3dcadf) no-repeat bottom;width:100%;border-radius:20px;background-size:100% 580px;transition:all .2s ease-in-out}#termometer #temperature,#termometer #temperature:before,#termometer #temperature:after{position:absolute}#termometer #temperature:before{content:attr(data-value);background:#000000b3;color:#fff;z-index:2;padding:5px 10px;border-radius:5px;font-size:5em;line-height:1;transform:translateY(50%);left:calc(100% + 1em);top:calc(-1em - 5px)}#termometer #temperature:after{content:"";border-top:2.7777777778em solid transparent;border-bottom:2.7777777778em solid transparent;border-right:5em solid rgba(0,0,0,.7);left:100%;top:calc(-5em / 1.8 + 5px)}#playground{font-size:1.1em}#playground #range{display:flex}#playground #range input[type=text]{width:2em;background:transparent;border:none;color:inherit;font:inherit;margin:0 5px;padding:0 5px;border-bottom:2px solid transparent;transition:all .2s ease-in-out}#playground #range input[type=text]:focus{border-color:#3dcadf;outline:none}#playground #range input[type=text]:first-child{text-align:right}#playground #unit{width:100%;margin:0;text-align:center}#playground #unit:hover{cursor:pointer}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;margin:5.5px;width:100%}input[type=range]::-moz-focus-outer{border:0}input[type=range]:hover{cursor:pointer}input[type=range]:focus{outline:0}input[type=range]:focus::-webkit-slider-runnable-track{background:#313137;border-color:#313137}input[type=range]:focus::-ms-fill-lower{background:#2a2a2e}input[type=range]:focus::-ms-fill-upper{background:#313137;border-color:#313137}input[type=range]::-webkit-slider-runnable-track{height:10px;width:100%;cursor:pointer;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;box-shadow:1px 1px 1px transparent,0 0 1px #0d0d0d00;background:#2a2a2e;border:2px solid #2a2a2e;border-radius:5px}input[type=range]::-webkit-slider-thumb{box-shadow:4px 4px 4px transparent,0 0 4px #0d0d0d00;background:#3dcadf;border:0px solid #3d3d44;border-radius:12px;cursor:pointer;height:11px;width:18px;-webkit-appearance:none;margin-top:3px}input[type=range]::-moz-range-track{box-shadow:1px 1px 1px transparent,0 0 1px #0d0d0d00;width:100%;cursor:pointer;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:#2a2a2e;border:2px solid #2a2a2e;border-radius:5px;height:5px}input[type=range]::-moz-range-thumb{box-shadow:4px 4px 4px transparent,0 0 4px #0d0d0d00;background:#3dcadf;border:0px solid #3d3d44;border-radius:12px;cursor:pointer;height:7px;width:14px}input[type=range]::-ms-track{height:10px;width:100%;cursor:pointer;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:transparent;border-color:transparent;border-width:5.5px 0;color:transparent}input[type=range]::-ms-fill-lower{box-shadow:1px 1px 1px transparent,0 0 1px #0d0d0d00;background:#222226;border:2px solid #2a2a2e;border-radius:10px}input[type=range]::-ms-fill-upper{box-shadow:1px 1px 1px transparent,0 0 1px #0d0d0d00;background:#2a2a2e;border:2px solid #2a2a2e;border-radius:10px}input[type=range]::-ms-thumb{box-shadow:4px 4px 4px transparent,0 0 4px #0d0d0d00;background:#3dcadf;border:0px solid #3d3d44;border-radius:12px;cursor:pointer;height:7px;width:14px;margin-top:2.5px}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:not-allowed}input[type=range]:disabled::-ms-fill-lower{cursor:not-allowed}input[type=range]:disabled::-ms-fill-upper{cursor:not-allowed}