/* 
.center{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .btn
  {
    text-align:center;
    border:0.5px solid black;
    align-items:center;
    margin:5px;
    padding:20px;
    width:200px;
    border-radius:5px;
    box-shadow: 5px 5px 1px 2px black;
   outline:none;
    transition:0.5s;
  }
  
  .btn:hover
  {
    box-shadow: 0px 0px 0px 0px grey;
     transform: translate(5px,4px);
  }
  
  .btn1,.btn2,.btn3,.btn4
  {
    text-align:center;
    width:80px;
  }
  
  .fa
  {
      color: black;
  } */

  body
  {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  header
  {
      margin-top: 20px;
      text-align: center;
  }
  .keyboard-container
  {
      display: block;
      margin: auto;
      margin-top: 70px;
      justify-content: auto;
      margin-left: 20px;
      
  }
 
/* .bgg-gray
{
    text-align: center;
    border: 0.1px solid black;
    border-radius:5px;
    box-shadow: 3px 3px 1px 2px black;
   outline:none;
    transition:0.3s;
    margin: 2px;
}

.bgg-gray:hover
{
    box-shadow: 0px 0px 0px 0px grey;
     transform: translate(5px,4px); 
    cursor: pointer;
} */

.alphabet
{
    width: 20px;
}




.bgg-gray {background-image: linear-gradient(to right, #232526 0%, #414345  51%, #232526  100%)}
.bgg-gray {
    border: 0.1px solid black;
    margin: 2px;
   text-align: center;
   transition: 0.3s;
   background-size: 200% auto;
   color: white;          
   box-shadow: 3px 3px 1px 2px black;  
   border-radius: 5px;
   display: block;
   outline: none;
 }

 .bgg-gray:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   box-shadow: 0px 0px 0px 0px grey;
     transform: translate(4px,2px); 
    cursor: pointer;
 }

 .row-1
 {
     display: block;
     margin: 2px;
     width: 4px;
 }

 .keyboard-border
 {
    background-color: rgb(112, 112, 112);
     padding: 30px 10px 40px 30px;
     margin-left: 10px;
     margin-right: 10px;
     border-radius: 10px;
     box-shadow: -1px -1px 10px black,-1px -1px 10px black inset, -5px -5px 10px inset;
 }
 .footer
 {
     text-align: center;
     margin-top: 40px;
     color: black;
 }

 .link
 {
     color: whitesmoke;
 }

 #shift
 {
     width: 176px;
 }
 #caps
 {
     width: 2000px;
 }