:root {
  --white-key-offset: 62px;
  --black-key-offset: 40px;

  --c-left: 275px;
  --csh-left: calc(var(--c-left) + var(--black-key-offset));
  --d-left: calc(var(--c-left) + var(--white-key-offset));
  --dsh-left: calc(var(--d-left) + var(--black-key-offset));
  --e-left: calc(var(--d-left) + var(--white-key-offset));
  --f-left: calc(var(--e-left) + var(--white-key-offset));
  --fsh-left: calc(var(--f-left) + var(--black-key-offset));
  --g-left: calc(var(--f-left) + var(--white-key-offset));
  --gsh-left: calc(var(--g-left) + var(--black-key-offset));
  --a-left: calc(var(--g-left) + var(--white-key-offset));
  --ash-left: calc(var(--a-left) + var(--black-key-offset));
  --b-left: calc(var(--a-left) + var(--white-key-offset));

  --top-top: 142px;
  --bot-top: 410px;
}

img {
  position: absolute;
}

.bg {
  left: 0px;
  top: 0px;
}

.key-c-top {
  left: var(--c-left);
  top: var(--top-top);
}

.key-csh-top {
  left: var(--csh-left);
  top: var(--top-top);
}

.key-d-top {
  left: var(--d-left);
  top: var(--top-top);
}

.key-dsh-top {
  left: var(--dsh-left);
  top: var(--top-top);
}

.key-e-top {
  left: var(--e-left);
  top: var(--top-top);
}

.key-f-top {
  left: var(--f-left);
  top: var(--top-top);
}

.key-fsh-top {
  left: var(--fsh-left);
  top: var(--top-top);
}

.key-g-top {
  left: var(--g-left);
  top: var(--top-top);
}

.key-gsh-top {
  left: var(--gsh-left);
  top: var(--top-top);
}

.key-a-top {
  left: var(--a-left);
  top: var(--top-top);
}

.key-ash-top {
  left: var(--ash-left);
  top: var(--top-top);
}

.key-b-top {
  left: var(--b-left);
  top: var(--top-top);
}

.key-c-bot {
  left: var(--c-left);
  top: var(--bot-top);
}

.key-csh-bot {
  left: var(--csh-left);
  top: var(--bot-top);
}

.key-d-bot {
  left: var(--d-left);
  top: var(--bot-top);
}

.key-dsh-bot {
  left: var(--dsh-left);
  top: var(--bot-top);
}

.key-e-bot {
  left: var(--e-left);
  top: var(--bot-top);
}

.key-f-bot {
  left: var(--f-left);
  top: var(--bot-top);
}

.key-fsh-bot {
  left: var(--fsh-left);
  top: var(--bot-top);
}

.key-g-bot {
  left: var(--g-left);
  top: var(--bot-top);
}

.key-gsh-bot {
  left: var(--gsh-left);
  top: var(--bot-top);
}

.key-a-bot {
  left: var(--a-left);
  top: var(--bot-top);
}

.key-ash-bot {
  left: var(--ash-left);
  top: var(--bot-top);
}

.key-b-bot {
  left: var(--b-left);
  top: var(--bot-top);
}