canvas {
    border: 2px solid black;
    padding: 10px;
}
body {
    background-color: #f5fff9;
    font-family: Verdana, sans-serif;
    font-size: 14px;
}
.menu {
    /*background-color: #9cbcdb;*/
    border-radius: 5px;
    /*height: 32px;*/
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}
.menu-button {
    background-color: #9cbcdb;
    width: fit-content;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    padding: 10px;  
    display:flex;     
    align-items: center;     
}
.menu-button:hover {
    background-color: color-mix(in srgb, #9cbcdb 90%, rgb(87, 87, 87) 10%);
}
.menu-button:disabled {
    background-color: lightgrey;
    color: grey;
}
.container-flex {
    display: flex; /* Activates flexbox layout for children */
    justify-content: space-between; /* Distributes space between items (optional) */
    gap: 20px; /* Adds space between the divs (modern property) */
    padding-top: 10px;
}
.control-area {
    background-color: white;
}
.item-left, .item-right {
    flex: 1; /* Makes both divs grow equally to fill the container width */
    padding: 15px;
    border: 1px solid #5c5a5a;
    border-radius: 5px;
}
.scroll-box {   
    height: 150px; /* Set a specific height to force overflow */
    border: 1px solid #242424; /* Add a border for visibility */
    padding: 10px;
    overflow: auto; /* Adds scroll bars only when needed */
    white-space: pre-wrap;
}
.info-box {
    background-color: #e8e8e8;
    font-family: monospace;
}
.expr-input {
    text-align: right;
    direction: rtl;
}
#canvas-scale-area {
    margin-left: auto;
    margin-right: 0;
}
.grid-container {
    display: grid;
    /* Creates two columns of equal width (1fr = 1 fractional unit) */
    grid-template-columns: 1fr 1fr;
    /* Optional: Adds space between the grid items */
    gap: 20px;
    padding-top: 10px;
}
.top-menu {
    background-color: #2a2a2a;
    color: #e8e8e8;
    display: flex;
    align-items: center;   
    padding-bottom: 10 px;
}
.top-menu-button {
    background-color: #2a2a2a;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
}
.top-menu-button:hover {
    background-color: color-mix(in oklab, #2a2a2a 90%, white 10%);
}
.top-menu-button:link {
    text-decoration: none;
    color: currentColor;
}
.top-menu-button:visited {
    color: currentColor;
}