* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
.container {
     width: 1450px;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
     
}
.keyboard-container {
     width: 1100px;
     display: flex;
     flex-direction: column;
     margin: 10px auto;
     margin-top: 20px;
     border: 1px solid white;
     border-radius: 10px;
     color: gray;
}

.row-1,
.row-2,
.row-3,
.row-4,
.row-5,
.row-6 {
     display: flex;
     justify-content: space-between;
     padding: 10px 10px 0 10px;
}
.row-6 {
     padding-bottom: 10px;
}

.btn {
     padding: 8px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     height: 60px;
     width: 60px;
     text-align: center;
     font-size: 16px;
     font-family: sans-serif;
     border: 1px solid gray;
     border-radius: 10px;
     box-shadow: inset -5px -5px 5px rgb(0, 0, 0);
}

.space-between {
     margin-left: 33.33px;
}
.backspace {
     width: 100px;
}
.tabkey {
     width: 100px;
}
.capskey,
.leftenter {
     width: 105px;
}
.leftshift,
.rightshift {
     width: 105px;
}
.spacebar {
     width: 455px;
}

.key-color {
     border: 1px solid gray;
     background-color: gray;
     color: black;
}

#wpm{
     color: white;
     display: inline-block;
     margin: 0 0 0 40px;
}