body {
    background-color: #efeddb;
    display: block;
    max-width: 100ch;
    margin-inline: auto;
    padding: 32px;
}

#controls { 
    max-width: 700px; 
}

.container { 
    width: 100%;
    max-width: 700px; 
}
    
svg { 
    /* margin: 20px auto;
    margin-top: 20px; 
    border: 1px solid #ccc; 
    display: block; */
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    overflow: visible;
}

/* slider style */
.noUi-target {
    background: linear-gradient(to right, #f5f5f5, #e0e0e0);
    height: 12px;
}
  
.noUi-connect {
    background: linear-gradient(to right, #76c0fd, #011315); /* Blue gradient */
}
  
.noUi-handle {
    width: 10px;
    height: 10px;
    border: 3px solid #2196F3;
    background: #fff;
}

/*tooltip for sliders*/
.noUi-tooltip {
    display: block !important;
}
.noUi-target:hover .noUi-tooltip,
.noUi-handle:hover .noUi-tooltip {
  display: block;
}

/*make sliders away from each other*/
.slider-container {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
}
.slider-label {
    width: 120px;
    margin-bottom: 10px;
    font-weight: bold; 
}

svg {
    width: 100%; /* Scales to container */
    height: auto; /* Maintains aspect ratio */
}

.slider-wrapper {
    flex-grow: 1;
}

.slider-wrapper > div {
    width: 100%;
}

div.writeup {
    margin-top: 40px;
}

.tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

circle {
    pointer-events: all; /* Ensures circles capture mouse events */
}

.hidden {
    display: none;
}

h2.title {
    margin-top: 30px;
    margin-bottom: 30px;
}

h2.write_up {
    margin-top: 80px;
    margin-bottom: 30px;
}

#gender-scheme, #glucose-scheme {
    display: inline-block;
    margin-right: 20px;
}

h1 {
    margin-bottom: 30px;
}

h3#team-member {
    margin-bottom: 80px;
}