assets/css/global.css

   1 /* Reset
   2 /* ---------------------------------------------------------- */
   3
   4 html,
   5 body,
   6 div,
   7 span,
   8 applet,
   9 object,
  10 iframe,
  11 h1,
  12 h2,
  13 h3,
  14 h4,
  15 h5,
  16 h6,
  17 p,
  18 blockquote,
  19 pre,
  20 a,
  21 abbr,
  22 acronym,
  23 address,
  24 big,
  25 cite,
  26 code,
  27 del,
  28 dfn,
  29 em,
  30 img,
  31 ins,
  32 kbd,
  33 q,
  34 s,
  35 samp,
  36 small,
  37 strike,
  38 strong,
  39 sub,
  40 sup,
  41 tt,
  42 var,
  43 dl,
  44 dt,
  45 dd,
  46 ol,
  47 ul,
  48 li,
  49 fieldset,
  50 form,
  51 label,
  52 legend,
  53 table,
  54 caption,
  55 tbody,
  56 tfoot,
  57 thead,
  58 tr,
  59 th,
  60 td,
  61 article,
  62 aside,
  63 canvas,
  64 details,
  65 embed,
  66 figure,
  67 figcaption,
  68 footer,
  69 header,
  70 hgroup,
  71 menu,
  72 nav,
  73 output,
  74 ruby,
  75 section,
  76 summary,
  77 time,
  78 mark,
  79 audio,
  80 video {
  81     margin: 0;
  82     padding: 0;
  83     border: 0;
  84     font: inherit;
  85     font-size: 100%;
  86     vertical-align: baseline;
  87 }
  88 body {
  89     line-height: 1;
  90 }
  91 ol,
  92 ul {
  93     list-style: none;
  94 }
  95 blockquote,
  96 q {
  97     quotes: none;
  98 }
  99 blockquote:before,
 100 blockquote:after,
 101 q:before,
 102 q:after {
 103     content: "";
 104     content: none;
 105 }
 106 table {
 107     border-spacing: 0;
 108     border-collapse: collapse;
 109 }
 110 img {
 111     display: block;
 112     max-width: 100%;
 113     height: auto;
 114 }
 115 html {
 116     box-sizing: border-box;
 117     font-family: sans-serif;
 118
 119     -ms-text-size-adjust: 100%;
 120     -webkit-text-size-adjust: 100%;
 121 }
 122 *,
 123 *:before,
 124 *:after {
 125     box-sizing: inherit;
 126 }
 127 a {
 128     background-color: transparent;
 129 }
 130 a:active,
 131 a:hover {
 132     outline: 0;
 133 }
 134 b,
 135 strong {
 136     font-weight: bold;
 137 }
 138 i,
 139 em,
 140 dfn {
 141     font-style: italic;
 142 }
 143 h1 {
 144     margin: 0.67em 0;
 145     font-size: 2em;
 146 }
 147 small {
 148     font-size: 80%;
 149 }
 150 sub,
 151 sup {
 152     position: relative;
 153     font-size: 75%;
 154     line-height: 0;
 155     vertical-align: baseline;
 156 }
 157 sup {
 158     top: -0.5em;
 159 }
 160 sub {
 161     bottom: -0.25em;
 162 }
 163 img {
 164     border: 0;
 165 }
 166 svg:not(:root) {
 167     overflow: hidden;
 168 }
 169 mark {
 170     background-color: #fdffb6;
 171 }
 172 code,
 173 kbd,
 174 pre,
 175 samp {
 176     font-family: monospace, monospace;
 177     font-size: 1em;
 178 }
 179 button,
 180 input,
 181 optgroup,
 182 select,
 183 textarea {
 184     margin: 0; /* 3 */
 185     color: inherit; /* 1 */
 186     font: inherit; /* 2 */
 187 }
 188 button {
 189     overflow: visible;
 190     border: none;
 191 }
 192 button,
 193 select {
 194     text-transform: none;
 195 }
 196 button,
 197 html input[type="button"],
 198 /* 1 */
 199 input[type="reset"],
 200 input[type="submit"] {
 201     cursor: pointer; /* 3 */
 202
 203     -webkit-appearance: button; /* 2 */
 204 }
 205 button[disabled],
 206 html input[disabled] {
 207     cursor: default;
 208 }
 209 button::-moz-focus-inner,
 210 input::-moz-focus-inner {
 211     padding: 0;
 212     border: 0;
 213 }
 214 input {
 215     line-height: normal;
 216 }
 217 input:focus {
 218     outline: none;
 219 }
 220 input[type="checkbox"],
 221 input[type="radio"] {
 222     box-sizing: border-box; /* 1 */
 223     padding: 0; /* 2 */
 224 }
 225 input[type="number"]::-webkit-inner-spin-button,
 226 input[type="number"]::-webkit-outer-spin-button {
 227     height: auto;
 228 }
 229 input[type="search"] {
 230     box-sizing: content-box; /* 2 */
 231
 232     -webkit-appearance: textfield; /* 1 */
 233 }
 234 input[type="search"]::-webkit-search-cancel-button,
 235 input[type="search"]::-webkit-search-decoration {
 236     -webkit-appearance: none;
 237 }
 238 legend {
 239     padding: 0; /* 2 */
 240     border: 0; /* 1 */
 241 }
 242 textarea {
 243     overflow: auto;
 244 }
 245 table {
 246     border-spacing: 0;
 247     border-collapse: collapse;
 248 }
 249 td,
 250 th {
 251     padding: 0;
 252 }
 253
 254 /* ==========================================================================
 255    Base styles: opinionated defaults
 256    ========================================================================== */
 257
 258 html {
 259     font-size: 62.5%;
 260
 261     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 262 }
 263 body {
 264     color: #35373A;
 265     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 266     font-size: 1.6rem;
 267     line-height: 1.6em;
 268     font-weight: 400;
 269     font-style: normal;
 270     letter-spacing: 0;
 271     text-rendering: optimizeLegibility;
 272     background: #fff;
 273
 274     -webkit-font-smoothing: antialiased;
 275     -moz-osx-font-smoothing: grayscale;
 276     -moz-font-feature-settings: "liga" on;
 277 }
 278
 279 ::selection {
 280     text-shadow: none;
 281     background: #daf2fd;
 282 }
 283
 284 hr {
 285     position: relative;
 286     display: block;
 287     width: 100%;
 288     margin: 2.5em 0 3.5em;
 289     padding: 0;
 290     height: 1px;
 291     border: 0;
 292     border-top: 1px solid #f0f0f0;
 293 }
 294
 295 audio,
 296 canvas,
 297 iframe,
 298 img,
 299 svg,
 300 video {
 301     vertical-align: middle;
 302 }
 303
 304 fieldset {
 305     margin: 0;
 306     padding: 0;
 307     border: 0;
 308 }
 309
 310 textarea {
 311     resize: vertical;
 312 }
 313
 314 ::not(.gh-content) p,
 315 ::not(.gh-content) ul,
 316 ::not(.gh-content) ol,
 317 ::not(.gh-content) dl,
 318 ::not(.gh-content) blockquote {
 319     margin: 0 0 1.5em 0;
 320 }
 321
 322 ol,
 323 ul {
 324     padding-left: 1.3em;
 325     padding-right: 1.5em;
 326 }
 327
 328 ol ol,
 329 ul ul,
 330 ul ol,
 331 ol ul {
 332     margin: 0.5em 0 1em;
 333 }
 334
 335 ul {
 336     list-style: disc;
 337 }
 338
 339 ol {
 340     list-style: decimal;
 341 }
 342
 343 ul,
 344 ol {
 345     max-width: 100%;
 346 }
 347
 348 li {
 349     padding-left: 0.3em;
 350     line-height: 1.6em;
 351 }
 352
 353 li + li {
 354     margin-top: 0.5em;
 355 }
 356
 357 dt {
 358     float: left;
 359     margin: 0 20px 0 0;
 360     width: 120px;
 361     color: #daf2fd;
 362     font-weight: 500;
 363     text-align: right;
 364 }
 365
 366 dd {
 367     margin: 0 0 5px 0;
 368     text-align: left;
 369 }
 370
 371 blockquote {
 372     margin: 1.5em 0;
 373     padding: 0 1.6em 0 1.6em;
 374     border-left: #daf2fd;
 375 }
 376
 377 blockquote p {
 378     margin: 0.8em 0;
 379     font-size: 1.2em;
 380     font-weight: 300;
 381 }
 382
 383 blockquote small {
 384     display: inline-block;
 385     margin: 0.8em 0 0.8em 1.5em;
 386     font-size: 0.9em;
 387     opacity: 0.8;
 388 }
 389 /* Quotation marks */
 390 blockquote small:before {
 391     content: "\2014 \00A0";
 392 }
 393
 394 blockquote cite {
 395     font-weight: bold;
 396 }
 397 blockquote cite a {
 398     font-weight: normal;
 399 }
 400
 401 a {
 402     color: #15171A;
 403     text-decoration: none;
 404 }
 405
 406 h1,
 407 h2,
 408 h3,
 409 h4,
 410 h5,
 411 h6 {
 412     margin-top: 0;
 413     line-height: 1.15;
 414     font-weight: 600;
 415     text-rendering: optimizeLegibility;
 416     letter-spacing: -0.01em;
 417 }
 418
 419 h1 {
 420     margin: 0 0 0.5em 0;
 421     font-size: 4.8rem;
 422     font-weight: 700;
 423     letter-spacing: -0.015em;
 424 }
 425 @media (max-width: 600px) {
 426     h1 {
 427         font-size: 2.8rem;
 428     }
 429 }
 430
 431 h2 {
 432     margin: 1.5em 0 0.5em 0;
 433     font-size: 2.8rem;
 434     font-weight: 700;
 435 }
 436 @media (max-width: 600px) {
 437     h2 {
 438         font-size: 2.3rem;
 439     }
 440 }
 441
 442 h3 {
 443     margin: 1.5em 0 0.5em 0;
 444     font-size: 2.4rem;
 445     font-weight: 600;
 446 }
 447 @media (max-width: 600px) {
 448     h3 {
 449         font-size: 1.7rem;
 450     }
 451 }
 452
 453 h4 {
 454     margin: 1.5em 0 0.5em 0;
 455     font-size: 2.2rem;
 456 }
 457
 458 h5 {
 459     margin: 1.5em 0 0.5em 0;
 460     font-size: 2rem;
 461 }
 462
 463 h6 {
 464     margin: 1.5em 0 0.5em 0;
 465     font-size: 1.8rem;
 466 }