1 |
|
2 |
|
3 | html, body {
|
4 | margin: 0;
|
5 | padding: 0;
|
6 | font-size: 16px;
|
7 | }
|
8 | body > * {
|
9 | font-size: 1rem;
|
10 | color: dimgray;
|
11 | box-sizing: border-box;
|
12 | font-family: sans-serif;
|
13 | transition: all linear 150ms;
|
14 | }
|
15 | body {
|
16 | flex: 1;
|
17 | width: 100vw;
|
18 | display: flex;
|
19 | min-height: 100vh;
|
20 | overflow-x: hidden;
|
21 | flex-direction: column;
|
22 | background-color: white;
|
23 | }
|
24 | a {
|
25 | cursor: pointer;
|
26 | color: darkorange;
|
27 | text-decoration: none;
|
28 | }
|
29 | a:hover {
|
30 | text-decoration: underline;
|
31 | }
|
32 | i {
|
33 | font-weight: 200;
|
34 | font-family: monospace;
|
35 | }
|
36 | li {
|
37 | margin: 0.6rem;
|
38 | }
|
39 | h1 {
|
40 | font-size: 3rem;
|
41 | font-weight: 300;
|
42 | margin: 1rem 0;
|
43 | }
|
44 | h2 {
|
45 | font-weight: 300;
|
46 | font-size: 2.9rem;
|
47 | margin: 3rem 0 1rem 0;
|
48 | }
|
49 | h3 {
|
50 | padding: 1rem 0;
|
51 | font-weight: 300;
|
52 | font-size: 2.9rem;
|
53 | margin: 3rem 0 2rem 0;
|
54 | border-bottom: solid 2px lightgray;
|
55 | }
|
56 | pre {
|
57 |
|
58 | margin: 0;
|
59 | tab-size: 4;
|
60 | padding: 1rem;
|
61 | overflow-x: auto;
|
62 |
|
63 | font-family: monospace !important;
|
64 | background-color: whitesmoke !important;
|
65 | }
|
66 | label {
|
67 | display: flex;
|
68 | align-items: center;
|
69 | justify-content: center;
|
70 | }
|
71 | main {
|
72 | width: 100%;
|
73 | margin: 5vh auto;
|
74 | max-width: 1200px;
|
75 | }
|
76 | main > :first-child {
|
77 | display: block;
|
78 | padding: 0 5vw;
|
79 | }
|
80 | section {
|
81 | margin: 1rem auto;
|
82 | padding: 1rem;
|
83 |
|
84 | display: flex;
|
85 | max-width: 1000px;
|
86 | flex-direction: column;
|
87 | justify-content: center;
|
88 | }
|
89 | button {
|
90 | display: inline-block;
|
91 | border: none;
|
92 | cursor: pointer;
|
93 | margin: 0.5rem auto;
|
94 | padding: 0.5rem;
|
95 | font-size: 1rem;
|
96 | font-weight: 600;
|
97 | color: dimgray;
|
98 | border-radius: 5px;
|
99 | background: darkorange;
|
100 | }
|
101 | button:hover {
|
102 | filter: saturate(0.6);
|
103 | }
|
104 | .title {
|
105 | display: block;
|
106 | padding: 1rem 0;
|
107 | text-align: center;
|
108 | }
|
109 | .title > h1 {
|
110 | font-weight: 200;
|
111 | color: lightslategrey;
|
112 | }
|
113 | .title > h2 {
|
114 | font-weight: 200;
|
115 | font-size: 1.3rem;
|
116 | color: lightslategrey;
|
117 | }
|
118 | .title > h1 > span {
|
119 | font-weight: 200;
|
120 | font-size: 3.9rem;
|
121 | color: darkorange;
|
122 | text-transform: uppercase;
|
123 | }
|
124 | .menu {
|
125 | width: 100%;
|
126 | display: block;
|
127 | text-align: center;
|
128 | background-color: whitesmoke;
|
129 | border-bottom: solid 3px darkorange;
|
130 | }
|
131 | .menu a {
|
132 | display: inline-block;
|
133 | vertical-align: middle;
|
134 | padding: 1.3rem 1.9rem;
|
135 | text-transform: uppercase;
|
136 | }
|
137 | .menu a:hover {
|
138 | background: rgba(0, 0, 0, 0.1);
|
139 | }
|
140 | .menu-item {
|
141 | position: relative;
|
142 | display: inline-block;
|
143 | }
|
144 | .menu-item-button > a::after {
|
145 | margin: 0.6rem;
|
146 |
|
147 | content: '';
|
148 | color: darkorange;
|
149 | }
|
150 | .menu-item-content {
|
151 | z-index: 1;
|
152 | display: none;
|
153 | position: absolute;
|
154 | background: whitesmoke;
|
155 | }
|
156 | .menu-item:hover .menu-item-content {
|
157 | display: block;
|
158 | }
|
159 |
|
160 | r-error {
|
161 | text-align: center;
|
162 | align-items: center;
|
163 | align-content: center;
|
164 | justify-content: center;
|
165 | flex-direction: column;
|
166 | }
|
167 | o-select {
|
168 | padding: 0.5rem;
|
169 | border: 1px solid lightgray;
|
170 | }
|
171 | o-option {
|
172 | margin-left: 1rem;
|
173 | }
|
174 | o-option[active] {
|
175 | background-color: lightgray;
|
176 | }
|
177 | o-optgroup::before {
|
178 | font-weight: bold;
|
179 | }
|