.content {
    display: flex;
    flex-direction: column; /* Change the main axis to vertical */
    height: 100vh;
}

.left-content {
    /* Contains the menu and the LED display */
    display: flex;
    flex-direction: row; /* Stack them vertically */
}

#menu, .led-wrapper {
    /* Ensure these don't expand to take up unnecessary space */
    width: 20%; /* Take full width of their container */
}

#menu div {
    cursor: pointer; /* Changes cursor to indicate clickable items */
    padding: 10px; /* Adds padding to each menu item for better clickability */
    margin-bottom: 5px; /* Adds space between items */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#menu div:hover {
    background-color: #dcdcdc; /* Light shade on hover */
    text-decoration: underline; /* Underlines text on hover */
}

#menu div:active {
    background-color: #bbbbbb; /* Darker shade to indicate active click */
}
.led-wrapper {
    /* The width of the LED wrapper is no longer a percentage of the content area;
       it is set to be fixed at 300px. */
    width: 150px; /* Fixed width */
    /* The height is set directly instead of using padding-top to maintain aspect ratio. */
    height: 200px; /* Fixed height */
    position: relative; /* Needed for absolute positioning of child elements */
}

#led-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.segment {
    background-color: lightgray;
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Horizontal segments */
#seg-a, #seg-d, #seg-g {
    width: 33%; /* Make horizontal segments wider */
    height: 10%; /* Make horizontal segments thinner */
    left: 50%; /* Center horizontally */
}

#seg-a { top: 10%; }
#seg-g { top: 50%; }
#seg-d { top: 90%; }

/* Vertical segments */
#seg-b, #seg-c, #seg-e, #seg-f {
    width: 10%; /* Make vertical segments narrower */
    height: 35%; /* Make vertical segments longer */
}

#seg-b { top: 30%; right: 20%; }
#seg-c { bottom: -5%; right: 20%; }
#seg-e { bottom: -5%; left: 30%; }
#seg-f { top: 30%; left: 30%; }

/* Decimal point */
.decimal {
    width: 10%;
    height: 10%;
    background-color: lightgray;
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    right: 5%;
    transform: translate(-50%, -50%);
}

/* Horizontal segments with rounded ends */
.segment.horizontal {
    height: 10%; /* Adjust the height to your preference */
    border-radius: 50px; /* First value is the horizontal radius, second value is the vertical radius */
}

/* Vertical segments with rounded ends */
.segment.vertical {
    width: 10%; /* Adjust the width to your preference */
    border-radius: 50px; /* First value is the horizontal radius, second value is the vertical radius */
}
#explanation {
    background-color: #f8f8f8;
    color: #333;
    padding: 10px 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    margin-top: 20px; /* Space between LED display and explanation */
    overflow-y: auto; /* Allows scrolling for overflow content */
    flex-grow: 1; /* Takes up remaining space */
}

#explanation p {
    margin-bottom: 1em; /* Add space between paragraphs if you have more than one */
    text-align: left; /* Align text to the left for paragraph readability */
}