* {
  box-sizing: border-box;
  font-family: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Calibri, Arial, sans-serif;
}

svg {
  width: 500px;
  height: 500px;
}

polyline {
  fill: none;
  stroke-linecap: round;
}
.function {
  stroke: dodgerblue;
  stroke-width: .1;
}
.distance {
  stroke: forestgreen;
  stroke-width: .15;
}
.dg {
  stroke: black;
  stroke-width: 0.05;
}
.axis {
  stroke: rgba(0,0,0,.75);
  stroke-width: .05;
}
.point {
  fill: red;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}