@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,500&display=swap"); body { font-family: "Open Sans", sans-serif; display: flex; justify-content: center; font-size: 11pt; line-height: 160%; } main { flex: 1; width: 100%; max-width: 800px; } h1, h2 { font-family: "Roboto", sans-serif; color: #4b5b69; font-weight: 400; line-height: 1.5em; } p { margin: 0; padding: 2pt 0; } .rules { ul { padding-left: 10pt; } li { font-family: "Open Sans", sans-serif; font-weight: 400; margin: 10pt 0; list-style-type: none; } li.depth-0 { font-family: "Open Sans", sans-serif; font-weight: 600; } li.depth-2 { padding-left: 20pt; } li.depth-4 { padding-left: 40pt; } li.depth-6 { padding-left: 60pt; } } .glossary { dt { font-weight: 600; } dd { margin-inline-start: 10pt; margin-bottom: 1rem; } } .toc { font-family: "Roboto", sans-serif; font-weight: 300; ul { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 700pt; } & > ul > li { margin-bottom: 1rem; } a { color: #0d85ce; text-decoration: none; &:hover { color: #87c7ff; } } } @media screen and (max-width: 700px) { .toc ul { max-height: none; } body { padding: 10pt; } .rules { .depth-2 { padding-left: 10pt; } .depth-4 { padding-left: 20pt; } .depth-6 { padding-left: 30pt; } } }