@font-face {
  font-family: "Abbots Morton Spaceport Sans";
  src: url("AbbotsMortonSpaceportSansJunior.woff2") format("woff2");
}

@font-face {
  font-family: "Abbots Morton Spaceport Mono";
  src: url("AbbotsMortonSpaceportMono.woff2") format("woff2");
}

@font-face {
  font-family: "Departure Mono";
  src: url("DepartureMono-Regular.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --font-stack: "Abbots Morton Spaceport Sans", "Departure Mono", monospace;
  --u: 60px;
  --key-h: 66px;
  --gap: 2px;
  --w150: calc(var(--u) * 1.5);
  --hand-w: calc(var(--w150) + var(--u) * 6 + var(--gap) * 6);
  --key-bg: light-dark(#fff, #2a2a2a);
  --key-border: light-dark(#aaa, #555);
  --divider: light-dark(#ddd, #444);
  --accent: light-dark(#0066cc, #4a9eff);
}

html {
  font-family: var(--font-stack);
  font-size: 11px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

* {
  box-sizing: border-box;
}

body {
  background: light-dark(#f5f5f5, #1a1a1a);
  color: light-dark(#222, #e0e0e0);
  padding: 2rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1,
h2 {
  color: var(--accent);
  font-weight: normal;
}

h1 {
  font-size: 44px;
  padding-bottom: 0;
  margin-bottom: 0;
}

h2 {
  font-size: 33px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.row {
  display: flex;
  gap: var(--gap);
  height: var(--key-h);
  overflow: visible;
}

.key {
  width: var(--u);
  height: var(--key-h);
  border: 1px solid var(--key-border);
  border-radius: 4px;
  background: var(--key-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 22px;
}

.key > .latin,
.key > .qs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  outline: none;
}

.key > .latin {
  border-bottom: 1px solid var(--divider);
}

.key > .qs {
  font-family: "Abbots Morton Spaceport Mono", "Departure Mono", monospace;
  background: light-dark(#f7f5f0, #28261f);
  position: relative;

  .shifted, .optioned {
    position: absolute;
    font-size: 11px;
    font-family: "Departure Mono", monospace;
    color: light-dark(#555, #b0b0b0);
  }

  .shifted {
    top: 1px;
    left: 2px;
  }

  .shifted.qs-font {
    font-family: "Abbots Morton Spaceport Mono", monospace;
  }

  .optioned {
    bottom: 1px;
    right: 2px;
    font-family: "Abbots Morton Spaceport Mono", monospace;
  }
}

.w125 { width: calc(var(--u) * 1.25); }
.w150 { width: var(--w150); }
.w175 { width: calc(var(--u) * 1.75); }
.w200 { width: calc(var(--u) * 2); }
.w225 { width: calc(var(--u) * 2.25); }
.w275 { width: calc(var(--u) * 2.75); }

/* Ergodox EZ */
.keyboard.ergodox {
  display: flex;
  gap: 48px;
  align-items: flex-start;

  .hand {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .main-keys {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: var(--hand-w);
  }

  .key.h150 {
    height: calc(var(--key-h) * 1.5 + var(--gap));
    align-self: flex-start;
    z-index: 1;
  }

  .key.h150-up {
    height: calc(var(--key-h) * 1.5 + var(--gap));
    align-self: flex-end;
    z-index: 1;
  }

  .left > .main-keys > .row:nth-child(5) {
    margin-left: calc(var(--u) * 0.4);
  }

  .right > .main-keys > .row:nth-child(3) {
    justify-content: flex-end;
  }

  .right > .main-keys > .row:nth-child(5) {
    justify-content: flex-end;
    margin-right: calc(var(--u) * 0.4);
  }

  .thumb {
    display: grid;
    grid-template-columns: repeat(3, var(--u));
    grid-template-rows: repeat(3, var(--key-h));
    gap: var(--gap);
  }

  .left > .thumb {
    margin-left: auto;
  }

  .left > .thumb > :nth-child(1) { grid-column: 2; grid-row: 1; }
  .left > .thumb > :nth-child(2) { grid-column: 3; grid-row: 1; }
  .left > .thumb > :nth-child(3) { grid-column: 3; grid-row: 2; }
  .left > .thumb > :nth-child(4) { grid-column: 1; grid-row: 2 / 4; height: auto; }
  .left > .thumb > :nth-child(5) { grid-column: 2; grid-row: 2 / 4; height: auto; }
  .left > .thumb > :nth-child(6) { grid-column: 3; grid-row: 3; }

  .right > .thumb > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .right > .thumb > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .right > .thumb > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .right > .thumb > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .right > .thumb > :nth-child(5) { grid-column: 2; grid-row: 2 / 4; height: auto; }
  .right > .thumb > :nth-child(6) { grid-column: 3; grid-row: 2 / 4; height: auto; }
}

/* MacBook */
.keyboard.macbook {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: calc(var(--u) * 15 + var(--gap) * 13);
}

.key.space {
  flex-grow: 1;
}