:root {
  --1: #1f1f1f;
  --2: #292929;
  --3: #e3e3e3;
  --a1: #a8c7fa;
  --a4: #0063ff;
  --b1: #ffb3b3;
  --b4: #ff000d;
  --c1: #72daa5;
  --c2: #003822;
  --c3: #005234;
  --c4: #4eb281;
}

@font-face {
  font-family: "Google Sans Text";
  src: url("assets/fonts/GoogleSansTextMedium.woff2") format("woff2");
  font-weight: bold;
}
body, html {
  background: var(--c1);
}

.container {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 40px calc(100vw - 168px - 40px) 40px 88px;
  grid-template-rows: calc(100vh - 160px - 32px) 80px 80px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
}
.container .controls {
  display: grid;
  grid-template-columns: 40px;
  grid-template-rows: repeat(auto-fill, 40px);
  row-gap: 8px;
}
.container #canvas {
  border-radius: 30px;
  border: 5px solid var(--c2);
  grid-column: 2;
  grid-row: 1;
}
.container #canvas2 {
  border-radius: 30px;
  border: 5px solid var(--c2);
  grid-column: 2;
  grid-row: 1;
}
.container .selector {
  grid-column: 4;
  grid-row: 1/span 3;
  display: grid;
  grid-template-rows: repeat(auto-fill, 88px);
  column-gap: 8px;
  row-gap: 8px;
  align-items: stretch;
}
.container .selector #t1 {
  background-image: url("assets/img/t1.png");
  background-size: cover;
}
.container .selector #t2 {
  background-image: url("assets/img/t2.png");
  background-size: cover;
}
.container .selector #t3 {
  background-image: url("assets/img/t3.png");
  background-size: cover;
}
.container .selector #t4 {
  background-image: url("assets/img/t4.png");
  background-size: cover;
}
.container .chart-container {
  grid-column: 2/span 2;
}
.container .loss-info {
  grid-column: 1;
  align-self: center;
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
}
.container .slider-container {
  align-self: center;
  text-align: center;
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  grid-column: 1/span 3;
  position: relative;
  width: 100%;
}
.container .slider-container .range-slider {
  display: grid;
  grid-template-columns: 1fr 32px;
  column-gap: 8px;
  align-items: center;
}
.container .slider-container input[type=range] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px;
}
.container .slider-container input[type=range]::-webkit-slider-runnable-track {
  height: 15px;
  background: var(--c4);
  border-radius: 16px;
}
.container .slider-container input[type=range]::-moz-range-track {
  height: 15px;
  background: var(--c4);
  border-radius: 16px;
}
.container .slider-container input[type=range]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: var(--c1);
  border-radius: 50%;
  border: 2px solid var(--c2);
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px var(--c2);
}
.container .slider-container input[type=range]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: var(--c1);
  border-radius: 50%;
  border: 1px solid var(--c2);
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px var(--c2);
}

.btn {
  all: unset;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn:hover {
  transform: scale(1.05);
}

.btn-big {
  border-radius: 12px;
  border: 5px solid var(--c4);
}
.btn-big.active {
  border-color: var(--c2);
}

.btn-default {
  border-radius: 12px;
  border: 5px solid var(--c2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-default span {
  color: var(--c2);
}
.btn-default.inactive {
  border-color: var(--c4);
}
.btn-default.inactive span {
  color: var(--c4);
}

.btn-round {
  border-radius: 999px;
  border: 5px solid var(--c4);
}
.btn-round#btn-color1 {
  background: var(--a1);
}
.btn-round#btn-color1.active {
  background: var(--a4);
  border: 5px solid var(--c2);
}
.btn-round#btn-color2 {
  background: var(--b1);
}
.btn-round#btn-color2.active {
  background: var(--b4);
  border: 5px solid var(--c2);
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;
}

/*# sourceMappingURL=style.css.map */