* {
      margin: 0;
      font-family: 'Ubuntu', sans-serif;
    }

    .container {
      display: grid;
      grid-template-rows: repeat(6, 1fr);
      grid-template-columns: repeat(64, 1fr);
      gap: 0.2vw;
      aspect-ratio: 16/6;
      padding: 0.5vw;
      border-radius: 0.5vw;
      border: 0.1vw solid black;
      margin: 0.1vw;
      background: rgb(255, 0, 0);
      background: linear-gradient(315deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 255, 0, 1) 16%,
        rgba(0, 255, 0, 1) 32%,
        rgba(0, 255, 255, 1) 49%,
        rgba(0, 0, 255, 1) 66%,
        rgba(255, 0, 255, 1) 83%,
        rgba(255, 255, 255, 1) 100%);
    }

    .key {
      grid-column: span 4;
      background: rgb(255, 255, 255);
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(225, 225, 225, 1) 50%,
        rgba(220, 220, 220, 1) 50%,
        rgba(235, 235, 235, 1) 100%);
      border-radius: 0.5vw;
    }
    .key.darken{
      background: rgb(225, 225, 225);
      background: linear-gradient(135deg,
        rgba(225, 225, 225, 1) 0%,
        rgba(195, 195, 195, 1) 50%,
        rgba(190, 190, 190, 1) 50%,
        rgba(205, 205, 205, 1) 100%);
    }
    .keypressed {
      background: rgb(165, 165, 165);
    }

    .cap {
      font-size: 2vw;
      background: rgb(255, 255, 255);
      background: linear-gradient(315deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(210, 210, 210, 1) 100%);
      margin: 0.5vw;
      height: calc(100% - 1vw);
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .key.darken > .cap {
    background: rgb(225, 225, 225);
    background: linear-gradient(315deg,
      rgba(225, 225, 225, 1) 0%,
      rgba(180, 180, 180, 1) 100%);
    }
    .cappressed {
      background: rgb(175, 175, 175);
    }

    .bump>span{
      position: absolute;
      height: 1vw;
      color: rgb(180, 180, 180);
    }

    .multi {
      display: grid;
      grid-template: 1fr 1fr / 1fr 1fr;
      padding: 0 1vw;
    }

    .multi>p {
      grid-row: 1;
      grid-column: 1;
    }

    .multi>p+p {
      grid-row: 2;
    }

    .backspace {
      grid-column: span 8;
    }

    .tab,
    .bslash {
      grid-column: span 6;
    }

    .caps {
      grid-column: span 7;
    }

    .shift.left,
    .enter {
      grid-column: span 9;
    }

    .shift.right {
      grid-column: span 7;
    }

    .ctrl.left,
    .code,
    .alt.left {
      grid-column: span 5;
    }

    .space {
      grid-column: span 25;
    }