span {
padding: 20px 30px;
border-radius: 22px;
cursor: pointer;
}
span:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}


/* Setting up the frame */
*{
      margin: 0;                        /* Preventing unexpected margins on the page
      padding: 0;                       /* Preventing unexpected padding on the page
      box-sizing: border-box;           /* Accounting for any border and padding that we specify for an element's width and height. */
      position: relative;               /* Positioning relative to the usual position */
}


/* Using FlexBox*/
.flex{
      display: flex;                    /* Defining a flex container */
      align-items: center;              /* Aligning every item to center of the box */
      justify-content: center;          /* Aligning all the content (text) to center of the box */
}


/* Defining how body will look like*/



/* Number Panel Section */
.numPan{                                /* Defining Number Panel */
      border-radius: 60px;              /* Curved edges */
      background: #000000;                 /* Light Black - Darker than #222, but lighter than pure black */
}

.numPan .disp{                          /* Defining Number Panel Display */
      border-top: 30px solid black;      /* Giving 30 pixel space on top of number panel */
      border-left: 30px solid black;     /* Giving 25 pixel space on left of number panel */
      border-right: 30px solid black;    /* Giving 25 pixel space on right of number panel */
      border-bottom: 20px solid black;   /* Giving 20 pixel space on bottom of number panel */
      border-radius: 10px;              /* Curved edges */
}

.numPan .disp input{                    /* Setting up Number Panel Display Input window */
      width: 25REM;                     /* Sets the width of the input box 300 pixels wide */
      height: 75px;
      padding: 10px;                     /* Sets the padding of the input box 10 pixels wide */
      border: 4px solid #666;           /* Sets the border of the box 4 pixels wide of color light gray */
      border-radius: 10px;              /* Curved edges */
      outline: 4px solid black;          /* Sets the outline for the border 4px wide of color milky gray */
      text-align: center;               /* Aligning the text to the center of box */
      color: black;                      /* Setting the color of box same as background; Light Black */
      font-size: 5em;                   /* Setting the size of the font as 5 element marks */
      font-family: sans-serif;          /* Setting the font style as sans-serif */
}

.numPan .nums{                          /* Setting up the layout of number icons in the Number Panel */
      border-radius: 60px;              /* Curved Edges */
}

.numPan .nums > .r div{                 /* Setting up the number icons */
      width: 70px;                      /* Setting up the width of the icons as 70 pixels wide */
      height: 70px;                     /* Setting up the height of the icons as 70 pixels wide */
      margin: 5px;                     /* Setting up the margin of the icons as 15 pixels wide */
      border: 3px solid white;           /* Setting up the border of icons as 4 pixels wide with color light milky gray */
      display: flex;                    /* Defining a flex container */
      align-items: center;              /* Aligning every item to center of the box */
      justify-content: center;          /* Aligning all the content (text) to center of the box */
      border-radius: 10px;              /* Curved Edges; To make the icons round, change the value to 40 */
      cursor: grab;                     /* Whenever you go near the icons with mouse or your hand, it hides */
      font-size: 2em;                   /* Setting the size of the font as 2 element marks */
      box-shadow: 0 0 14px #666;        /* Setting the highlight outside the icons as milky gray*/
}