@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
    margin: 0px;
    height: 100vh;
    background-color: #F7EDB0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calc {
    background-color: #E5BF89;
    width: 441px;
    height: 625px;
    border: 20px solid #393223;
    border-radius: 20px;
    box-shadow: inset 0 0 20px rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
#screen {
    background-color: #4e9c61c5;
    padding: 4px;
    width: 352px;
    height: 118px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.671);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#screen > span {
    display: block;
    font-family: 'Press Start 2P';
    color: rgba(0, 0, 0, 0.767);
}
#screen > #num {
    font-size: 40px;
}
#screen > #previousNum {
    margin-bottom: 20px;
    height: 15px;
}

#button_container {
    display: flex;
    flex-wrap: wrap;
    width: 367px;
    height: 335px;
    gap: 5px;
}
.button {
    width: 88px;
    height: 67px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
#clear {
    width: 181px;
}
.button > span {
    font-size: 26px;
    color: white;
    font-family: 'Press Start 2P';
}
.button:active {
    transform: translateY(2px);
}

.brown {
    background-color: #675A4A;
}
.brown:active, .brown:hover{
    background-color: #a79073;
}

.special {
    background-color: #6470E1;
}
.special:active, .special:hover {
    background-color: #8590ee;
}

.operator {
    background-color: #DB5C00;
}
.operator:active, .operator:hover {
    background-color: #ff7615;
}

#clear {
    background-color: #E2442E;
}
#clear:active, #clear:hover{
    background-color: #fa5e4a;
}

#operate {
    background-color: #3D8F28;
}
#operate:active, #operate:hover {
    background-color: #49a831;
    
}