:root {
  --fretboard-height: 350;
  --number-of-strings: 6;
  --string-height: 10;
  --half-string-height: calc(var(--string-height) / 2);
  --string-top-position: calc(var(--fretboard-height) / var(--number-of-strings) / 2 - var(--half-string-height));
  --double-fretmark-position-1: calc(var(--fretboard-height) * 0.25);
  --double-fretmark-position-2: calc(var(--fretboard-height) * 0.75);
  --noteDotOpacity: 0;


  --background-color: #353535;
  --fretboard-color: #be975b;
  --string-color: #161717;
  --note-color: teal;
}
* {
  margin: 0;
  padding: 0;
}

body {
  background: #353535;
}

.settings {
  display: flex;
  color: #fff;
  padding: 20px;
  border-bottom: 1px solid #444;
  background: #282828;
}
.accidental-selector {
  margin-left: 20px;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
label {
  margin: 0 10px;
}
.fretboard {
  display: flex;
  flex-direction: column;
  background: #be975b;
  width: 100%;
  height: calc(var(--fretboard-height) * 1px);
  margin-top: 50px;
}

.string {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.string:before{
  content: '';
  width: 100%;
  height: calc(var(--string-height) * 1px);
  background: linear-gradient(#eee,#999);
  box-shadow: 76px 3px 10px #806233;
  z-index: 1;
  position: absolute;
  top: 22px;
  top: calc(var(--string-top-position) * 1px);
}
.note-fret{
  display: flex;
  flex: 1;
  border-right: 10px solid;
  border-image: linear-gradient(to left, #777, #bbb) 1 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}
.note-fret:first-child {
  background: #161717;
  min-width: 76px;
  border-right: 12px solid;
  flex-grow: 0;
  flex-shrink: 0;
  border-image: linear-gradient(to left, #bbb, #fff, #bbb) 1 100%;
}
.note-fret:before {
  content: attr(data-note);
  width: 33px;
  height: 33px;
  border-radius: 50%;
  line-height: 33px;
  text-align: center;
  background: teal;
  z-index: 2;
  color: #eee;
  /* 0 for now */
  opacity: var(--noteDotOpacity); 
}

.single-fretmark:after, .double-fretmark:before, .double-fretmark:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #806233;
  border-radius: 50%;
}

.single-fretmark:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #806233;
  border-radius: 50%;
  top: calc(var(--fretboard-height) / 2 * 1px);
  transform: translate(0,-50%);
}

.double-fretmark:before {
  top: calc(var(--double-fretmark-position-1) * 1px);
  transform: translate(-140%,-50%);
}
.double-fretmark:after {
  top: calc(var(--double-fretmark-position-2) * 1px);
  transform: translate(-140%,-50%);
}

.note-name-section {
  width: 100%;
  color: #fff;
  font-weight: 100;
  font-size: 2.5em;
  display: flex;
  justify-content: center;

}
.note-name-section span {
  padding: 10px;
  cursor: pointer;
}
.note-name-section span:hover {
  color: #00baba;
}