binaryCalculator.css

.operators,.actions,.digits{
    width: 90px;
    height: 90px;
    font-size: 36px;
    font-family: monospace;
    margin: 5px;
    border-radius: 50%;
    border: none;
    box-shadow: 12px 10px 25px -8px rgba(97, 97, 97, 0.8);
}

.operators:hover{
    background-color: #3f3f3c;
}

.actions:hover{
    background-color: hsla(160, 49%, 28%, 0.5);
}

.digits:hover{
    background-color: rgb(126, 125, 125);
}

.operators:active{
    background-color: #3f3f3c;
    transform:translateY(3px);
}

.actions:active{
    background-color: hsla(160, 49%, 28%, 0.5);
    transform:translateY(3px);
}

.digits:active{
    background-color: rgb(151, 151, 151);
    transform:translateY(3px);
}

.digits{
    background-color: rgb(102, 102, 102);
    color: rgb(255, 255, 255);
    display: inline;
}

.actions{
    background-color: hsla(160, 50%, 17%, 0.5);
    color: #00ffba;
    display: inline;
}

.operators{
    background-color: #30302b;
    color: #6ec9b5;
    display: inline;
}

#res{
    background-color: rgb(37, 36, 29);
    width: 430px;
    height: 48px;
    font-size: 40px;
    font-family: 'digital-clock-font';
    border-radius: 8px;
    text-align: right;
    padding: 5px;
    color: rgb(0, 241, 20);
}

body{
    width: 27%;
    background-color: #f5f3ed;
}

@font-face{
    font-family:'digital-clock-font';
    src: url('TickingTimebombBB.ttf');
}

#calBody{
    position: absolute;
    z-index: -1;
    background-color: rgb(218, 218, 218);
    width: 440px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 12px 10px 25px -8px rgba(97, 97, 97, 0.8);
}

.operators,.actions,.digits:focus{
    outline: 0px;
}

.fixedContainer {
    position: fixed;
    padding:500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.buttonContainer{
    padding: 12px;
}