*{
margin: 0;
padding: 0;
}
body{
background-color: #0c9bdd;
height: 100vh;
width: 100%;
}
.container{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container input{
width: 50%;
height: 35px;
font-size: 20px;
border-radius: 10px;
border: none;
outline: none;
padding-left: 20px;
margin-top:30px;
}
.container input:focus {
border: none;
padding-left: 20px;
}
.container h1{
font-size: 2rem;
color: #FFF;
font-weight: bold;
text-align: center;
}
.keyboard {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 5px 0;
background: #464747;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
user-select: none;
transition: bottom 0.4s;
}
.keyboard--hidden {
bottom: -100%;
}
.keyboard__keys {
text-align: center;
}
.keyboard__key {
height: 45px;
width: 6%;
max-width: 90px;
margin: 3px;
border-radius: 4px;
border: none;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 1.05rem;
outline: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
padding: 0;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.keyboard__key:active {
background: rgba(255, 255, 255, 0.12);
}
.keyboard__key--wide {
width: 12%;
}
.keyboard__key--extra-wide {
width: 36%;
max-width: 500px;
}
.keyboard__key--activatable::after {
content: '';
top: 10px;
right: 10px;
position: absolute;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
}
.keyboard__key--active::after {
background: #0dd606;
}
.keyboard__key--dark {
background: rgba(0, 0, 0, 0.25);
}