:root{
    --body-color:#d9e4dd;
    --container-color:#555555;
    --show-color:#fbf7f0;
    --buttom-color:#0f3460;
    --buttom-color-shadow:#16213e;
    --box-color:#646464;
    --container-color-one:#e94560;
    --container-color-two:#1a1a2e;
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    background-color: var(--body-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    background: linear-gradient(to bottom, var(--container-color-one) ,var(--container-color-two));
   width: 40%;
   height: 80%;
   border-radius: 50px;
   box-shadow: 0px 20px 40px 2px var(--box-color);
   display: grid;
   grid-template-columns: 10% 80% 10%;
   grid-template-rows: 40% 60%;
}
.show{
    margin: 10% 0 0 0;
  display: grid;
  grid-column: 2/3;
  grid-row: 1/2;
 background-color: var(--body-color);
  height: 60%;
  border-radius: 25px;
  text-align: center;
  font-size: x-large;
  grid-template-rows: 50% 50%;
}

.tecleado{
    display: grid;
    grid-column: 2/3;
    grid-row: 2/3;
    grid-template-columns: repeat(5,20%);
    grid-template-rows: repeat(4,22%) 10%;
}
.tecleado-boton,.entrada-datos,.salida-datos{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
.tecleado-boton{
    height: 70%;
    width: 70%;
    border-radius: 25%;
    font-family: OpenSans;
    color:var(--body-color);
    background-color: var(--buttom-color);
    border: 1px solid  var(--buttom-color);
    box-shadow: 0px 5px 0px var(--buttom-color-shadow);
    position: relative;
    top: 0px;
    transition: all ease 0.3s;
}

.tecleado-boton:active{
    box-shadow: 0 3px 0 var(--buttom-color-shadow);
    top: 3px;
}

.entrada-datos,.salida-datos{
  font-family: 'Press Start 2P', cursive;
  font-size: 60%;
  height: 50%;
}

@media only screen and (max-width: 900px){
    body{
        width: 900px;
    }
}