html {
    padding-top: 0.1px; /* disable margin collapse */
}

body {
    height: 120%;
    min-width: 336px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #a66400;
    background-image: url("../images/wood-pattern.png");
    /* source: https://www.transparenttextures.com/wood-pattern.html */
}

#branding {
    font-family: 'Pacifico', cursive;
    color: dimgray;
    text-align: center;
    vertical-align: center;
    padding-top: 10px;
    height: 20px;
}

#calculatorFrame {
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    background-color: burlywood;
    width: 332px;
    height: 500px;
    text-align: right;
    border-radius: 3%;
    box-shadow: -6px 6px 14px rgba(100, 100, 100, .8);
}

#displayPanel {
    display: block;
    font-family: 'Oxygen Mono', monospace;
    background-color: gainsboro;
    margin: 10px 20px;
    padding: 10px 10px;
    height: 50px;
    border-radius: 5px;
    box-shadow: inset -1px 2px 8px rgba(100, 100, 100, .8);
}

#progressText {
    width: 100%;
    height: 20%;
    font-size: 0.8rem;
    margin-bottom: 4px;
    white-space: nowrap;
    color: gray;
    margin-right: 20px;
}

#memIndicator {
    width: 4%;
    height: 50%;
    padding: 0;
    float: left;
    margin-top: 15px;
    color: #383838;
}

#resultText {
    width: 100%;
    height: 50%;
    font-size: 1.4rem;  /* also style by script */
    margin-top: 14px;
}

#buttonContainer {
    margin: 2px;
    padding-top: 2px;

    display: block;
    text-align: center;
}

#buttonRECIP {
    font-style: italic;
}

.calButtons {
    font-size: 1.2rem;
    width: 56px;
    height: 40px;
    margin: 10px 1.5px;
    color: whitesmoke;
    background-color: brown;
    border-color: rgb(153, 38, 38);
    text-align: center;
    border-radius: 12px;
    box-shadow: -1px 2px 8px rgba(100, 100, 100, .8);
    outline: none;
}

.calButtons:active {
    background-color: rgb(212, 88, 88);
    border-color: rgb(212, 88, 88);
    box-shadow: 0 1px #666;
    transform: translateY(2px);
}

/* .calButtons:hover {
    background-color: rgb(221, 101, 101);
} */

#buttonEql {
    height: 98px;
    float: right;
    margin-right: 8.5px;
}

#button0 {
    width: 119px;
}

#topSection {
    display: block;
    /* color: #f5f5f5; */
    /* background: rgba(104, 31, 31, 1); */
    background: #ffffff88;
    padding: 10px 16px 0px 16px;
    border-radius: 10px;
    margin-top: 10px;
    width: 84%;
    max-width: 400px;
}

#modeBar {
    display: flex;
    justify-content: center;
}