@media (prefers-color-scheme: dark) {
  body { background: #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body { background: #ddd; color: black; }
}

html {
    font-family: "Noto Sans","Open Sans",Arial,Helvetica,sans-serif;
}

.stretch {
  width:100%;
  height:50px;
}

#url, #name {
  padding: 1px;
  border-radius: 5px;
  width: 500px;
  color: #333;
}
#start, #end{
  padding: 1px;
  border-radius: 5px;
  width: 50px;
  color: #333;
}

button {
  color: #333;
}

#main {
  margin: 5px auto;
  padding-left: 20px;
}

#controls {
  border-radius: 10px;
  overflow: hidden;
  width: 600px;
  margin: 10px;
  position: relative;
  text-align: left;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 20px;
  vertical-align: middle;
}
label {
  padding-right: 10px;
}

#url_box {
  padding-bottom: 20px;
}

#buttons button {
  width: 200px;
}
#buttons {
  padding-top: 50px;
  padding-left: 50px;
}

#debug {
  border-color: darkred;
  color: #0CFF0C;
  min-width: 100px;
}
.highlight {
  color: white;
  font-width: bold;
}

.error {
  color: red;
  font-width: bold;
}

#links a {
  color: #0CFF0C;
}

#chart {
  float:right;
}

#links {
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -100;
}