/* guess this is the catch all style */
*{
    margin: 0;
    padding: 0;
    font-family:'Courier New', Courier, monospace;
    box-sizing: border-box;
}

/* div of 'container' style */
.container{
    width: 50%;
    height: 100vh;
    background: #feffe3; 
    display: flex;
    align-items: center;
    justify-content: center;
    float:left;

}

/*div of 'calculator' style */
.calculator{
    background: #3a4452;
    padding: 20px;
    border-radius: 10px; 
}

/* style div for the 'form' within the 'calculator' definition  */
.calculator form input{
    border: 0;
    outline: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: -8px -8px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.2);
    background: transparent;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    margin: 10px
}

/* ##why is this not calculator form display */
form .display{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

form .display input{
    text-align: right;
    flex: 1;
    font-size: 45px;
    box-shadow: none;
}

/* ###can you just reference thing by their parent tag and then the class name? 
why don't you have to step through each parent class (i.e., this would have 
been .container .calculator .form .input .equal) */

/* ## the answer here is by narrowly defining the entire path form.div.display, you limit the style to only changing 
## that exact location, rather than being able to having the style search thru the entire page and change everything 
## related to that class name. otherwise, to make your style change you would have to go thru and define each specific 
## long reference of every instance --> */
form input.equal{
    width: 145px;
}

form input.operator{
    color: #33ffd8
}

.originalRightSide{
    float: right;

}