body{
    background-color: #111d52;
    font-family:Arial, Helvetica, sans-serif;
}

#main{
    margin-top: 10em;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#calculator{
    display:flex;
    flex-direction: column;
    width: 16em;
    align-self: center;
    background-color: #4d4747;
    padding: 15px;
    border-radius: 20px;
}

#display{
    background-color: #ffffff;
    height: 5em;
    border-radius: 0.2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    box-shadow: inset #7a7a7a 0em 0em 1em 0.2em;
    
}

#controls{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
}

#calculatorTop{
    align-self: flex-end;
}

#calculatorMiddle{
    display:flex;
    align-items: center;
}

#numbers{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-self: flex-end;
}

#operators{
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}
button:hover{
    opacity: .8;
}

button{
    padding: 1.4em;
    font-size: 16px;
    font-weight: bold;
    margin: 0.2em;
    background-color: #bbd3eb;
    border-radius: 1em;
    border:#bbd3eb;
}

#equal{
    background-color: #cc571d;
    color: #ffffff;
}

.deleteButton{
    width: 6em;
    height: 3.5em;
    background-color: #826767;
    color: #ffffff;
}

.operator{
    background-color: #826767;
    color: #ffffff;
}

.displayInput{
    margin: 0.1em 0.5em;
    font-size: 1.9em;
}

#solutionDisplay{
    font-weight: bold;
}