body,
html{
    margin:0;
    padding:0;
    font-family:"Roboto", sans-serif;
    background:#000;
    overflow:hidden;
}


   /* MAIN CONTAINER */

.calc-container{

    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    box-sizing:border-box;
}



   /* CALCULATOR */


.calc{
    width:100%;
    max-width:750px;
    background:#111;
    border:4px solid #444;
    border-radius:2rem;
    padding:0.85rem;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:1rem;
}



   /* DISPLAY */


.display{
    width:100%;
}

.textarea{
    width:100%;
    height:140px;
    background:#1e1e1e;
    color:white;
    border-radius:1rem;
    border:1px solid rgba(255,255,255,0.25);
    resize:none;
    outline:none;
    caret-color:white;
    box-sizing:border-box;
    padding:1rem;
    font-size:2rem;
    text-align:right;
    overflow-y:auto;
    font-family:"Roboto", sans-serif;
    box-shadow:
        inset 0 0 15px rgba(0,0,0,0.65);
}






   /* BUTTON BASE */

.btn{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        rgba(255,255,255,0.08);
    color:white;
    cursor:pointer;
    user-select:none;
    transition:0.2s;
    font-size:1.25rem;
    font-weight:500;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}


.btn:hover{
    background:
        rgba(255,255,255,0.16);
}


   /* NORMAL BUTTONS */

.normal-btn{
    background:rgba(255,255,255,0.12);
    font-size:1.4rem;
    font-weight:bold;
}

.normal2-btn{
    background:rgba(255,255,255,0.22);
    font-size:1.4rem;
    font-weight:bold;
}


   /* OPERATORS */

.operator{
    background:orange;
    font-size:1.6rem;
    font-weight:bold;
}


.operator:hover{
    background:darkorange;
}


   /* SCIENTIFIC PANEL */

.scientific-panel{
    display:none;
    grid-template-columns:repeat(6,1fr);
    gap:0.6rem;
    justify-items:center;
    max-height:220px;
    overflow-y:auto;
    padding-right:4px;
    
}
.scientific-panel::-webkit-scrollbar{

    width:0;
}

/* show state */

.scientific-panel.show{
    display:grid;
}

   /* NORMAL BUTTON PANEL */

.btn-container{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:0.6rem;
    justify-items:center;
}


   /* TOGGLE BUTTON */

.toggle-btn{
    background:orange;
    color:white;
}


.toggle-btn:hover{
    background:darkorange;
}


   /* MOBILE RESPONSIVE */

@media(max-width:700px){

    .calc{
        max-width:380px;
        padding:1rem;
        border-radius:1.5rem;
        
    }

    .textarea{
        height:110px;
        font-size:1.4rem;
    }


    .btn{
        width:40px;
        height:40px;
        font-size:1rem;
    }

    .normal-btn{
        font-size: 1.2rem;
    }
    .normal2-btn{
        font-size: 1.2rem;
    }
    .operator{
        font-size: 1.5rem;
    }
    /* scientific hidden by default */

    .scientific-panel{
        display:none;
        grid-template-columns:
            repeat(5,1fr);
        gap:0.6rem;
        max-height: 200px;
        
    }

    .scientific-panel.show{
        display:grid;
    }


    /* toggle button visible */
    .toggle-btn{

        display:flex;
    }
}

   /* SMALL MOBILE */

@media(max-width:420px){
    .btn{
        width:40px;
        height:40px;
        font-size:0.9rem;
        font-weight: 500;
    }

    .textarea{
        font-size:1.25rem;
    }
     .normal-btn{
        font-size: 1.1rem;
    }
    .normal2-btn{
        font-size: 1.1rem;
    }
    .operator{
        font-size: 1.35rem;
    }
}