@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
  * {box-sizing: border-box;padding: 0;margin: 0;}
  body {font-family: 'Sen', sans-serif;min-height: 100vh;overflow: hidden;display: grid;place-items: center;background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);}
.keyboard {
    display: grid;
    grid-template-columns: repeat(30, 1.9vw);
    grid-template-rows: repeat(5, 4.75vw);
    grid-gap: 0.95vw;
    background: #c2ccdb;
    padding: 1.727272727272727vw;
    border-radius: 1.266666666666667vw;
    background: #d8dee8;
    box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
  }
  .keyboard .key {
    border-radius: 0.76vw;
    grid-column: auto/span 2;
    width: 100%;
    height: 100%;
    padding: 0.475vw;
    font-size: 1.9vw;
    display: grid;
    align-items: center;
    color: #8a94a4;
    justify-content: center;
    cursor: pointer;
    background: #d8dee8;
    box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
    transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
    user-select: none;
  }
  .keyboard .key:hover,
  .keyboard .key.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
    color: #fff;
    text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
  }
  .keyboard .key.dotted {
    position: relative;
  }
  .keyboard .key.dotted::before {
    content: '_';
    font-weight: bold;
    color: #b5c0d2;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .keyboard .key.esc {
    background: #ffc7d1;
    color: #f0f0f0;
  }
  .keyboard .key.esc:hover,
  .keyboard .key.esc.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;
    color: #fff;
    text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
  }
  .keyboard .key.back {
    background: #9cd2ff;
    color: #ececec;
  }
  .keyboard .key.back:hover,
  .keyboard .key.back.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #7cb6e5, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1e8099;
    color: #fff;
    text-shadow: 0 0 10px #8fdbe8, 0 0 15px #8fd6e8, 0 0 20px #8fdee8;
  }
  .keyboard .key.shift {
    background: #1e90ff;
    color: #d2e9ff;
  }
  .keyboard .key.shift:hover,
  .keyboard .key.shift.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;
    color: #fff;
    text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
  }
  .keyboard .key.control {
    background: #ec98ff;
    color: #f5f5f5;
  }
  .keyboard .key.control:hover,
  .keyboard .key.control.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;
    color: #fff;
    text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
  }
  .keyboard .key.win {
    background: #ffd39a;
    color: #faf7f0;
  }
  .keyboard .key.win:hover,
  .keyboard .key.win.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;
    color: #fff;
    text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
  }
  .keyboard .key.alt {
    background: #9090ff;
    color: #dddcfb;
  }
  .keyboard .key.alt:hover,
  .keyboard .key.alt.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;
    color: #fff;
    text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
  }
  .keyboard .key.fn {
    background: #67d89f;
    color: #d4f8e6;
  }
  .keyboard .key.fn:hover,
  .keyboard .key.fn.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;
    color: #fff;
    text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
  }
  .keyboard .key.cap {
    background: #fba485;
    color: #faefeb;
    position: relative;
  }
  .keyboard .key.cap:hover,
  .keyboard .key.cap.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;
    color: #fff;
    text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
  }
  .keyboard .key.cap::before {
    content: '';
    position: absolute;
    width: 0.5vw;
    height: 0.5vw;
    background: #f6ac91;
    top: 1vw;
    right: 1vw;
    border-radius: 50%;
  }
  .keyboard .key.cap.on::before {
    background: #fbded3;
    box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
  }
  .keyboard .key.tab {
    background: #7addda;
    color: #d7fcfa;
  }
  .keyboard .key.tab:hover,
  .keyboard .key.tab.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;
    color: #fff;
    text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
  }
  .keyboard .key.enter {
    background: #f7dd6d;
    color: #fffdf8;
  }
  .keyboard .key.enter:hover,
  .keyboard .key.enter.pressed {
    transform: perspective(300px) scale(0.97);
    box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #d39118;
    color: #fff;
    text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
  }
  .keyboard .key.s2 {font-size: 1.727272727272727vw;grid-column: auto/span 2;}
  .keyboard .key.s3 {font-size: 1.727272727272727vw;grid-column: auto/span 3;}
  .keyboard .key.s4 {font-size: 1.727272727272727vw;grid-column: auto/span 4;}
  .keyboard .key.s5 {font-size: 1.727272727272727vw;grid-column: auto/span 5;}
  .keyboard .key.s6 {font-size: 1.727272727272727vw;grid-column: auto/span 6;}
  .keyboard .key.s12 {font-size: 1.727272727272727vw;grid-column: auto/span 12;}
  .keyboard .key[on-shift] {font-size: 1.461538461538461vw;justify-items: center;}
  .keyboard .key[on-shift]::before {content: attr(on-shift);align-items: end;}