API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 24th, 2019
149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.41 KB | None | 0 0
raw download clone embed print report
  1. body,
  2. h1,
  3. h2,
  4. h3,
  5. h4,
  6. img,
  7. li,
  8. ol,
  9. p,
  10. ul {
  11.     margin: 0;
  12.     padding: 0
  13. }
  14. h1,
  15. h2,
  16. h3,
  17. h4 {
  18.     font-weight: 400
  19. }
  20. :root {
  21.     --black: #111;
  22.     --body_color: #212121;
  23.     --body_gray: #555;
  24.     --light_gray: #999;
  25.     --link_gray: #ddd;
  26.     --pop_color: #004AC3;
  27.     --light_pop_color: #0060FA;
  28.     --light_blue: #659dfd;
  29.     --red: #d72b3f;
  30.     --teal: #55ACB2;
  31.     --space_xxl: 5rem;
  32.     --space_xl: 3rem;
  33.     --space_l: 2rem;
  34.     --space_m: 1.5rem;
  35.     --space_s: 1rem;
  36.     --space_xs: .8rem;
  37.     --space_xxs: .5rem;
  38.     --space_xxxs: .25rem
  39. }
  40. .page_footer,
  41. .page_header,
  42. .page_main {
  43.     width: 100%
  44. }
  45. .page_footer {
  46.     font-family: 'Noto Sans', sans-serif;
  47.     padding: 1.5rem 0 3rem 0
  48. }
  49. .grid_wrapper {
  50.     display: grid;
  51.     grid-template-columns: minmax(10px, 3fr) repeat(3, minmax(5px, 1fr))[col-main] minmax(30%, 700px) repeat(3, minmax(5px, 1fr)) minmax(10px, 3fr)
  52. }
  53. .grid_main {
  54.     display: flex;
  55.     flex-direction: column;
  56.     grid-column: col-main;
  57.     width: 100%
  58. }
  59. .grid_full {
  60.     grid-column: 1/span 9;
  61.     width: 100%
  62. }
  63. .grid_plus1,
  64. .grid_plus2,
  65. .grid_plus3 {
  66.     grid-column: 3/span 5;
  67.     width: 100%
  68. }
  69. @media screen and (min-width: 1000px) {
  70.     .grid_plus1 {
  71.         grid-column: 4/span 3
  72.     }
  73.     .grid_plus2 {
  74.         grid-column: 3/span 5
  75.     }
  76.     .grid_plus3 {
  77.         grid-column: 2/span 7
  78.     }
  79. }
  80. .grid_full>*,
  81. .grid_plus1>*,
  82. .grid_plus2>*,
  83. .grid_plus3>* {
  84.     margin: 0 auto
  85. }
  86. .m_bottom_xxl,
  87. div h1.m_bottom_xxl,
  88. div h2.m_bottom_xxl,
  89. div h3.m_bottom_xxl,
  90. div h4.m_bottom_xxl,
  91. div img.m_bottom_xxl,
  92. div p.m_bottom_xxl,
  93. div.m_bottom_xxl {
  94.     margin-bottom: var(--space_xxl)
  95. }
  96. .m_bottom_xl,
  97. div h1.m_bottom_xl,
  98. div h2.m_bottom_xl,
  99. div h3.m_bottom_xl,
  100. div h4.m_bottom_xl,
  101. div img.m_bottom_xl,
  102. div p.m_bottom_xl,
  103. div.m_bottom_xl {
  104.     margin-bottom: var(--space_xl)
  105. }
  106. .m_bottom_l,
  107. div h1.m_bottom_l,
  108. div h2.m_bottom_l,
  109. div h3.m_bottom_l,
  110. div h4.m_bottom_l,
  111. div img.m_bottom_l,
  112. div p.m_bottom_l,
  113. div.m_bottom_l {
  114.     margin-bottom: var(--space_l)
  115. }
  116. .m_bottom_m,
  117. div h1.m_bottom_m,
  118. div h2.m_bottom_m,
  119. div h3.m_bottom_m,
  120. div h4.m_bottom_m,
  121. div img.m_bottom_m,
  122. div p.m_bottom_m,
  123. div.m_bottom_m {
  124.     margin-bottom: var(--space_m)
  125. }
  126. .m_bottom_s,
  127. div h1.m_bottom_s,
  128. div h2.m_bottom_s,
  129. div h3.m_bottom_s,
  130. div h4.m_bottom_s,
  131. div img.m_bottom_s,
  132. div p.m_bottom_s,
  133. div.m_bottom_s {
  134.     margin-bottom: var(--space_s)
  135. }
  136. .m_bottom_xs,
  137. div h1.m_bottom_xs,
  138. div h2.m_bottom_xs,
  139. div h3.m_bottom_xs,
  140. div h4.m_bottom_xs,
  141. div img.m_bottom_xs,
  142. div p.m_bottom_xs,
  143. div.m_bottom_xs {
  144.     margin-bottom: var(--space_xs)
  145. }
  146. .m_bottom_xxs,
  147. div h1.m_bottom_xxs,
  148. div h2.m_bottom_xxs,
  149. div h3.m_bottom_xxs,
  150. div h4.m_bottom_xxs,
  151. div img.m_bottom_xxs,
  152. div p.m_bottom_xxs,
  153. div.m_bottom_xxs {
  154.     margin-bottom: var(--space_xxs)
  155. }
  156. .m_bottom_0,
  157. div h1.m_bottom_0,
  158. div h2.m_bottom_0,
  159. div h3.m_bottom_0,
  160. div h4.m_bottom_0,
  161. div img.m_bottom_0,
  162. div p.m_bottom_0,
  163. div.m_bottom_0 {
  164.     margin-bottom: 0
  165. }
  166. .m_right_l {
  167.     margin-right: var(--space_l)
  168. }
  169. .m_right_m {
  170.     margin-right: var(--space_m)
  171. }
  172. .m_right_s {
  173.     margin-right: var(--space_s)
  174. }
  175. .m_right_xs {
  176.     margin-right: var(--space_xs)
  177. }
  178. .m_left_s {
  179.     margin-left: var(--space_s)
  180. }
  181. .m_left_xs {
  182.     margin-left: var(--space_xs)
  183. }
  184. .m_top_xl,
  185. div img.m_top_xl,
  186. div p.m_top_xl {
  187.     margin-top: var(--space_xl)
  188. }
  189. .m_top_l,
  190. div img.m_top_l,
  191. div p.m_top_l {
  192.     margin-top: var(--space_l)
  193. }
  194. .m_top_m,
  195. div img.m_top_m,
  196. div p.m_top_m {
  197.     margin-top: var(--space_m)
  198. }
  199. .m_top_s,
  200. div img.m_top_s,
  201. div p.m_top_s {
  202.     margin-top: var(--space_s)
  203. }
  204. .m_top_xs,
  205. div img.m_top_xs,
  206. div p.m_top_xs {
  207.     margin-top: var(--space_xs)
  208. }
  209. html {
  210.     font-family: georgia, serif;
  211.     font-size: 18px;
  212.     box-sizing: border-box
  213. }
  214. @media screen and (min-width: 700px) {
  215.     html {
  216.         font-size: 22px
  217.     }
  218. }
  219. body {
  220.     color: var(--body_color);
  221.     line-height: 1.525
  222. }
  223. .header_l,
  224. .header_m,
  225. .header_s,
  226. .header_xl {
  227.     font-family: 'Noto Sans', sans-serif;
  228.     font-weight: 700
  229. }
  230. .header_xl {
  231.     font-size: 2rem;
  232.     line-height: 1.2
  233. }
  234. @media screen and (min-width: 700px) {
  235.     .header_xl {
  236.         font-size: 2.2rem
  237.     }
  238. }
  239. .header_l {
  240.     font-size: 1.75rem
  241. }
  242. .header_m {
  243.     font-size: 1.25rem
  244. }
  245. .header_s {
  246.     font-size: 1rem
  247. }
  248. .header_l,
  249. .header_m,
  250. .header_s {
  251.     line-height: 1.3
  252. }
  253. .text_xl {
  254.     font-size: 1.75rem
  255. }
  256. .text_l {
  257.     font-size: 1.25rem
  258. }
  259. .text_s {
  260.     font-size: .875rem
  261. }
  262. .text_xs {
  263.     font-size: .75rem
  264. }
  265. .text_sans {
  266.     font-family: 'Noto Sans', sans-serif
  267. }
  268. .text_supporting {
  269.     color: var(--body_gray)
  270. }
  271. .text_blue {
  272.     color: var(--pop_color)
  273. }
  274. .italic {
  275.     font-style: oblique
  276. }
  277. .center {
  278.     text-align: center
  279. }
  280. a {
  281.     background: 0 0;
  282.     box-shadow: inset 0 -3px var(--link_gray);
  283.     color: var(--body_color);
  284.     padding-bottom: 1px;
  285.     text-decoration: none
  286. }
  287. a:hover {
  288.     box-shadow: inset 0 -3px var(--pop_color);
  289.     color: var(--black)
  290. }
  291. a:visited {
  292.     color: var(--body_color)
  293. }
  294. a:active,
  295. a:hover,
  296. a:link {
  297.     transition-property: all;
  298.     transition-duration: .2s;
  299.     -webkit-transition-timing-function: cubic-bezier(.165, .63, .14, .82);
  300.     -moz-transition-timing-function: cubic-bezier(.165, .63, .14, .82);
  301.     -ms-transition-timing-function: cubic-bezier(.165, .63, .14, .82);
  302.     -o-transition-timing-function: cubic-bezier(.165, .63, .14, .82);
  303.     transition-timing-function: cubic-bezier(.165, .63, .14, .82)
  304. }
  305. a.link_vibrant,
  306. a.link_vibrant:visited {
  307.     color: var(--pop_color);
  308.     border-bottom: 2px solid var(--pop_color);
  309.     box-shadow: none
  310. }
  311. a.link_vibrant:hover {
  312.     color: var(--light_gray);
  313.     border-bottom: 2px solid var(--light_gray);
  314.     box-shadow: none
  315. }
  316. a.link_none {
  317.     color: var(--body_color);
  318.     display: inline;
  319.     border: none;
  320.     box-shadow: none;
  321.     text-decoration: none
  322. }
  323. a.link_none:hover {
  324.     color: var(--body_color)
  325. }
  326. .text_caption {
  327.     color: var(--body_gray);
  328.     font-size: .875rem;
  329.     font-style: oblique;
  330.     text-align: center
  331. }
  332. .text_quote_long,
  333. .text_quote_short {
  334.     border-top: 3px solid var(--teal);
  335.     border-bottom: 3px solid var(--teal);
  336.     font-family: 'Noto Sans', sans-serif;
  337.     font-size: .9rem;
  338.     font-style: italic;
  339.     margin: var(--space_m) auto var(--space_s);
  340.     padding: var(--space_s) var(--space_m) var(--space_m)
  341. }
  342. @media screen and (min-width: 700px) {
  343.     .text_quote_long,
  344.     .text_quote_short {
  345.         max-width: 70%
  346.     }
  347.     .text_quote_long {
  348.         max-width: 80%
  349.     }
  350. }
  351. .text_quote_long a {
  352.     margin-left: .25rem
  353. }
  354. .text_quote_long p {
  355.     margin-bottom: var(--m_bottom_m)
  356. }
  357. .text_quote_long p:last-child {
  358.     margin-bottom: 0
  359. }
  360. .special_highlight {
  361.     background: #f5f5f5;
  362.     border-left: 3px solid var(--body_gray);
  363.     font-family: 'Noto Sans', sans-serif;
  364.     font-size: 1rem;
  365.     margin: var(--space_m) 0;
  366.     padding: var(--space_xs) var(--space_s) 1.1rem
  367. }
  368. div.special_highlight p {
  369.     margin-bottom: 0
  370. }
  371. .meta_list {
  372.     color: var(--body_gray);
  373.     font-family: 'Noto Sans', sans-serif;
  374.     font-size: .875rem;
  375.     margin-bottom: .25rem
  376. }
  377. .meta_list:last-child {
  378.     margin-bottom: 0
  379. }
  380. .meta_text {
  381.     font-family: 'Noto Sans', sans-serif;
  382.     font-size: .8rem;
  383.     font-style: italic;
  384.     font-weight: 700;
  385.     letter-spacing: .02em;
  386.     margin-right: .25rem;
  387.     text-transform: uppercase
  388. }
  389. ul.plain_style {
  390.     list-style: none
  391. }
  392. .list_inline li {
  393.     display: inline
  394. }
  395. .list_spacing li {
  396.     line-height: 1.4;
  397.     margin-bottom: var(--space_xxxs);
  398.     padding-left: .3rem
  399. }
  400. .link_list {
  401.     line-height: 1.7
  402. }
  403. .tight_list p {
  404.     margin-bottom: .25rem
  405. }
  406. .tight_list p:last-child {
  407.     margin-bottom: 1rem
  408. }
  409. div.blog_format ul.plain_list {
  410.     margin-left: 0
  411. }
  412. code,
  413. pre {
  414.     font-family: Inconsolata, monospace;
  415.     font-size: .9rem;
  416.     line-height: 1.3em;
  417.     background: #f0f3f3;
  418.     padding-top: .5rem;
  419.     padding-left: 1rem;
  420.     padding-bottom: .5rem;
  421.     overflow: auto;
  422.     width: auto
  423. }
  424. code {
  425.     background: #f5f5f5;
  426.     border: 1px solid #ccc;
  427.     border-radius: 3px;
  428.     padding: .1rem .15rem;
  429.     font-size: .85rem;
  430.     color: var(--red)
  431. }
  432. .sup_link {
  433.     margin-left: .25rem
  434. }
  435. sup {
  436.     color: var(--pop_color);
  437.     font-size: .7rem;
  438.     font-weight: 700
  439. }
  440. .img_double,
  441. .img_triple,
  442. img {
  443.     font-size: 0;
  444.     line-height: 0
  445. }
  446. .img_double,
  447. .img_triple {
  448.     display: flex;
  449.     flex-flow: row wrap;
  450.     justify-content: space-between;
  451.     min-width: 100%
  452. }
  453. .img_double img:first-child {
  454.     margin-bottom: .5rem
  455. }
  456. .img_triple img {
  457.     margin-bottom: .5rem
  458. }
  459. .img_triple img:last-child {
  460.     margin-bottom: 0
  461. }
  462. @media screen and (min-width: 600px) {
  463.     .img_double img:first-child {
  464.         margin-bottom: 0
  465.     }
  466.     .img_triple img {
  467.         margin-bottom: 0
  468.     }
  469. }
  470. .divider_gray,
  471. .divider_light,
  472. .divider_line,
  473. .divider_pop {
  474.     width: 192px;
  475.     content: ' ';
  476.     justify-self: center
  477. }
  478. .divider_gray,
  479. .divider_light,
  480. .divider_pop {
  481.     background-repeat: repeat;
  482.     height: 12px
  483. }
  484. .divider_gray {
  485.     background-image: url("data:image/svg+xml,%3Csvg height='12' width='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h30v30h-30z' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' fill='%23666' r='3'/%3E%3C/svg%3E")
  486. }
  487. .divider_pop {
  488.     background-image: url("data:image/svg+xml,%3Csvg height='12' width='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h30v30h-30z' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' fill='%23004AC3' r='3'/%3E%3C/svg%3E")
  489. }
  490. .divider_line {
  491.     background: var(--light_gray);
  492.     height: .15rem;
  493.     margin: 0 auto var(--space_l);
  494.     width: 240px
  495. }
  496. .divider_inline {
  497.     margin: var(--space_l) auto var(--space_xl)
  498. }
  499. .nav_flex {
  500.     display: flex;
  501.     flex-flow: column;
  502.     align-items: center;
  503.     width: 90vw;
  504.     max-width: 860px;
  505.     margin: var(--space_xxs) auto var(--space_xl)
  506. }
  507. @media screen and (min-width: 760px) {
  508.     .nav_flex {
  509.         display: flex;
  510.         flex-flow: row wrap;
  511.         justify-content: space-between
  512.     }
  513. }
  514. .header_nav a {
  515.     box-shadow: none;
  516.     color: var(--pop_color);
  517.     font-family: 'Noto Sans', sans-serif;
  518.     font-size: .9rem;
  519.     font-weight: 700;
  520.     padding-bottom: 2px
  521. }
  522. .header_nav a:hover {
  523.     color: var(--light_pop_color);
  524.     box-shadow: inset 0 -3px var(--black)
  525. }
  526. .header_name a {
  527.     border: none;
  528.     box-shadow: 0
  529. }
  530. ul.social_list {
  531.     padding-top: 1rem;
  532.     margin-bottom: var(--space_m)
  533. }
  534. .social_link {
  535.     display: inline-block;
  536.     font-family: 'Noto Sans', sans-serif;
  537.     font-size: .8rem;
  538.     font-weight: 700;
  539.     letter-spacing: .01em;
  540.     text-transform: uppercase;
  541.     margin-bottom: var(--space_s);
  542.     margin-right: var(--space_s)
  543. }
  544. .social_link:last {
  545.     margin-right: 0
  546. }
  547. .social_link a {
  548.     color: var(--pop_color);
  549.     box-shadow: none;
  550.     padding-bottom: 3px
  551. }
  552. .social_link a:hover {
  553.     color: var(--light_pop_color);
  554.     box-shadow: inset 0 -3px var(--black)
  555. }
  556. .social_link svg {
  557.     margin-right: .25rem
  558. }
  559. @media screen and (min-width: 800px) {
  560.     .social_link {
  561.         margin-bottom: 0
  562.     }
  563. }
  564. .game_flex {
  565.     display: flex;
  566.     flex-flow: row wrap;
  567.     justify-content: space-between
  568. }
  569. .game_item {
  570.     font-family: 'Noto Sans', sans-serif;
  571.     width: calc(50vw - 30px)
  572. }
  573. .game_item_spacing:nth-child(odd) {
  574.     margin-right: var(--space_s)
  575. }
  576. @media screen and (min-width: 600px) {
  577.     .game_item {
  578.         width: calc(32vw - 30px)
  579.     }
  580. }
  581. @media screen and (min-width: 750px) {
  582.     .game_item {
  583.         width: calc(((100vw - 700px) * .15) + 215px)
  584.     }
  585.     .game_item_spacing {
  586.         margin-right: var(--space_s)
  587.     }
  588.     .game_item_spacing:nth-child(3n) {
  589.         margin-right: 0
  590.     }
  591. }
  592. @media screen and (min-width: 1000px) {
  593.     .game_item {
  594.         width: calc(((100vw - 700px) * .15) + 225px)
  595.     }
  596. }
  597. @media screen and (min-width: 2500px) {
  598.     .game_item {
  599.         width: calc(((100vw - 700px) * .15) + 260px)
  600.     }
  601. }
  602. a.game_item_link {
  603.     border: none;
  604.     box-shadow: none
  605. }
  606. a.game_item_link:hover {
  607.     color: var(--pop_color)
  608. }
  609. .wrap_video_haptic {
  610.     margin: var(--space_s) auto var(--space_l);
  611.     overflow: hidden;
  612.     padding-top: 38%;
  613.     position: relative;
  614.     width: 100%
  615. }
  616. .blog_format p {
  617.     margin-bottom: var(--space_s)
  618. }
  619. .blog_format h2 {
  620.     margin-bottom: var(--space_m)
  621. }
  622. .blog_format h3 {
  623.     margin-bottom: var(--space_s)
  624. }
  625. .blog_format h4 {
  626.     margin-bottom: var(--space_xs)
  627. }
  628. .blog_format p+h2 {
  629.     margin-top: var(--space_m)
  630. }
  631. .blog_format p+h3,
  632. .blog_format p+h4 {
  633.     margin-top: var(--space_s)
  634. }
  635. .blog_format ol,
  636. .blog_format ul {
  637.     margin-left: var(--space_m)
  638. }
  639. .m_none,
  640. div p.m_none {
  641.     margin: 0
  642. }
  643. .embed_center {
  644.     margin: 0 auto
  645. }
  646. .embed_img_s {
  647.     margin: var(--space_xxs) auto var(--space_m);
  648.     max-width: 100%
  649. }
  650. .embed_img_l {
  651.     margin: var(--space_xxs) 0 var(--space_m);
  652.     width: 100%
  653. }
  654. .wrap_gif,
  655. .wrap_unity,
  656. .wrap_video {
  657.     margin: var(--space_s) auto var(--space_l);
  658.     overflow: hidden;
  659.     position: relative;
  660.     width: 100%
  661. }
  662. .wrap_video {
  663.     padding-top: 56.25%
  664. }
  665. .wrap_gif {
  666.     padding-top: 63%
  667. }
  668. .embed_unity {
  669.     padding-top: 65%
  670. }
  671. .embed_gif,
  672. .embed_unity,
  673. .embed_video {
  674.     border: 0;
  675.     height: 100%;
  676.     left: 0;
  677.     position: absolute;
  678.     top: 0;
  679.     width: 100%
  680. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!