html {
  min-width: 450px;
}

body {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: stretch;
  padding: 0px;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

svg {
  max-height: 600px;
  padding: 10px;
  background-color: bisque;
}

svg .helpline {
  stroke: gray;
  stroke-width: 0.3;
  fill: none;
}

#controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  padding: 10px;
  grid-column-gap: 20px;
}

#lbOffset,
#slOffset {
  grid-column: 1;
  grid-row: 1;
}

#slOffset {
  grid-row: 2;
}

#lbRadius,
#slRadius {
  grid-column: 2;
  grid-row: 1;
}

#slRadius {
  grid-row: 2;
}

#lbStart,
#slStart {
  grid-column: 3;
  grid-row: 1;
}

#slStart {
  grid-row: 2;
}

#lbEnd,
#slEnd {
  grid-column: 4;
  grid-row: 1;
}

#slEnd {
  grid-row: 2;
}

svg text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

svg path {
  stroke: black;
  stroke-width: 1.5px;
  stroke-miterlimit:10;
  stroke-linecap: round;
}

svg #arc1,
svg #line {
  stroke: none;
  fill: rgba(255,0,0,0.2);
}

svg #arc2 {
  stroke: none;
  fill: rgba(0,0,255,0.1);
}

#pStart {
  fill: green;
}

#pEnd {
  fill: red;
}