:root {
    --min-display-size: min(25vw, 25vh);
}

.display {
    position: relative;
    width: calc( 0.4 * var(--min-display-size));
    height: calc(var(--min-display-size));
    margin: 2vh; /* 2% of viewport height */
}

.dial-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dial-contain {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(0.2 * var(--min-display-size));
}

.segment {
    position: absolute;
    background-color: red;
    opacity: 0.05;
    transition: opacity 0.2s;
}

.on {
    opacity: 1;
    background-color: red;
}

.dial-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: calc(0.02 * var(--min-display-size));
}


.inc-dec-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: calc(0.01 * var(--min-display-size));
    background-color: white;
    color: black;
    border-radius: calc(0.1 * var(--min-display-size));
    padding: calc(0.05 * var(--min-display-size)) calc(0.2 * var(--min-display-size)); /* Increased horizontal padding */
    font-size: calc(0.1 * var(--min-display-size));
    box-shadow: 0 calc(0.04 * var(--min-display-size)) calc(0.06 * var(--min-display-size)) rgba(0, 0, 0, 0.1);
    border: calc(0.02 * var(--min-display-size)) solid #ccc;
    transition: transform 0.2s, box-shadow 0.2s;
}

.inc-dec-button:active {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

/* Segment shapes and positions */
.a { top: 0; left: 10%; width: 80%; height: calc(0.05 * var(--min-display-size)); }
.b { top: calc(0.05 * var(--min-display-size)); right: 0; width: calc(0.05 * var(--min-display-size)); height: 40%; }
.c { bottom: calc(0.05 * var(--min-display-size)); right: 0; width: calc(0.05 * var(--min-display-size)); height: 40%; }
.d { bottom: 0; left: 10%; width: 80%; height: calc(0.05 * var(--min-display-size)); }
.e { bottom: calc(0.05 * var(--min-display-size)); left: 0; width: calc(0.05 * var(--min-display-size)); height: 40%; }
.f { top: calc(0.05 * var(--min-display-size)); left: 0; width: calc(0.05 * var(--min-display-size)); height: 40%; }
.g { top: 45%; left: 10%; width: 80%; height: calc(0.05 * var(--min-display-size)); }

.move-counter {
    color: white;
    font-family: system-ui, sans-serif;
    font-size: calc(0.125 * var(--min-display-size)); /* Adjust the multiplier as needed */
}