:root {
  --fret-bg: url('data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7');
  --font-size: 0.65rem;
  --stringHeight: 16px;
  --fretWidth: 20px;
}
* {
  font-family:sans-serif;
}
body {
  background: #654321;
  color:#eee;
}
.fret.selected {
  background: #654321;
  color:#fff;
}
.fret.root,
.fret.root.selected {
  width: var(--fretWidth);
  height: var(--stringHeight);
  font-size:var(--font-size);
  background: #444;
  font-weight:bold;
  color:#fff;
  border-radius:50%;
}
.mt,
.fret-nbr {
  text-align: center;
  font-size: var(--font-size);
  width: var(--fretWidth);
  height: var(--stringHeight);
  color: #fff;
}
main {
  display:flex;
}
.fret {
  width: var(--fretWidth);
  height: var(--stringHeight);
  font-size:var(--font-size);
  color:white;
  text-align:center;
  justify-content: center;
  justify-items:center;
  align-content: center;
  border:0.05rem solid #6d6a4c;
  background: brown var(--fret-bg) repeat-x center;
  text-align:center;
  font-weight:bold;
}

.fret.nut {
  background: #fff var(--fret-bg) repeat-x center;
  color:#f00;
  font-weight:bold;
}
.fret.nut.populated {
  background: #f00 var(--fret-bg) repeat-x center;
  color:#fff;
  font-weight:bold;
}
.fret.populated {
  border-radius:50%;
  background: white;
  color:blue;
}

#tab {
  margin-bottom:20px;
}
.strings {
  margin-left: -520px;
  z-index: -1;
}
.string {
  height: 3px; 
  width: 520px;
  margin: 14px;
  border-top: rgba(140, 136, 11, 0.56) solid 4px;
}