/* css for calculator mockup here */
*{
    font-family: 'Roboto';
    font-weight: bold; 
    --shadow : 0px 4px 4px rgba(0, 0, 0, 0.25);
    --result: #56463F; 
    --operator: #DCC3C3;
    --operatorhover: #c7aaaa;
    --equals: #c1e2ca; 
    --equalshover: #69836f; 
    --standard:#797979; 
    --standardhover: #616161; 
    --clear: #de8e8e; 
    --clearhover: #b97777; 
    --numbackground: #a1b2b8;
    --numbackgroundhover:#718186 ; 
    --function: #E1CAB0;
    --functionhover: #ccb9a3; 
    --delete:rgb(160, 150, 230) ; 
    --deletehover: rgb(133, 121, 208) ;;  
    --grayedout: rgb(80, 80, 80); 
    box-sizing:border-box; 
}
body{
    margin:0; 
}

#maingrid{

    display: grid; 
    grid-template-rows: 30vh 60vh; 
    grid-template-columns: 30vw 35vw 25vw; 
    background-color: #C4C4C4;
    margin-left: 6vw; 
    margin-top:6vh; 
    width: 90vw; 
    height: 90vh; 
}


#TLgrid{
    grid-column: 1 / 3;  
    display:flex; 
    justify-content: center; 
    align-items: center; 
    
}

.inputwrap{
    width: 95%; 
    height: 90%; 
    display:grid; 
    grid-template-rows: 20vh 10vh; 
}

#TRgrid{
    display:flex; 
    background-color:gray; 
    justify-content: center; 
    align-items: center; 
}

#TRgrid .inputwrap{
    width: 85%; 
    height: 85%; 
}

#TLgrid .inputwrap{
    width: 95%; 
    height: 90%; 
}

.whiteboard{
    z-index: 2; 
    background-color: white; 
    box-shadow: var(--shadow); 
}

#inputbar, #equals{
    border: none; 
}


#resultwrap{
    z-index: 2; 
    background-color: var(--result); 
    box-shadow: var(--shadow); 
    color: white; 
    font-size: 1.5vw; 
    display:flex; 
    justify-content:center; 
    align-items: center; 
    min-width:0; 
}

#result{
    width: 80%; 
    height:80%; 
    min-width:0; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    
}

button{
    
    display:block; 
    color: white; 
    border: none; 
    box-shadow: var(--shadow); 
    transition: .2s; 

}

#functiongrid button:hover, #numpad button:hover, #membuttons button:hover{
    transform: scale(1.05); 
    transition: .2s; 
    
}

button:hover, button.usable:hover, #equals.usable:hover{
    border: 2px solid white; 
}
#membuttons button:hover{
    border: 2px solid black; 
}

button.hidden, #membuttons button.hidden{
    border:none; 
    transform: none; 
}


#BLgrid{

    display:flex; 
    justify-content: center;
    align-items:center; 

}

#numbackground{

    background-color:#a1b2b8; 
    width: 90%; 
    height: 90%;
    display:flex; 
    justify-content: center;
    align-items:center;
}
#numpad{
    width: 90%; 
    height: 90%;
    display:grid; 
    row-gap: 3%; 
    column-gap: 3%;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,1fr);
}

#button0{
    grid-column: 1/3; 
}

#BMgrid{
    
    display:flex; 
    justify-content: center; 
    align-items: center; 
}

#functiongrid{
 
    width: 90%; 
    height: 70%; 
    row-gap: 5%; 
    column-gap: 5%; 
    display: grid; 
    grid-template-rows: repeat(4,1fr); 
    grid-template-columns: repeat(4,1fr); 

}

#more{
    grid-column: 1/5; 
}

#BRgrid{
    background-color:gray; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
     
}
#memory{
    width: 85%; 
    height: 85%; 
    font-size: 1.3vw; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    min-width:0;  
    min-height:0; 
}

#calcinput{
    display:flex; 
    justify-content: center; 
    align-items: center; 
}

#inputbar{
    width: 100%; 
    height: 100%; 
    min-width:0; 

    display:flex; 
    justify-content: flex-end; 
    font-size: 30px; 
    align-items:center; 

    padding-right: 2vw; 
    padding-left: 2vw; 

    overflow-x: auto; 
    overflow-y: none; 
}




.funcrow{

    display:contents; 

}


.funcrow:nth-child(2n+1) button{
    background-color: var(--operator); 
}
.funcrow:nth-child(2n+1) button:hover{
    background-color: var(--operatorhover); 
}


.funcrow:nth-child(2n) button{
    background-color: var(--function); 
}
.funcrow:nth-child(2n) button:hover{
    background-color: var(--functionhover); 
}

#numpad button{
    background-color:var(--standard);  
    font-size: 40px; 
}

#numpad button:hover{
    background-color:var(--standardhover);  
}


#radians{ 
    background-color: var(--standard); 
    box-shadow: none; 
}
#radians{ 
    background-color: var(--standardhover);  
}


#functiongrid button{
    font-size: 2vw; 
}

#plusminus{
    box-shadow: none; 
    background-color: var(--numbackground);
    width: 5em; 
    font-size: 2.2vw; 


}
#plusminus:hover{
    background-color: var(--numbackgroundhover);
    

}

#boardwrap{
    width:80%; 
    height:90%; 
    display:flex;
    flex-direction: column;  
    justify-content:flex-start; 
    align-items:center; 
    overflow:auto; 
    overflow-x:hidden; 
}

#clear{
    box-shadow: none; 
    background-color:var(--clear); 
    
    font-size: 2.2vw;
    width: 5em; 
}
#clear:hover{

    background-color:var(--clearhover); 

}

#radians{
    box-shadow: none; 
    background-color: var(--standard); 
    
    font-size: 2.2vw;
    width: 5em; 
}

#radians:hover{
    background-color: var(--standardhover); 
    
}

#equals.usable{
    background-color: var(--equals); 
}
#equals.usable:hover{
    background-color: var(--equalshover); 
    
}




#delete{
    box-shadow: none; 
    background-color: var(--delete); 
    
    font-size: 2.2vw;
    width: 5em; 
}
#delete:hover{
    background-color: var(--deletehover); 
}


.use{
    background-color:var(--equals); 
}

.delete{
    background-color:var(--clear); 
}

.use:hover{
    background-color: var(--equalshover); 
}
.delete:hover{
    background-color: var(--clearhover); 
}

#escape{
    position:absolute;
    z-index:4;
    top:15vh;
    right:30vw;
}
#equals{
    z-index: 3; 
    box-shadow: var(--shadow); 
    border-top: none; 
    
    width: 5em; 
    font-size: 2.2vw;
}
#escape.usable{
    background-color:var(--clear);

}

#escape.usable:hover{
    background-color:var(--clearhover); 
}

#addmem.usable{
    
    background-color: var(--numbackground); 
}
#addmem.usable:hover{
    
    background-color: var(--numbackgroundhover); 
}

.hidden{
    background-color: var(--grayedout);
    color: gray; 
}

.hidden:hover{
    background-color: var(--grayedout);
    color: gray; 
}

.footerbuttons{
    display:flex; 
    justify-content: flex-end; 
    position: relative; 
    
}
.footerbuttons button{
    margin-left: 2vw; 
}

.deleting{
    background-color: var(--clear); 
}

.use, .delete{
    box-shadow: none; 
}

#wrapper{
    display:grid;grid-template-rows:7vh 7vh 7vh;width:17vw;height:25vh;padding:.5vw;border:5px solid var(--standard);margin-top:2vh;box-shadow:var(--shadow);
}
#topline{
    display:flex;text-align:left;align-items:center;overflow-x:auto;min-width:0;border-bottom:1px solid black;overflow-y:hidden;
}
#botline{
    display:flex;justify-content:flex-end;align-items:center;text-align:right;min-width:0;overflow-x:auto;color:var(--numbackgroundhover);overflow-y:hidden;
}
#membuttons{
    display:flex;align-items:center;justify-content:space-around;height:100%;min-width:0;border:10px solid var(--numbackground);box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden;
}