html {
   /* font-size: 82.5%;*/
    box-sizing: border-box;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    /* position: absolute;*/
    /* top: 48%;*/
    top: 305px;
    left: 50%;
    /*  transform: translate(-50%, -64%);*/
    /* width: 375px;*/
    width: 25em;
}



button {
    
    height: 50px;
    font-size: 1.25rem !important;
    /*box-shadow: 4px 4px rgba(0,0,0,0.8);*/
}


.btn:hover {
    background-color: #999999;
    color: #ffffff;
}
.equal-sign {
    height: 98%;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    padding: 20px;
    
    
}

.clear-keys {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20px;
    padding: 20px;
}
input {
    text-align: right;
    background-color: #dddddd;
    color: #FFFFFF;
}


label {
    float: left;
    padding: 10px 4px 0px 10px;
}

.span2 {
    display: block;
    overflow: hidden;
    padding: 10px 4px 0px 74px;
}

.span1 {
    display: block;
    overflow: hidden;
    padding: 10px 4px 0px 10px;
}
/*
input {
    width: 70%;
}
  */