h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

body {
  background-image: url("../img/wl.jpg");
  background-position: top;
  background-size: contain;
  background-repeat: repeat;
}

#cutie {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 96vw;
}

#chenar {
	position: relative;
	text-align: center;
	width: 94vw;
	height: fit-content;
	background-color:#ffffbf;
	border-radius: 10px;
	border-width: 3px;
	border-style: solid;
	border-style: outset;
	border-color: coral;
	margin: 5px;
	padding: 5px;

}

#controls {
	width: 90px;
	float: left;
}

#controls button {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	/* margin-left: 10px; */
}

#progress {
   margin-left: 90px;
   border: 1px solid green;
	 /* margin-right: 10px; */
}

#bar {
   height: 20px;
   background-color: green;
   width: 0;
}

#expimg {
width: 90vw;
height: auto;
margin-bottom: 20px;
}

#volume-bar{
	margin: 10px;
    width: 100%;
    display:table-cell;
}

#volumerange{
	width: auto;
    position: relative;
	display: flex;
	align-items: center;
	justify-content:center
}


label[for=potentiometru] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

/* style volume bar */
input[type=range] {
   -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
   width: 50vw;
   height: 6px;
   background: green;
   border: none;
   border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 24px;
   width: 24px;
   border-radius: 50%;
   background: goldenrod;
   margin-top: -8px;
}
input[type=range]:focus {
   outline: none;
}
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: green;
}
input[type=range] {
   /*required for proper track sizing in FF*/
   width: 50vw;
}
 input[type=range]::-moz-range-track {
   width: 50vw;
   height: 6px;
   background: green;
   border: none;
   border-radius: 6px;
}
 input[type=range]::-moz-range-thumb {
   border: none;
   height: 24px;
   width: 24px;
   border-radius: 50%;
   background: goldenrod;
}

 input[type=range]:focus::-moz-range-track {
   background: green;
}