/* calc(100vh - 8vh) */

main{
    height: 92vh;
    width: 100%;
    background-color: #19354a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container{
    height: 100%;
    width: 80%;
    margin: auto;
    background-color: #1f4764;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main_outline{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 25vw;
    background: repeating-linear-gradient(45deg, black, #fff 100px);
}
.calculator_body{
    width: 95%;
    height: 95%;
    background-color: #1c1f25;
}
.option_outline{
    height: 20%;
    width: 100%;
    box-shadow: 0px 7px 14px rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #fff;
    font-weight: bolder;
}
.option_outline span {
    height: fit-content;
    padding: 1.5vh 0;
    width: 86%;
    background-color: #2a3c4a;
    text-align: center;
    border-radius: 2vw;
    box-shadow: 0px 7px 14px rgb(79, 125, 182);
}
.scrine{
    height: 20%;
    width: 100%;
    /* box-shadow: inset 0px -22px 32px rgb(79, 125, 182); */
}
.scrine input{
    height: 100%;
    width: 98%;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bolder;
    border: none;
    outline: none;
}
.keypad{
    height: 60%;
    width: 100%;
    position: relative;
}
.first_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 78%;
    height: 20%;
}
.right_column{
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 80%;
    top: 0;
}
.right_column .operators{
    height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -15px 18px rgb(0, 0, 0), inset 0 -7px 12px rgb(0, 0, 0), 0 0px 2px rgb(225, 225, 224), inset 0 -3px 49px rgba(225, 225, 225, 0.3);
}
.right_column .operators .button:hover{
    background-color: #19354a44;
}
.right_column .operators .button:active{
    background-color: #19354a8e;;
}
.right_column .operators .button{
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 100%;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bolder;
    color: #fff;
}
.number_keys{
    width: 80%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.first_row .function .button{
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 100%;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bolder;
    color: #fff;
}
.first_row .function .button:hover{
    background-color: #19354a44;
}
.first_row .function .button:active{
    background-color: #19354a8e;;
}
.first_row .function{
    height: 100%;
    width: 30%;
    box-shadow: 0 -14px 19px rgb(0, 0, 0), inset 0 -10px 13px rgb(0, 0, 0), 0 1px 6px rgb(225, 225, 224), inset 0 16px 17px rgba(225, 225, 225, 0.3);
}
.number_keys .numbers{
    width: 30%;
    height: 20%;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden;
}
.number_keys .numbers .button{
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 100%;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bolder;
    color: #fff;
}
.number_keys .numbers .button:hover{
    background-color: #19354a44;
}
.number_keys .numbers .button:active{
    background-color: #19354a8e;;
}