@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=PT+Serif:wght@700&display=swap');

.container {
    width: 400px;
    height: 530px;
    /* background-color:#858585; */
    margin: auto auto;
    /* padding-bottom: 15px; */
    background-image: url('img/black_metallic.jpg');
}

.display-input {
    width: 100%;
    height: 110px;
    font-size: 40px;
    font-family: 'PT Serif', serif;
    /* background-color: black; */
    position: relative;
    color: aliceblue;
    /* border-radius: 200px; */
    /* margin-bottom: 20px; */
}

.current-value-span{
    position: relative; 
    top: 1.0em;
    left: 0.1em; 
    font-size: 100%; 
}

.upper-value-span{
    position: absolute; 
    top: 0.5em; 
    left: 0.3em;
    font-size: 50%; 
}

.digits-wrapper{
    width: 75%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
}

.zero{
    grid-column-start: 2;
}

.btn{
   /* color: ; */
   height: 76px; 
   font-size: 24px;
   font-family: 'PT Serif', serif;
   border-radius: 10px;
   /* clip-path: ellipse(35% 50% at 50% 50%); */
   background-color: #1f1e1e;
   color: #b0aeae;
   border: solid #6b6a6a 3px;
   /* box-shadow: -0px -3px 5px 1px rgb(196, 17, 17); */
}

.btn:active:hover, .active{
    height: 76px; 
    font-size: 24px;
    font-family: 'PT Serif', serif;
    border-radius: 10px;
    /* clip-path: ellipse(35% 50% at 50% 50%); */
    background-color: darkgrey;
    color: aliceblue;
    border: solid #6b6a6a 3px;
    /* box-shadow: -0px -3px 5px 1px rgb(196, 17, 17); */
 }

 .btn:hover{
    height: 76px; 
    font-size: 24px;
    font-family: 'PT Serif', serif;
    border-radius: 10px;
    /* clip-path: ellipse(35% 50% at 50% 50%); */
    background-color: #343232;
    color: aliceblue;
    border: solid #6b6a6a 3px;
    /* box-shadow: -0px -3px 5px 1px rgb(196, 17, 17); */
 }

.keyboard-wrapper{
    display: flex;
    column-gap: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;

}

.operators-wrapper{
    width: 25%;
    display: grid;
    gap: 3px;
}