/* @ Made by Sciencesid 5/3/26 */
body {
  overflow-x: none;
}
p {
  font-size: 13px;
}

button {
  width: 10%;
  height: 20%;
}

.slider {
  width: 70%;
  height: auto;

}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.slidecontainer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  align-items: center;
  max-width: 90%;
}

.gMeter {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #cccccc;
border-radius: 50%;
overflow: hidden;
}

.ball {
position: absolute;
top: 90px;
left: 90px;
width: 20px;
height: 20px;
background: red;
border-radius: 100%;
} /* courtesy of Mozilla Developer Network */
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px dashed #555;
border-radius: 50%;
display: flex;
align-items: flex-start;
justify-content: center;
}
.ring span {
color #555;
font-size: 10px;
margin-top: 2px;
}
.g1 {width: 33.3%; height: 33.3%;}
.g2 {width: 66.6%; height: 66.6%;}
.g3 {width: 100%; height: 100%; border-style: solid;}
.vMeter {
position: relative;
width: 20px;
height: 200px;
/*background: #1a1a1a;*/
border: 2px solid #333;
border-radius: 10px;
display: inline-block;
vertical-align: top;
margin-left: 15px;
}

.vTrack {
position: absolute;
left: 50%;
top: 10%;
bottom: 10%;
width: 1px;
/* background: #444; */
transform: translateX(-50%);
}

.vBall {
position: absolute;
left: 50%;
top: 50%; /* Starts at 0G */
width: 16px;
height: 16px;
background: red;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: top 0.05s ease-out;
}

.vLabel {
position: absolute;
bottom: -20px;
width: 100%;
text-align: center;
font-size: 10px;
color: #888;
}
  .gMeter, .vMeter {
  display: inline-block;
  vertical-align: middle;
}