/* SUPER CSS VARIABLE POWERS! */

:root {
    /* Account for the fixed header. It works! I'm super cereal! */
    --top-size:7.25em;
    --minus-top-size:-7.25em;
    
    --menu-icon-size:2em;
    --menu-icon-active-color:rgb(178,255,248);
        
    --emoji-border:dashed 2px grey;
    --scroll-border:solid 1px grey;
    --emoji-font-size:1.7em;
    --emoji-box-size:1.5em;
    
    --light-border:solid 2px rgb(212,212,212);
    --dark-border:solid 2px rgb(128,128,128);
}

/* === Basics == */

* { box-sizing:border-box; border:0; margin:0; padding:0; font-size:1em; font-weight:normal; font-style:normal; }
html { width:100%; height:100%; }
body { width:100%; min-height:100%; background:rgb(255,255,255); color:rgb(0,0,0); font-family: 'Helvetica', 'Arial', sans-serif; display:flex; flex-direction:column; padding-top:var(--top-size); }

h1 { margin-bottom:1em; font-size:1.25em; font-weight:bold; margin-bottom:0.9em; text-align:center; }
h2 { margin-bottom:1em; font-weight:bold; font-size:1.2em; }
h3 { margin-bottom:1em; font-weight:bold; font-size:1.1em; }

p { margin-bottom:1em; }

ul { margin-left:1.5em; margin-bottom:1em; }

a { color:rgb(0,0,255); }
a:hover, a:active { color:rgb(128,128,255); }

.align-center { text-align:center; }

strong { font-weight:bold; }
em { font-style:italic; }

input[type=button], input[type=submit] { padding:0.2em; background:lightgrey; border-radius:0.25em; border-left:solid 2px lightgrey; border-top:solid 2px lightgrey; border-right:solid 2px darkgrey; border-bottom:solid 2px darkgrey; outline:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
input[type=text] { display:inline-block; border-left:solid 2px darkgrey; border-top:solid 2px darkgrey; border-right:solid 2px lightgrey; border-bottom:solid 2px lightgrey; }

/* === Add Emoji Font to Necessary Elements === */

input[type=button],
#menu .clipboard,
#search a,
#menu .emoji-string .mcdrop
{ font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; }

/* === Template === */

/* --- Header Section --- */

header { position:fixed; top:0; left:0; right:0; bottom:auto; background:rgba(255,255,255,0.95 ); border-bottom:solid 1px lightgrey; border-bottom-left-radius:0.5em; border-bottom-right-radius:0.5em; }

/* --- Header Section - Menu --- */

#menu .icon { display:inline-block; background-color:transparent; border:0; background-size:90% 90%; background-position:center; background-repeat:no-repeat; color:transparent; width:var(--menu-icon-size); height:var(--menu-icon-size); text-indent:-20em; overflow:hidden; }
#menu .icon:active { background-color:var(--menu-icon-active-color); }

#menu { display:flex; justify-content:center; align-items:center; }
#menu #menu-inner { flex:1; max-width:1024px; padding:0.5em; min-width:0; }

/* Row One (Clipboard, Categories Button, Search, Toggle) */

#menu .row-one { display:flex; margin-bottom:0.25em; align-items:center; }

#menu .clipboard-outer { display:flex; margin-right:0.5em; border:var(--emoji-border); }
#menu .clipboard { display:inline-block; font-size:var(--emoji-font-size); width:var(--emoji-box-size); height:var(--emoji-box-size); text-align:center; overflow:hidden; }

#menu .multi-copy { position:relative; z-index:2; background:rgb(255,255,255); top:8px; padding:0.25em; border-top:var(--dark-border); border-left:var(--dark-border); border-top-left-radius:0.25em; }
#menu .multi-copy input[type=button] { background-image:url(icon-copy.png?rr=1); }
#menu .multi-copy input[type=button].highlight { background-color:pink; }

#menu .multi-clear { margin-right:auto; position:relative; z-index:2; background:rgb(255,255,255); top:8px; border-top:var(--dark-border); padding:0.25em; border-right:var(--light-border); border-top-right-radius:0.25em; }
#menu .multi-clear input[type=button] { background-image:url(icon-clear.png?rr=1); }
#menu .multi-clear input[type=button].highlight { background-color:pink; }


#menu .jump { margin-left:0.5em; margin-right:0.5em; text-align:center; }
#menu .jump input[type=button] { width:100%; text-transform:uppercase; }

#menu .search-box { display:flex; align-items:center; margin-left:0.5em; margin-right:0.5em; }
#menu .search-box .tbx { flex:1; margin-right:0.5em; }
#menu .search-box .tbx input[type=text] { padding:0.25em; width:100%; }

#menu .search { margin-right:0.5em; text-align:center; }
#menu .search a { background-image:url(icon-search.png?rr=1); -webkit-tap-highlight-color:transparent; }
#menu .search a:active { background-color:var(--menu-icon-active-color); -webkit-tap-highlight-color:transparent; }

#menu .nav-toggle { background:trapsparent; }
#menu .nav-toggle input[type=button] { background-image:url("triple-bar.png?rr=1"); }

/* Row Two (String of Emojis) */

#menu .row-two { align-items:center; }

#menu .emoji-string-outer { display:block; text-align:center; border:var(--dark-border); border-right:var(--light-border); border-bottom:var(--light-border); border-radius:0.25em; height:2.9em; overflow:hidden; }
#menu .emoji-string { white-space:nowrap; }
#menu .emoji-string input[type=button], #menu .emoji-string .mcdrop { display:inline-block; position:relative; margin:0; padding:0; border:0; border-radius:0; font-size:var(--emoji-font-size); width:var(--emoji-box-size); height:var(--emoji-box-size); background:rgba(0,0,0,0); vertical-align:top; }
#menu .emoji-string .mcdrop { background:pink; }
#menu .emoji-string input[type=button]:hover, #menu .emoji-string .mcdrop:hover { background:transparent; }
#menu .emoji-string input[type=button].dragging { position:fixed; z-index:999; }

/* --- Header Section - Menu 2 (contains Title+Nav) --- */

#menu-2 { display:flex; justify-content:center; }
#menu-2 #menu-2-inner { flex:1; max-width:1024px; padding:0.5em; }

#menu-2 .title { display:flex; justify-content:center; align-items:center; }
#menu-2 .title .emoji { background:transparent; }
#menu-2 .title .txt { margin-left:0.5em; margin-right:0.5em; text-align:center; font-size:1.2em; font-weight:bold; }
#menu-2 .title .txt h1 { font-size:1em; }
#menu-2 .title .txt a { text-decoration:none; color:rgb(0,0,0); }

#menu-2 .nav { text-align:center; margin-top:0.5em; }
#menu-2 .nav * { margin:0; padding:0; }
#menu-2 .nav { background:transparent; }
#menu-2 .nav a, nav a span { background:transparent; }
#menu-2 .nav a:hover, nav a:hover span { background:transparent; }
#menu-2 .nav ul { background:transparent; }
#menu-2 .nav li { display:block; }
#menu-2 .nav li a { display:block; padding-top:0.5em; padding-bottom:0.5em; font-size:1.2em; }
#menu-2 .nav li.active a { display:block; padding-top:0.5em; padding-bottom:0.5em; font-size:1.2em; font-weight:bold; }
#menu-2 .nav li:last-child { margin-bottom:0; border-bottom:0; }

/* --- Header Section - Social Share Buttons --- */

#menu-2 .soc-share { display:flex; justify-content:center;   }
#menu-2 .soc-share .soc-share-inner { display:flex; align-items:center; max-width:1024px; padding:0.25em; }
#menu-2 .soc-share .left { margin-right:0.9em; }
#menu-2 .soc-share .left p { font-weight:bold; font-size:0.9em; }
#menu-2 .soc-share .right a { background:transparent; }
#menu-2 .soc-share .right a img { width:1.8em; height:1.8em; vertical-align:bottom; }

/* --- Main Section --- */

main { padding:0.5em; width:100%; max-width:1024px; margin:0 auto; flex:1; }

/* --- Footer Section - Soc Share --- */

footer { display:none; }

/* --- Toast (for saying things like "Emoji Copied to clipboard" --- */

#toast { position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:2em; }
#toast .block { display:inline-block; border:solid 2px rgb(0,128,0); background-color:rgb(128,255,128); color:rgb(0,128,0); padding:0.5em 1em; opacity:0; }


/* === Page: Home === */

/* --- Emojis --- */

#emojis .category { margin-bottom:1em; }
#emojis .anchor { display:block; height:var(--top-size); margin-top:var(--minus-top-size); visibility:hidden; }
#emojis h2 { font-size:1.1em; font-weight:bold; margin-bottom:0.45em; }
#emojis p { display:flex; flex-wrap:wrap; }
.emoji-btns input[type=button] { margin:0; padding:0; border:0; font-size:var(--emoji-font-size); width:var(--emoji-box-size); height:var(--emoji-box-size); background:rgba(0,0,0,0); }
.emoji-btns input[type=button]:active { background:rgb(204,255,204); border-radius:0.25em; }

/* --- Category Jump --- */

#category-jump { z-index:5; position:fixed; top:0; left:0; right:0; bottom:0; padding:1.5em; display:flex; justify-content:center; align-items:center; }
#category-jump .panel { border:solid 1px grey; background:rgba(255,255,255,1); width:100%; height:100%; padding:1em; }
#category-jump .panel .panel-inner { width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column; }

#category-jump .top { display:flex; align-items:flex-start; margin-bottom:1em; }
#category-jump .top .left { flex:1; margin-right:0.5em; }
#category-jump .top .right input[type=button] { width:2.3em; }

#category-jump .cats { flex:1; display:flex; overflow-y:scroll; }
#category-jump .cats ul { list-style-type:none; flex:0.5; font-size:1.1em; }
#category-jump .cats li { margin-bottom:0.5em; }

/* === Page: Search ===

/* --- Search Results --- */

#search-results-none { text-align:center; color:red; }

/* Root element */
#search-results { margin-top:1em; }

#search-results .info { text-align:center; }

/* Searching State */
#search-results .searching { text-align:center; }
#search-results .searching .text { font-size:1.2em; text-transform:uppercase; color:rgb(170,170,170); margin-bottom:0.5em; }
#search-results .searching .spinner { background:transparent; }
#search-results .searching .spinner img { width:2em; }

/* No Results */
#search-results .no-results { text-align:center; color:red; }

/* Result List - Item */
.emoji-list .result { display:flex; justify-content:flex-start; align-items:center; }
.emoji-list .result .name { flex:1; font-size:1em; padding-left:0.5em; }
.emoji-list .result .info { font-size:1.2em; padding-right:1em; }
.emoji-list .result input[type=button] { font-size:2.1em; }

/* === Page: Details === */

.no-detail { text-align:center; }
.detail { text-align:center; }
.detail .emoji-copy-me { font-size:4em; padding:0; margin:0; }
.detail .plaintxt { font-size:2em; }

/* === Page: Category === */

.mode-no-category { text-align:center; }

/* === Responsive Carp === */

@media (min-width: 601px)
{
   .emoji-btns input[type=button]:hover { background:rgb(204,255,255); border-radius:0.25em; }
   .emoji-btns input[type=button]:active { background:rgb(204,255,204); border-radius:0.25em; }
}

/* === Closing Styles */

.off { display:none !important; }
*:last-child { margin-bottom:0; }