body {
  background: #e8c183
}

/* The parent element */
.css-chart {
  /* The chart borders */
  border-bottom: 5px solid;
  border-left: 5px solid;
  /* The height, which is initially defined in the HTML */
  height: var(--widget-size);
  /* A little breathing room should there be others items around the chart */
  margin: 1em;
  /* Remove any padding so we have as much space to work with inside the element */
  padding: 0;
  position: relative;
  /* The chart width, as defined in the HTML */
  width: var(--widget-size);

  overflow: hidden;
}
  /* The unordered list holding the data points, no list styling and no spacing */
.line-chart {
  list-style: none;
  margin: 0;
  padding: 0;
}
  /* Each point on the chart, each a 12px circle with a light border */
.data-point {
  background-color: white;
  border: 2px solid lightblue;
  border-radius: 50%;
  height: 12px;
  position: relative;
  top: 100px;
  left: 100px;
  width: 12px;
}

.circle-element {
    border: 2px solid red;
    border-radius: 50%;
    height: 800px;
    position: relative;
    top: 0px;
    left: -400px;
    width: 800px;
}

.page {
  background: #fff;
  max-width: 720px;
  margin: 2em auto;
  padding: 2em;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}

.page h1 {
  margin-top: 0;
}

.page a {
  color: #1a5fb4;
}