/* COLORS */
.page-title {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  color: #00C2FF;
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, monospace, sans-serif;
}

body {
  background: #052338;
  color: #fff;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, monospace, sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

.App-wrapper {
  display: flex;
}

.Svg {
  background: #052338;
  box-sizing: border-box;
  height: 82vh;
  padding: 5%;
  width: 100vw;
}

.polygon {
  fill: none;
  stroke: #00C2FF;
  stroke-width: 2;
}

.circle {
  fill: #052338;
  stroke: #FFD774;
  stroke-width: 2;
}

.App-line {
  opacity: .8;
  stroke: #FFD774;
}

.App-wrapper {
  display: flex;
  flex-direction: column;
}

.Controls {
  padding: 0 1rem;
}

.Controls-slider-wrap {
  align-items: center;
  display: flex;
  margin: 2rem 0;
}

.Controls-slider-label {
  flex: 0 0 50px;
  font-size: 1.35rem;
  margin: 0;
  text-align: center;
}

/* Checkbox */
.Checkbox--checkbox {
  display: none;
}

.Checkbox--label {
  cursor: pointer;
  border: 1px solid #FF6B5A;
  font-size: .85rem;
  padding: 0.3rem 1rem;
}
.Checkbox:not(:first-of-type) .Checkbox--label {
  border-left: none;
}
.Checkbox--checkbox:checked + .Checkbox--label {
  background: #FF6B5A;
}
.Checkbox:focus .Checkbox--label, .Checkbox:hover .Checkbox--label {
  opacity: 0.8;
}

/* Adapted from
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  border: 3px solid none;
}
input[type=range]::-webkit-slider-thumb {
  background: #052338;
  border: 3px solid #00C2FF;
  border-radius: 100%;
  cursor: pointer;
  height: 30px;
  position: relative;
  top: 100%;
  width: 30px;
  margin-top: -17px;
  transition: all 100ms ease-in-out;
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb:focus, input[type=range]::-webkit-slider-thumb:hover {
  background: #FFD774;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.1);
}
input[type=range]::-moz-range-track {
  cursor: pointer;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  border: 3px solid none;
}
input[type=range]::-moz-range-thumb {
  background: #052338;
  border: 3px solid #00C2FF;
  border-radius: 100%;
  cursor: pointer;
  height: 30px;
  position: relative;
  top: 100%;
  width: 30px;
}
input[type=range]::-moz-range-thumb:focus, input[type=range]::-moz-range-thumb:hover {
  background: #FFD774;
}
input[type=range]::-ms-track {
  cursor: pointer;
  height: 2px;
  width: 100%;
  background: transparent;
  border-color: transparent;
  border-width: 30px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid none;
  border-radius: 0;
}
input[type=range]::-ms-fill-upper {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid none;
  border-radius: 0;
}
input[type=range]::-ms-thumb {
  background: #052338;
  border: 3px solid #00C2FF;
  border-radius: 100%;
  cursor: pointer;
  height: 30px;
  position: relative;
  top: 100%;
  width: 30px;
}
input[type=range]::-ms-thumb:focus, input[type=range]::-ms-thumb:hover {
  background: #FFD774;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(255, 255, 255, 0.1);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(255, 255, 255, 0.1);
}