#calculator{
    display: flex;
    flex-direction: column;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}
#display{
    flex: 1;
    display: flex;
}
#display>input{
    flex: 1;
    height: 1.5em;
    font-size: 20px;
}
.numpad{
    
    display: flex;
    flex-direction: column;
}

.first-row{
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-evenly;
}
.first-row>button{
    
    flex:1;
}
.second-row{
    display: flex;
}
.second-row>.buttons{
    flex:3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: column;
}
.second-row>.buttons>.seven{
    display:flex;
}
.second-row>.buttons>.four{
    display:flex;
}
.second-row>.buttons>div>button{
    
    flex:1;
}

.second-row>.plus{
    flex:1;
    display: flex;
    justify-content: space-evenly;
}
.second-row>.plus>button{
    flex:1;
    
}
.third-row{
    display: flex;
}
.third-row>.buttons{
    flex:3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: column;
}
.third-row>.buttons>.one{
    display:flex;
}
.third-row>.buttons>.zero{
    display:flex;
}

.third-row>.buttons>div>button{
    flex:1;
}

.third-row>.plus{
    flex:1;
    display: flex;
    justify-content: space-evenly;
}
.third-row>.plus>button{
    flex:1;
    
}

.third-row>.buttons>.zero>button:nth-child(1){
    flex: 2;
    
}
.third-row>.buttons>.zero>button:nth-child(2){
    flex: 1;
    
}

button:active {
  transform: scale(0.95);
}