@font-face {
  font-family:'MyCustomFont'; /* Choose a name for your font */
  src: url('/digital-7.ttf') format('ttf'),
         /* Add other formats like .ttf, .otf if needed for broader compatibility */
}



body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.calculator-area{
    height: 430px;
    width: 200px;
    border: 2px solid rgb(95, 31, 31);
    border-radius: .5rem;
}

.display{
    min-height: 20%;
    max-height: 20%;
    margin: 0;
    width: 100%;
    border-bottom: 3px solid gray;
    text-align: right;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    border-top-left-radius:.5rem ;
    border-top-right-radius:.5rem ;
}

.display-text{
    position: relative;
    display: block;
    top: 20px;
    font-size: 30px;
    padding:.5rem;
    margin: 0;
    height: 100%;
    align-items: center;
}



.input-area{
    min-height: 80%;
    max-height: 80%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    padding: 10px 10px 0 10px; 
    border-bottom-left-radius:.5rem ;
    border-bottom-right-radius:.5rem ;
}
.digit{
    height: 320px;border-radius: .5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}
.oparators{
    height: 100%;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
}



.numbers{
    display: grid;
    text-align: center;
    align-items: center;
    height: 100%;
}

.sym{
    display: grid;
    grid-row: ;
    text-align: center;
    align-items: center;
    height: 100%;
}


button{
    margin: ;
    border: .5px solid black;
    border-radius: 3px;
}