@charset "UTF-8";
:root{ --bg:#f7f8fb; --panel:#ffffff; --text:#2f3237; --accent:#4b5563; --muted:#f5f6f8; --border:#e7e9ee; }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:#fcfcfc; color:var(--text) }
.container{ width:min(100%,1100px); margin:0 auto; padding:20px }
.site-header{ background:#ffffff; border-bottom:1px solid var(--border); top:0; z-index:10 }
.header-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    padding: 15px 20px;
}


@media (min-width: 768px) {
    .header-inner {
        display: grid;
        grid-template-columns: 1fr minmax(360px, 720px) 1fr;
        flex-direction: row;

    }
}
span.copy:before {
    content: "✂️Copy";
}
span.like:before {
    content: "👍";
}

button#load-more {
    font-size: 2.5rem;
}
.brand{ display: inline-block;white-space: nowrap;  color:var(--accent); text-decoration:none; font-weight:700; justify-self:start }
.search{ display:flex; gap:8px; justify-self:center }
.search.big input{ font-size:18px; padding:14px }
.search input[type=text], input[type=text]{ width: 300px;padding:12px 14px; border:1px solid var(--border); background:#fff; color:var(--text) }
button.copy-btn {
    display: flex
;
    cursor: pointer;
    user-select: none;
    padding: 0.125rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    flex-grow: 1;
    filter: grayscale(80%);
}
.emoji:hover{    background: white;}
button.like-btn {
    filter: grayscale(50%);
        margin-top: 0.125rem;
}
.hero{ padding:48px 0; text-align:center;height: 100%;min-height: 550px;}
.grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.emoji{font-size: 2.5rem;
    cursor: pointer;
    border-radius: 3.2px;
    padding: 0.5rem;
    border: 1px solid #bcbcbc;
    background: #f6f6f6;
    white-space: nowrap;
    min-width: 4rem;
    text-align: center;
    flex-grow: 1;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: flex
;
    align-items: center;
    justify-content: center;}
.tags{ max-width:100%; justify-content:center }
.actions{ width:100%; justify-content:center }
.desc{ font-size:14px; opacity:.8; text-align:center }
.actions{ display:flex; gap:8px; justify-content:center }
.tags{ display:flex; gap:4px; flex-wrap:wrap; border-top:1px dashed var(--border); padding-top:4px }
.tag{ background:#f6f7f9; padding:3px 5px; border-radius:999px; font-size:9px; color:#3a4047; text-decoration:none; border:1px solid var(--border) }

.site-footer{ background:var(--panel); border-top:1px solid var(--border); margin-top:100px }
.site-footer .container{ padding-top:14px; padding-bottom:14px; text-align:center; color:var(--accent); font-size:12px }

@media (max-width: 768px) {
    .search input[type=text], input[type=text] {
        width: 100%;
    }
}
ul { list-style: none; padding-left: 0; }
span.keywords {
    text-decoration: underline;
}

.tags a {
    color: black;
    text-decoration: none;
    margin: 0.25rem;
    background: #e8e7e7;
    box-shadow: var(--default-box-shadow);
    border-radius: var(--default-border-radius);
    padding: 0.25rem;
}

.card {
    display: flex
;
    flex-direction: column;
  
}

button.s {
    padding: 6px 8px;
    border: 1px solid var(--border);
    background: var(--muted);
    color: #3a4047;
    cursor: pointer;
    transition: background .15s 
ease, box-shadow .15s 
ease;
    font-size: 15px;
    filter: grayscale(50%);
}

button.s:hover{

        background: #e9eaeb;
}

.brand {
  display: inline-flex;     
  align-items: center;       
  gap: 0.2em;                
  text-decoration: none;     
}

.brand img {
  display: block;            
  height: 1.5em;           
}

.s{
width: 80px;

}

.suggested-tags p {
    text-align: center;
}