* {
  color: #fff;
}
h2 {
  margin: 0;
}

pre {
  font-weight: 600;
  font-family: var(--font-main);
  white-space: pre-wrap;
}
pre span{
  color: #ff5656;
}



svg {
  background-color: #2c324d;
    border: 1px dashed #979cb1;
}
svg * {
  /* stroke: var(--bg-brand); */
}
svg text {
  font-family: var(--font-main);
  fill: var(--tc-main);
}



.main-content {

  /* padding: .5rem; */
}

.main-content header {
  grid-column: 1 / -1;
}
section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  padding: .5rem;
}
section article {
  /* background: linear-gradient(0deg, rgba(62, 101, 193, 0) 0%, rgba(26, 50, 89, 0.64) 100%, rgba(25, 39, 71, 0.3) 67%); */
  /* background: linear-gradient(0deg, rgba(25, 39, 71, 0.3) 67%, rgba(26, 50, 89, 0.64) 100%, rgba(25, 39, 71, 0.3) 67%); */
  background: #1c1944;
  text-align: center;
  padding: 1rem;
  border-radius: 4px;
}


.viewbox,.text,.path {
  grid-column: 1 / 3;
}



table,tr,td {
  min-width:  100px;
  margin: 0 auto;
  border: 1px solid rgb(32 66 104);
  border-collapse: collapse;
}
table td{
  padding: 4px 24px;
}