|
| 1 | +/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
| 2 | +button, |
| 3 | +hr, |
| 4 | +input { |
| 5 | + overflow: visible; |
| 6 | +} |
| 7 | +progress, |
| 8 | +sub, |
| 9 | +sup { |
| 10 | + vertical-align: baseline; |
| 11 | +} |
| 12 | +[type="checkbox"], |
| 13 | +[type="radio"], |
| 14 | +legend { |
| 15 | + box-sizing: border-box; |
| 16 | + padding: 0; |
| 17 | +} |
| 18 | +html { |
| 19 | + line-height: 1.15; |
| 20 | + -webkit-text-size-adjust: 100%; |
| 21 | +} |
| 22 | +body { |
| 23 | + margin: 0; |
| 24 | +} |
| 25 | +details, |
| 26 | +main { |
| 27 | + display: block; |
| 28 | +} |
| 29 | +h1 { |
| 30 | + font-size: 2em; |
| 31 | + margin: 0.67em 0; |
| 32 | +} |
| 33 | +hr { |
| 34 | + box-sizing: content-box; |
| 35 | + height: 0; |
| 36 | +} |
| 37 | +code, |
| 38 | +kbd, |
| 39 | +pre, |
| 40 | +samp { |
| 41 | + font-family: monospace, monospace; |
| 42 | + font-size: 1em; |
| 43 | +} |
| 44 | +a { |
| 45 | + background-color: transparent; |
| 46 | +} |
| 47 | +abbr[title] { |
| 48 | + border-bottom: none; |
| 49 | + text-decoration: underline; |
| 50 | + text-decoration: underline dotted; |
| 51 | +} |
| 52 | +b, |
| 53 | +strong { |
| 54 | + font-weight: bolder; |
| 55 | +} |
| 56 | +small { |
| 57 | + font-size: 80%; |
| 58 | +} |
| 59 | +sub, |
| 60 | +sup { |
| 61 | + font-size: 75%; |
| 62 | + line-height: 0; |
| 63 | + position: relative; |
| 64 | +} |
| 65 | +sub { |
| 66 | + bottom: -0.25em; |
| 67 | +} |
| 68 | +sup { |
| 69 | + top: -0.5em; |
| 70 | +} |
| 71 | +img { |
| 72 | + border-style: none; |
| 73 | +} |
| 74 | +button, |
| 75 | +input, |
| 76 | +optgroup, |
| 77 | +select, |
| 78 | +textarea { |
| 79 | + font-family: inherit; |
| 80 | + font-size: 100%; |
| 81 | + line-height: 1.15; |
| 82 | + margin: 0; |
| 83 | +} |
| 84 | +button, |
| 85 | +select { |
| 86 | + text-transform: none; |
| 87 | +} |
| 88 | +[type="button"], |
| 89 | +[type="reset"], |
| 90 | +[type="submit"], |
| 91 | +button { |
| 92 | + -webkit-appearance: button; |
| 93 | +} |
| 94 | +[type="button"]::-moz-focus-inner, |
| 95 | +[type="reset"]::-moz-focus-inner, |
| 96 | +[type="submit"]::-moz-focus-inner, |
| 97 | +button::-moz-focus-inner { |
| 98 | + border-style: none; |
| 99 | + padding: 0; |
| 100 | +} |
| 101 | +[type="button"]:-moz-focusring, |
| 102 | +[type="reset"]:-moz-focusring, |
| 103 | +[type="submit"]:-moz-focusring, |
| 104 | +button:-moz-focusring { |
| 105 | + outline: ButtonText dotted 1px; |
| 106 | +} |
| 107 | +fieldset { |
| 108 | + padding: 0.35em 0.75em 0.625em; |
| 109 | +} |
| 110 | +legend { |
| 111 | + color: inherit; |
| 112 | + display: table; |
| 113 | + max-width: 100%; |
| 114 | + white-space: normal; |
| 115 | +} |
| 116 | +textarea { |
| 117 | + overflow: auto; |
| 118 | +} |
| 119 | +[type="number"]::-webkit-inner-spin-button, |
| 120 | +[type="number"]::-webkit-outer-spin-button { |
| 121 | + height: auto; |
| 122 | +} |
| 123 | +[type="search"] { |
| 124 | + -webkit-appearance: textfield; |
| 125 | + outline-offset: -2px; |
| 126 | +} |
| 127 | +[type="search"]::-webkit-search-decoration { |
| 128 | + -webkit-appearance: none; |
| 129 | +} |
| 130 | +::-webkit-file-upload-button { |
| 131 | + -webkit-appearance: button; |
| 132 | + font: inherit; |
| 133 | +} |
| 134 | +summary { |
| 135 | + display: list-item; |
| 136 | +} |
| 137 | +[hidden], |
| 138 | +template { |
| 139 | + display: none; |
| 140 | +} |
| 141 | + |
| 142 | +/* Variables */ |
| 143 | +html { |
| 144 | + --grey: #e7e7e7; |
| 145 | + --gray: var(--grey); |
| 146 | + --blue: #0072b9; |
| 147 | + --pink: #d60087; |
| 148 | + --yellow: #ffc600; |
| 149 | + --black: #2e2e2e; |
| 150 | + --red: #c73737; |
| 151 | + --green: #61e846; |
| 152 | + --text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); |
| 153 | + --box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); |
| 154 | + font-size: 62.5%; |
| 155 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, |
| 156 | + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; |
| 157 | + box-sizing: border-box; |
| 158 | +} |
| 159 | + |
| 160 | +*, |
| 161 | +*:before, |
| 162 | +*:after { |
| 163 | + box-sizing: inherit; |
| 164 | +} |
| 165 | + |
| 166 | +body { |
| 167 | + font-size: 2rem; |
| 168 | + line-height: 1.5; |
| 169 | + background-color: var(--blue); |
| 170 | + background-image: url("data:image/svg+xml,%3Csvg width='20' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 21.184c.13.357.264.72.402 1.088l.661 1.768C4.653 33.64 6 39.647 6 50c0 10.271-1.222 15.362-4.928 24.629-.383.955-.74 1.869-1.072 2.75v6.225c.73-2.51 1.691-5.139 2.928-8.233C6.722 65.888 8 60.562 8 50c0-10.626-1.397-16.855-5.063-26.66l-.662-1.767C1.352 19.098.601 16.913 0 14.85v6.335zm20 0C17.108 13.258 16 8.077 16 0h2c0 5.744.574 9.951 2 14.85v6.334zm0 56.195c-2.966 7.86-4 13.123-4 22.621h2c0-6.842.542-11.386 2-16.396v-6.225zM6 0c0 8.44 1.21 13.718 4.402 22.272l.661 1.768C14.653 33.64 16 39.647 16 50c0 10.271-1.222 15.362-4.928 24.629C7.278 84.112 6 89.438 6 100h2c0-10.271 1.222-15.362 4.928-24.629C16.722 65.888 18 60.562 18 50c0-10.626-1.397-16.855-5.063-26.66l-.662-1.767C9.16 13.223 8 8.163 8 0H6z' fill='%23fff' fill-rule='nonzero' fill-opacity='.1' opacity='.349'/%3E%3C/svg%3E%0A"); |
| 171 | + background-size: 15px; |
| 172 | +} |
| 173 | + |
| 174 | +/* Table Styles */ |
| 175 | + |
| 176 | +table { |
| 177 | + border-radius: 5px; |
| 178 | + overflow: hidden; |
| 179 | + margin-bottom: 2rem; |
| 180 | + border-collapse: collapse; |
| 181 | +} |
| 182 | + |
| 183 | +td, |
| 184 | +th { |
| 185 | + border: 1px solid var(--grey); |
| 186 | + padding: 0.5rem; |
| 187 | +} |
| 188 | + |
| 189 | +/* Helper Divs */ |
| 190 | + |
| 191 | +.wrapper { |
| 192 | + max-width: 1000px; |
| 193 | + margin: 4rem auto; |
| 194 | + padding: 2rem; |
| 195 | + background: white; |
| 196 | +} |
| 197 | + |
| 198 | +.box, |
| 199 | +.wrapper { |
| 200 | + box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.08653); |
| 201 | +} |
| 202 | +a { |
| 203 | + color: var(--blue); |
| 204 | + text-decoration-color: var(--yellow); |
| 205 | +} |
| 206 | + |
| 207 | +a.button, |
| 208 | +button, |
| 209 | +input[type="button"] { |
| 210 | + color: white; |
| 211 | + background: var(--pink); |
| 212 | + padding: 1rem; |
| 213 | + border: 0; |
| 214 | + border: 2px solid transparent; |
| 215 | + text-decoration: none; |
| 216 | + font-weight: 600; |
| 217 | + font-size: 2rem; |
| 218 | +} |
| 219 | + |
| 220 | +:focus { |
| 221 | + outline-color: var(--pink); |
| 222 | +} |
| 223 | + |
| 224 | +fieldset { |
| 225 | + border: 1px solid black; |
| 226 | +} |
| 227 | + |
| 228 | +input:not([type="checkbox"]):not([type="radio"]), |
| 229 | +textarea, |
| 230 | +select { |
| 231 | + display: block; |
| 232 | + padding: 1rem; |
| 233 | + border: 1px solid var(--grey); |
| 234 | +} |
| 235 | + |
| 236 | +.success { |
| 237 | + border: 1px solid red; |
| 238 | +} |
| 239 | + |
| 240 | +h1, |
| 241 | +h2, |
| 242 | +h3, |
| 243 | +h4, |
| 244 | +h5, |
| 245 | +h6 { |
| 246 | + color: white; |
| 247 | + margin-top: 0; |
| 248 | + line-height: 1; |
| 249 | + text-shadow: var(--text-shadow); |
| 250 | +} |
| 251 | +.wrapper h1, |
| 252 | +.wrapper h2, |
| 253 | +.wrapper h3, |
| 254 | +.wrapper h4, |
| 255 | +.wrapper h5, |
| 256 | +.wrapper h6 { |
| 257 | + color: var(--black); |
| 258 | + text-shadow: none; |
| 259 | +} |
0 commit comments