style.css

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

body {
    display: flex;         /* Enables flexbox */
    flex-direction: column;/* Stacks child elements vertically */
    overflow: hidden;
}

.calculator {
    flex: 1;               /* This ensures .calculator takes up all available space */
}

textarea {
    width: 100%;
    height: 100%;
    border: none;
    padding: 5px;
    box-sizing: border-box;
    font-family: monospace;
    resize: none;
}

/* Quick Start Section Styling */
.quickstart {
    padding: 5px;
    background-color: #2c3e50;
    color: #ecf0f1;
    border-top: 1px solid #34495e;
    overflow-y: scroll; /* Change 'auto' to 'scroll' */
    max-height: 70vh; /* Limit the maximum height to 70% of the viewport height */
}

.quickstart h2 {
    margin-top: 0;
    font-size: 1.2em;
}

.quickstart a {
    color: #3498db;  /* A blue shade for links */
    text-decoration: none;
}

.quickstart a:hover {
    text-decoration: underline;
}

/* Quick Start Toggle Summary Styling */
.quickstart summary {
    padding: 5px 10px;
    cursor: pointer;
    color: #ecf0f1;
    background-color: #3498db;
    list-style: none;
    outline: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.quickstart summary::-webkit-details-marker {
    display: none; /* This will hide the default dropdown arrow in WebKit browsers. */
}

.quickstart summary:before {
    content: "▶";  /* Unicode right arrow */
    padding-right: 5px;
}

.quickstart[open] summary:before {
    content: "▼";  /* Unicode down arrow */
}

.quickstart[open] summary {
    background-color: #2980b9; /* A darker shade for the opened state */
}

.bottom-bar {
    display: flex;
    flex-direction: column; /* Makes sure the children are stacked vertically */
    padding: 5px;
    background-color: #2c3e50;
    color: #ecf0f1;
    border-top: 1px solid #34495e;
}

.bottom-row {
    display: flex; 
    width: 100%;
}

#title {
    flex: 1 1 auto; /* This means: grow and shrink, but base the sizes on the item's content */
    min-width: 150px; /* This is just an arbitrary width, adjust to your liking */
    padding-right: 10px; /* Provide some spacing from the actions */
}

.padControls {
    display: flex;
}

/* Default styles for larger screens (e.g., tablets, desktops) */
.mobileOperatorKeypad {
    display: none; /* Hide by default */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .mobileOperatorKeypad {
        display: flex; /* Show on smaller screens */
    }
}

.bottom-bar button {
    padding: 5px 10px;
    margin-left: 5px;
    background-color: #3498db;
    color: hsl(192, 15%, 94%);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bottom-bar button:hover,
.quickstart[open] summary,
.quickstart summary:hover {
    background-color: #2980b9;
}

.bottom-bar button:focus {
    outline: none;
}

.bottom-bar span, .actions {
    display: flex;
}