@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800); body { height: 100vh; background-image: radial-gradient(#374566, #010203); color: #ccc; font-family: Raleway; letter-spacing: 0.15em; font-size: 20px; } canvas { position: absolute; z-index: -1; top: 0; } #wishes { width: 20em; margin: calc(50vh - 6.7em) auto; border: 1px dotted; text-align: center; background: hsla(210, 50%, 15%, 0.75); } span { display: inline-block; } span.jump { animation: jump 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 2 alternate; } @keyframes jump { to { transform: translateY(-0.7em); } } #pleaseClick { position: absolute; background: hsla(210, 50%, 15%, 0.75); font-size: 80%; width: 10em; text-align: center; left: calc(50vw - 5em); top: calc(50vh - 12.5em); animation: jump 1s ease-in-out infinite alternate; } #pleaseClick span { font-size: 200%; } .control { text-align: center; } input[type="range"], input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18em; } input[type="range"]::-webkit-slider-thumb { background-color: #777; width: 20px; height: 20px; border: 3px solid #374566; border-radius: 50%; margin-top: -9px; } input[type="range"]::-moz-range-thumb { background-color: #777; width: 15px; height: 15px; border: 3px solid #333; border-radius: 50%; } input[type="range"]::-ms-thumb { background-color: #777; width: 20px; height: 20px; border: 3px solid #333; border-radius: 50%; } input[type="range"]::-webkit-slider-runnable-track { background-color: #777; height: 3px; } input[type="range"]:focus::-webkit-slider-runnable-track { outline: none; } input[type="range"]::-moz-range-track { background-color: #777; height: 3px; } input[type="range"]::-ms-track { background-color: #777; height: 3px; } input[type="range"]::-ms-fill-lower { background-color: HotPink; } input[type="range"]::-ms-fill-upper { background-color: black; }