*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    background-color: rgb(212, 194, 255);
    font-family: 'Nunito Sans', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-weight: 600;
    outline: none;
}

.container{
    height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.calculator{
    background-color: rgb(254, 254, 255);
    padding: 15px;
    border-radius: 35px;    
    box-shadow: inset 5px 5px 12px white,
                 5px 5px 12px rgb(165, 165, 165);
    display: grid;
    grid-template-columns: 70px 70px 70px 70px;
}

a,label{
    margin-left: 15px;
    background-color: rgb(241, 240, 237);
    border-radius: 25px;
    width: max-content;
}

input{
    grid-column: span 4;
    height: 70px;
    width: 100%;
    background-color: rgb(230, 230, 230);
    box-shadow: inset -5px -5px 15px rgb(170, 170, 170),
                 5px 5px 12px rgb(246, 246, 246); 
    border: none;
    border-radius: 27px;
    color: rgb(63, 63, 63);
    font-size: 35px;
    text-align: right;
    margin: 35px 0px 25px 0px;
    padding: 20px;
}

button{
    height: 50px;
    width: 50px;
    padding: 20px;
    border:none;
    background-color: rgb(253, 253, 253);
    box-shadow: inset -5px -5px 12px rgb(226, 226, 226),
                 5px 5px 12px rgb(136, 136, 136);
    border-radius: 50%;
    margin:10px;
    text-align: center;
    cursor: pointer;
}

button.equal{
    border-radius: 20px;
    width: 110px;
}

button:hover{
    background-color: rgb(255, 255, 255);
    font-weight: 500;
}