style.css

@import url('https://fonts.googleapis.com/css2?family=Quantico&display=swap');

*{
   margin:0;padding:0;
   box-sizing:border-box; color:white;
}

body{
   background-color:black;
}

#mainpanel{
  
   border:5px solid #e1b382;
   max-height:25pc; 
   max-width:20pc;
   border-radius:5px;
   position:absolute;
   margin:auto;
   top:0; right:0; left:0; bottom:0;
   box-shadow:0px 0px 90px grey;
  // background:linear-gradient(45deg,#e7e9bb,#403b4a);
   background:#1b1b1b;
}
#displaypanel{

    width:calc(100% * 20pc);
    border:3px solid;
    border-image:linear-gradient(90deg,yellow,violet);
    border-image-slice:1;
    padding:5px;
    margin:10px;
    box-shadow:2px 3px 4px black;
    text-align:right;
    font-family: 'Quantico', sans-serif;
    font-size:14px;
    overflow:auto;
    
}
.btns{
    padding:10px;
    height:calc(100% - 56px);
    width:calc(100% * 20pc);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    
}
.btn{
     
    font-size:24px;
    outline:0;
    border:1px solid;
    border-image:linear-gradient(90deg,yellow,violet);
    border-image-slice:1;
    background:transparent;
    transition: box-shadow .12s ease-in-out;
}
.btn:hover{
    box-shadow:inset 0 0 0 .2rem #fff;
}

.btn:nth-child(14)
{
   grid-column:2/4;
}