body{
    background-color: #00051e;
    display: flex;
    justify-content: center;
}

button{
    font-size: 3rem;
    border: none;
    cursor: pointer;
}

.Calculator{
    margin-top: 30px;
    width: 80vw;
    background-color: rgb(54, 54, 54);
    padding: 15px;
    border-radius: 10px 10px 10px 10px;
}

.Calculator>.input{
    display: flex;
    height: 15vh;
    gap: 10px;
    padding-bottom: 10px;
}

.input>button{
    width: 10vw;
    aspect-ratio: 1/1;
    border-radius: 10px 10px 10px 10px;
    background-color: orange;
}

.input>button:hover{
    background-color: rgb(255, 217, 147);
}

.input>button:active{
    background-color: rgb(248, 194, 94);
    color: white;
}

.Calculator>div>input{
    text-align: right;
    width: 100%;
    border-radius: 10px;
    font-size: 3rem;
    color: white;
    border: none;
    background-color: slategrey;
}

.buttons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.buttons>button{
    border-radius: 10px 10px 10px 10px;
    height: 15vh;
    background-color: rgb(128, 128, 128);
}

.buttons>button:hover{
    background-color: rgb(185, 185, 185);
}

.buttons>button:active{
    background-color: rgb(160, 159, 159);
    color: white;
}