body {
    background-color: bisque;
    margin: 8vh 0 0 0;
    display: flex;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    user-select: none;
}
/* 
.allow-selection {
    user-select: auto;
} */


.container {
    height: 55vh;
    /* max-height: 55vh; */
    width: 53vh;
    /* max-width: 26vw;  */
    background-color: white;
    border: 3px groove;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.display {
    width: 95%;
    max-width:390px; 
    height: 20%;
    border: 3px ridge;
    border-radius: 10px;
    background-color:lightcyan;
}
.text_input{
    width: 98%;
    max-width:390px; 
    height: 30%;
    border: 2px ridge;
    border-radius: 10px;
    background-color:rgb(227, 248, 248);
}
#text_input{
    width: 98%;
    max-width:390px; 
    height: 55%;
    border: none;
    border-radius: 10px;
    background-color:rgb(227, 248, 248);
    font-size: 26px;
    color:rgb(69, 105, 105);
}
input{
    font-size: 16px;
    color:darkslategrey;
    text-align: right;
    padding-top: 2px;
}
input::placeholder {
    color: #999; 
}

input:focus::placeholder {
    color: transparent;
}
.inputs {
    margin-top: 1%;
    width: 95%;
    max-width: 390px; 
    height: 72%;
    border: 3px ridge;
    border-radius: 10px;
    background-color:lightsteelblue;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
}
.row{
    width: 95%;
    max-width: 95%; 
    height:85%;
    border: 2px inset;
    background-color: whitesmoke;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.1fr;
    justify-items: center;
    align-items: center;
}
.b{
    width: 95%;
    max-width: 95%; 
    height:90%;
    border: 2px outset;
    background-color:lightgrey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:3.5vh;
    color:darkslategrey;
    cursor:pointer;
    transition: background-color 0.3s ease, transfrom 0.1s ease;
}
.active{
    width: 95%;
    max-width: 95%; 
    height:90%;
    border: 2px outset;
    background-color:lightgrey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:3.5vh;
    color:darkslategrey;
    cursor:pointer;
    transition: background-color 0.3s ease, transfrom 0.1s ease;
}
.active{
    animation: scaleDown 126ms ease-in-out;
}

@keyframes scaleDown {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.92);
    }
}
.b:active{
    background-color: rgb(122, 132, 144);
    transform: scale(0.96);
}

.b_excp{
    width: 95%;
    max-width: 95%; 
    height:90%;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
}
.b1{
    margin-left:1px;
    width:92%;
    height:100%;
    border: 2px outset;
    background-color:lightgrey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:3.5vh;
    color:darkslategrey;
    cursor:pointer;
    transition: background-color 0.3s ease, transfrom 0.1s ease;
}
.b1:active{
    background-color: rgb(122, 132, 144);
    transform: scale(0.94);
}
#ast{
    margin-top: 13px;
}
#dot{
    margin-bottom:10px;
    font-size:5vh;
}
#clear{
    font-size: 3vh;
}

@media screen and (max-height:385px) {
    body{
        margin: 2vh 0 0 0;
    }
    .container {
        height: 20vw;
        width: 30vw;
    }
    .b{
        font-size: 5vh;
    }
    #clear{
        font-size: 4vh;
    }
    #dot{
        font-size: 7vh;
    }
    #ast{
        margin-top:5px;
        font-size: 7vh;
    }
    #plus{
        font-size: 6vh;
    }
    #minus{
        font-size: 7vh;
        margin-bottom: 2px;
    }
    #divide{
        margin-top:5px;
        font-size: 7vh;
    }
    #equal{
        font-size: 6vh;
    }
}
@media screen and (max-width:626px) {
    body{
        margin: 2vh 0 0 0;
    }
    .container {
        height: 100vw;
        width: 65vw;
    }
    .b{
        font-size: 6vh;
    }
    #clear{
        font-size: 5vh;
    }
    #dot{
        margin-bottom: 1px;
        font-size: 7vh;
    }
    #ast{
        margin-top:5px;
        font-size: 7vh;
    }
    #plus{
        font-size: 6vh;
    }
    #minus{
        font-size: 7vh;
        margin-bottom: 2px;
    }
    #divide{
        margin-top:5px;
        font-size: 7vh;
    }
    #equal{
        font-size: 6vh;
    }
}