body {
  /*background: black;*/
  background: white;
  color: black;
}

main {
  font-size: 17px;
  line-height: 1.5;
  width: 800px;
  max-width: 100%;
  overflow: auto;
}

a {
  text-decoration: underline;
}

ol {
  list-style: none; 
  list-style-position: outside;
  display: table;
}

li::before {
  content: attr(idx) "."; 
  color: white;
  color: black;
  display: table-cell; 
  width: 1.2em;
}

li {
  display: table-row;
  border-spacing: 10px;
}

.ol1 {
  margin-top: 0.5em;
}

.ol2 {
  margin-left: -10px;
}

.ol2 > li::before {
  content: attr(idx) "."; 
  width: 1em;
}

.ol3 {
  margin-left: -10px;
  list-style: lower-alpha;
}


.ol3 > li::before {
  content: "(" attr(idx) ")"; 
  width: 1em;
}

@media only screen and (max-width: 400px) {
  main {
    font-size: 14px;
  }
  .ol2 {
    margin-left: -25px;
  }
  .ol3 {
    margin-left: -45px;
  }
}