/* keyboard.css */
.keyboard { 
    display: flex; 
    height: 50vh; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: absolute;
    bottom: -110px;
  } 
  
  .keyboardcontainer { 
    width: 250%; 
    display: flex; 
    justify-content: center; 
    margin-top: 10px; 
  } 
  
  .containerkeyboard { 
    padding: 20px 20px; 
    display: flex; 
    flex-direction: column; 
    max-width: 1080px; 
    justify-content: center; 
    align-items: center; 
    border-radius: 7px; 
    background: #696969; 
  } 
  
  .rowKeyboard { 
    display: flex; 
    width: 120%; 
    justify-content: center; 
    align-items: center; 
  } 
  
  .key { 
    display: flex; 
    width: 60px; 
    height: 60px; 
    margin: 5px; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    background-color: #ffffff; 
    border-radius: 4px; 
    color: #ffffff; 
    font-size: 16px; 
    cursor: pointer; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
   
  } 
  
  .key:hover{ 
    background-color: #a1a1a1; 
  } 
  
  .row:first-child .key:first-child{ 
    width: 40px; 
  } 
  
  .row:first-child .key:last-child{ 
    width: 80px; 
  } 
  
  .row:nth-child(3) .key:first-child{ 
    width: 95px; 
  } 
  .row:nth-child(3) .key:last-child{ 
    width: 95px; 
  } 
  .row:nth-child(4) .key:first-child{ 
    width: 130px; 
  } 
  .row:nth-child(4) .key:last-child{ 
    width: 130px; 
  } 
  .row:nth-child(5) .key:nth-child(3){ 
    width: 550px; 
  }