.button:hover{
    background-color: hsl(0, 0%, 50%);
}
.button:active{
    background-color: hsl(0, 0%, 70%);
    transform: translateY(2px);
}
#calculator{
    width: auto;
    height: auto;
    background-color: hsl(0, 0%, 20%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    border: white solid 2px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(233, 233, 233);
}

#display{
    width: 100px;
    height: 50px;
    background-color: hsl(0, 0%, 30%);
    text-align: right;
    border:none;
    box-sizing: border-box;
    font-size: 1.2em;
    overflow-x: scroll;
    white-space: nowrap;
}
.yellow{
    background-color: hsl(41, 84%, 42%);
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}
.yellow:hover{
    background-color: hsl(41, 79%, 60%);
}
.yellow:active{
    background-color: hsl(41, 84%, 62%);
    transform: translateY(2px);
}
.pink{
    background-color: hsl(330, 100%, 50%);
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}
.pink:hover{
    background-color: hsl(330, 100%, 79%);
}
.pink:active{
    background-color: hsl(330, 59%, 70%);
    transform: translateY(2px);
}

.button{
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    background-color: hsl(0, 0%, 30%);
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.clear{
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    background-color: hsl(0, 0%, 30%);
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.empty{
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    background-color: hsl(0, 0%, 20%);
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

.clear:hover{
    background-color: hsl(0, 0%, 50%);
}
.clear:active{
    background-color: hsl(0, 0%, 70%);
    transform: translateY(2px);
}

.yellow1{
    background-color: hsl(41, 84%, 42%);
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}
.yellow1:hover{
    background-color: hsl(41, 79%, 60%);
}               
.yellow1:active{
    background-color: hsl(41, 84%, 62%);
    transform: translateY(2px);
}