styles.css

:root {                         
    box-sizing: border-box; 
    font-size: calc(0.5em + .4vw);   
}                             
*,                            
::before,                     
::after {                       
    box-sizing: inherit;        
}                             
body {  
    background-color: #709b90;  
    font-family: Helvetica, Arial, sans-serif;
}
.container {  
    display: grid;  
    grid-template-columns: [left-start] 2fr                                        
                           [left-end right-start] 1fr                              
                           [right-end];                     
    grid-template-rows: repeat(4, [row] auto);       
    grid-gap: 1.2em;  
    max-width: 700px; 
    max-height: 100vh;
    margin: 0 auto;
    padding: .5em;
    border: .1em white solid;
    border-radius: .5em;
    margin-top: 0;
    margin-bottom: 0;
}
header{
    grid-column: 1/3;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1;
    margin-bottom: 0;
}
header > .title{
    grid-column: auto;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 800;
    padding: .3em 0 0;
    text-align: center;
    color: aqua;
    font-style: oblique;
}
.timestamp{
    grid-column: auto;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    padding: .3em 0 0;
    font-weight: 600;
    font-style: oblique;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.secs{
    font-size: 1rem;
    padding: .25em .3em 0;
}
.answers{
    margin-top: 0;
    grid-column: 1/3;
    padding: 1em 1.5em;
    background-color: black;
    color: white;
    font-size: 1.2rem;
    text-align: right;
    border-radius: .5em;
}
.inputs{
    grid-column: 1/3;
    padding: 1em 1.5em;
    background-color: white;
    color: black;
    font-size: 1.2rem;
    text-align: right;
    border-radius: .5em;
}
.keyboard{
    grid-column: 1/3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    /* max-height: 60vh; */
}
.btns{
    font-size: 1.3rem;
    padding: 1em;
    color: white;
    text-align: center;
    background-color: rgb(63, 61, 61);
    margin: .5em;
    border-radius: .5em;
    /* box-shadow: inset; */
}
#btn-eqls{
    grid-row: span 4;
    padding-top: 5em;
    font-size: 2rem;
    background-color: rgb(55, 153, 68);
}
#btn-clr{
    background-color: rgb(38, 127, 156);
}
#btn-del{
    background-color: rgb(194, 47, 27);
}
.clicked-btn {
    background-color:  rgb(38, 127, 156);
}
.clr-clicked {
    background-color:  rgb(63, 61, 61);
}