@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,300;0,400;1,700&display=swap');

/*# sourceMappingURL=theme.css.map */


html {
    color: #333;
    font-family: 'Overpass', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Overpass', sans-serif;;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 0.75em;
}

.music__description{
    margin-bottom: 2em;
}

.audiofield-wavesurfer .player-button.playpause {
    width: auto;
    background: #d1d1d1;
    margin-bottom:1em;
}

.waveform {
    margin-bottom:1em;
}

table caption {
    text-align: left;
    font-size: 1.3em;
    margin: 3em 0 2em;
}

.range
{
  width: 400px;
  height: 15px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}

	input[type="range"] {
		outline: 0;
		border: 0;
		border-radius: 500px;
		width: 200px;
		max-width: 100%;
		margin: 24px 0 16px;
		transition: box-shadow 0.2s ease-in-out;
	}

		input[type="range"] ::-moz-range-progress {
			background-color: #555;
		}
		input[type="range"] ::-moz-range-track {
			background-color: #aaa;
		}

		input[type="range"] ::-ms-fill-lower {
			background-color: #aaa;
		}
		input[type="range"] ::-ms-fill-upper {
			background-color: #555;
		}
		@media screen and (-webkit-min-device-pixel-ratio: 0) {
			input[type="range"] {
				overflow: hidden;
				height: 15px;
				-webkit-appearance: none;
				background-color: #ddd;
			}
			input[type="range"]::-webkit-slider-runnable-track {
				height: 15px;
				-webkit-appearance: none;
				color: #444;
				// margin-top: -1px;
				transition: box-shadow 0.2s ease-in-out;
			}
			input[type="range"]::-webkit-slider-thumb {
				width: 15px;
				-webkit-appearance: none;
				height: 15px;
				cursor: ew-resize;
				background: #fff;
				box-shadow: -340px 0 0 320px #aaa, inset 0 0 0 15px #aaa;
				border-radius: 50%;
				transition: box-shadow 0.2s ease-in-out;
				position: relative;
				// top: 1px;
			}
			input[type="range"]:active::-webkit-slider-thumb {
				background: #fff;
				box-shadow: -340px 0 0 320px #666, inset 0 0 0 3px #333;
			}
		}
		
.site-name {
    font-size: 2.2em;
    line-height: 2.3em;
    font-weight: 300;
    padding: 0 0 0.5em;
    margin: 0;
}

h1 {
    font-size: 2.2em;
    line-height: 3em;
}