style.css

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; -webkit-font-smoothing: antialiased; }

html { font-size: 62.5%; font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { font-size: 1.6rem; background: #fff; color: #000; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

[hidden] { display: none; }

a { background: transparent; text-decoration: none; }

a:hover { cursor: pointer; }

a:active, a:hover { outline: 0; }

a img { border: none; }

img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

ol, ul { list-style: none; }

::-webkit-input-placeholder { color: #000; }

:-moz-placeholder { /* Firefox 18- */ color: #000; }

::-moz-placeholder { /* Firefox 19+ */ color: #000; }

:-ms-input-placeholder { color: #000; }

* { font-family: 'Lato', sans-serif; }

body { padding-top: 100px; }

section { max-width: 1000px; margin: 0 auto; padding: 0 50px; }

.hidden { opacity: 0; }

.search { position: relative; }

.search:after { position: absolute; top: 13px; right: 12px; display: block; width: 20px; height: 20px; content: ''; pointer-events: none; background: url(_/images/search.svg) center no-repeat; background-size: contain; }

.search--input { font-size: 16px; line-height: 1.5; width: 100%; padding: 8px 36px 8px 12px; border: 3px solid #000; }

.search--input:focus { outline: none; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }

.message { position: absolute; bottom: 0; margin-bottom: -24px; font-weight: 600; font-size: 13px; }

.message--confirm { color: #00806a; }

.message--click { color: #e88b24; }

.filtering .emojis--item:not(.visible) { display: none; }

.filtering .emojis--item { pointer-events: auto; }

.emojis { margin: 50px -16px 0; }

.emojis--item { font-size: 80px; line-height: 1; pointer-events: none; position: relative; display: inline-block; padding: 0 16px; margin-bottom: 16px; }

.copy--input { position: fixed; left: 0; top: 0; margin-left: -100%; margin-top: -100%; opacity: 0; }