1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112

:root {
  --light: #f4f4f4;
  --cyan: #509c93;
  --light-gray: #eee;
  --medium-gray: #ddd;
  --gray: #6a6a6a;
  --dark: #444;
  --darker: #222;
}

html {
  background: var(--light);
  -webkit-text-size-adjust: none;
  font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
}

::selection {
  background: var(--medium-gray);
  opacity: 0.3;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  max-width: 750px;
  padding: 0 13px;
  margin: 40px auto;
}

main, footer {
  font-size: 1rem;
  padding: 0;
  line-height: 160%;
}

main h1, h2, h3, .small-heading {
  font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
  font-weight: 500;
}

strong {
  font-weight: 500;
}

main h1 {
  font-size: 20px;
  padding: 10px 0 10px 0;
}

main h2 {
  font-size: 18px;
}

main h2, h3 {
  padding: 20px 0 15px 0;
}

nav {
  padding-top: 1rem;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: 20px;
}

nav ul li {
  padding-right: 10px;
  display: inline-block;
}

a {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  word-wrap: break-word;
}

a {
  color: var(--darker);
  border-bottom: 1.5px solid var(--medium-gray);
}

a:hover {
  border-bottom: 1.5px solid var(--gray);
}

.index {
  display: grid;
  grid-template-columns: 6em 1fr 7em;
  grid-row-gap: 0.5em;
}

.index-headings {
  display: grid;
  grid-template-columns: 6em 1fr 7em;
  padding-bottom: 1.2em;
  padding-top: 1.2em;
}

@media (max-width: 385px) {
  .index {
    grid-row-gap: 0.8em;
  }
}