body{
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

#container {
    max-width: 320px; /* Limit its size for a calculator look */
    width: 90vw;      /* Make it responsive */
    background-color: #eee;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden; /* Important for rounded corners on inner elements */
    margin: 20px auto; /* Center on the page */
}       

.frame{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.button-row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.calc-button{
    flex:1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: none;
    outline: none;
}

#calculator-body {
    display: flex;
    flex-direction: column; /* Stack display and buttons-frame vertically */
    padding: 10px; /* Internal padding for the whole calculator content */
    gap: 10px; /* Space between display and button grid */
    background-color: black;
}

#display{
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    word-break: break-all;
    /* border: 1px solid black; */
    color: white;
    font-size: xx-large;
}