markup.css

* {
    padding:0%;
    margin:0%;
    background-color:rgb(169, 228, 255); 
}
#menuBar {
    width:100%;
    border:3px solid rgb(255, 249, 183);
    display:flex;
    flex-grow:1;
    justify-content: center;
    margin-bottom:2.5%;
    color:rgb(255, 249, 183);
}
button {
    border:1px solid rgb(255, 249, 183);
}
button:hover {
    background-color: rgb(156, 220, 249);
}
#calcHousingDiv { /* is the full size of the viewport, holds the calculator in place */
    display:flex;
    flex-grow:1;
    align-items: stretch;
    flex-wrap:wrap;
    justify-content: center;
    width:100%;
    height:400px;
    background-color:rgb(169, 228, 255); 
}
#CalcMainDiv { /* Is the border of the calculator */
    box-sizing: border-box;
    border:4px solid rgb(255, 249, 183);
    background-color:rgb(255, 249, 183);
    border-radius: 5px;
    width:300px;
    height:100%;
}
.numberGridDiv { /* numbers at left */
    box-sizing: border-box;
    height:85%;
    width:75%;
    display:flex;
    flex-wrap: wrap;
    border-radius: 5px;
}
.numberGridDiv button {
    width:33.3%;
    height:20%;
    font-size:larger;
}
#zero {
    width:66.6%;
    border-bottom-left-radius: 5px;
}
#symbolGridDiv { /* Symbols on right */
    box-sizing: border-box;
    border-radius: 5px;
    float:right;
    width:25%;
    height:85%;
    display:flex;
    flex:1;
    flex-wrap:wrap;
}
#symbolGridDiv button {
    width:100%;
    height:20%;
    font-size:larger;
}
#ac {
    border-top-left-radius: 5px;
}
#add {
    border-top-right-radius: 5px;
}
#equals {
    border-bottom-right-radius: 5px;
}
#textBoxDiv { /* text box at top */
    border-bottom:4px solid rgb(255, 249, 183);
    box-sizing: border-box;
    width:100%;
    height:15%;
    float:right;
    border-radius: 5px;
    overflow:hidden;
}
#textBox {
    box-sizing: border-box;
    border-radius: 5px;
    overflow:hidden;
    width:100%;
    height:100%;
    font-size:larger;
}
input {
    border:none;
    text-align: center;
    color:black;
}