/*
    FREEMOJI.org - style.css
    https://www.freemoji.org
    (C) 2023 Arne Drews
    arne.drews@freemoji.org
*/
html, body
{
  height:100%; min-height:100%;
  margin:0; padding:0;
  background-image:url('./images/logos/background-logo.png');
  background-color:#eee;
  background-repeat:repeat-x repeat-y;
  background-size:10em;
  background-attachment:fixed;
  background-blend-mode:;
  font-family:Cairo;
}

body
{
  display:flex;
  justify-content: space-between;
  flex-direction:column;
}

* { box-sizing:border-box; }


/* HEADER */
.header
{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:.75em 2em;
  background:#4c6fbd;
}

.header > .logo > img { height: 5em; }

.header > .notice
{
  font-size: 1em;
  text-align: center;
  line-height: 1em;
  color:#90b6ef;
}

.header > .notice > span
{
  color:#ccc;
}

.header > .title
{
  text-align: right;
  font-size:3em;
  font-weight:bold;
  line-height: .5em;
  color:#fff;
  cursor: pointer;
}

.header > .title > small
{
  font-size:.5em;
  font-weight:normal;
}

.header > .title span
{
  display:block;
  font-size:.4em;
  font-weight: normal;
  color:#ccc;
}



/* TOP MENU */
div.top-menu
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0; padding:.25em 1em;
  background:#5c7fcd;
}

div.top-menu a
{
  margin:0 1em;
  text-decoration:none;
  color:#ccc;
}

div.top-menu a:hover
{
  color:#fff;
}




/* FOOTER */
.footer
{
  display:flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding:2em 2em;
  background:#999;
}

.footer .column
{
  line-height: 1.25em;
  color:#eee;
}

.footer nav
{
  display:flex;
  flex-direction: column;
}

.footer nav > a
{
  display:inline-block;
  margin:0.25em 0;
}

.footer a
{
  text-decoration: none;
  color:#eee;
}

.footer a:hover { color:#fff; }


/* SUPPORT */
.support
{
  padding:1em 0;
  background:#4c6fbd;
  text-align:center;
  color:#ccc;
}

.support h4
{
  margin:0 0 1em 0;
}

.support .paypal
{
  display:flex;
  justify-content: center;
}

.support .paypal > div
{
  display:inline-block;
  margin:0 .25em;
}


.paypal .button__paypal
{
  background:#5c7fcd;
  border-radius:.5em;
}

.button__paypal a
{
  display:inline-block;
  padding:5px 15px 0 15px;
  border:2px solid #3c5fad;
  border-radius: 8px;
  /*background:#fff;*/
  text-decoration:none;
}

.button__paypal a > img { height:25px; }
.paypal a > span { display:block; margin-top:-.75em; font-size:12px; text-align:right; color:#fff; }
.paypal a > span > b { color:#ccc; }
.paypal a:hover b { color:#6c6; }




/* EMOJI Container */

.emoji-container { margin:0 2em 2em 2em; flex:1; }

div.row > h4
{
  display:flex;
  justify-content: space-between;
  margin:25px 0 0 0; padding: 5px 15px;
  border-radius: 8px 8px 0 0;
  background:#4c6fbd; /*#ee6;*/
  font-size: 20px;
  font-weight: normal;
  color:#fff;
}

div.row > h4 small
{
  display:block;
  margin:0 0 1em 0; padding:0;
  font-size:.75em;
  font-weight: normal;
  line-height:.5em;
  color:#ccc;
}

p.p_emojis
{
  font-family: Segoe UI Emoji;
  margin-top:0; padding:10px;
  border-radius:0 0 8px 8px;
  background:#bccaea;/*#9cf;*/
  font-size: 32px;
  cursor:pointer;
}

p.p_emojis > span
{
  display:inline-block;
  padding:5px;
  border-radius:5px;
  background:transparent;
}


p.p_emojis > span > legend
{
  display:none;
  position:absolute;
  padding:.25em .75em;
  border:1px solid #999;
  border-radius:0 .5em 0 .5em;
  background:#eee;
  opacity:.9;
  font-size:.5em;
}

p.p_emojis > span:hover > legend { display:block; }

p.p_emojis > span > legend > small
{
  font-size:.75em;
}


p.p_emojis > span:hover { background:#69c; }

p.p_emojis > span.copy > small
{
  display: inline-block;
  position: absolute;
  margin:1em 0 0 0; padding: 0 0.5em;
  border-radius: 0.5em;
  background: #6f6;
  font-size: 0.5em;
  animation: copy-bubble .75s;
}


/* COLOR Selection */
div.skincolor
{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

div.skincolor > div
{
  width:1em; height:1em;
  margin:0 .15em; padding:1em;
  border: 3px solid #ccc;
  border-radius:50%;
  background:#ffc83d;
  cursor: pointer;
}

div.skincolor > div:hover { border-color:#fff; }

div.skincolor > div[data-color="1"] { background:#f7d7c4; }
div.skincolor > div[data-color="2"] { background:#d8b094; }
div.skincolor > div[data-color="3"] { background:#bb9167; }
div.skincolor > div[data-color="4"] { background:#8e562e; }

div.skincolor > div.active { border-color:#0c0; }

div[class^=color] { display:none; }
div[class^=color].active { display:block; }


/* LANGUAGE FLAGS */
img.language-text
{
  height:1em;
  margin:0.5em .5em 0 0;
}


/* COOKIE-NOTICE */
div.cookie-notice
{
  margin:0.5em 2em 0 2em; padding: 1em;
  border:0.1em solid #ccc;
  border-radius:1em;
  background:#e0e0e0;
  font-weight: normal;
  color:#999;
}


div.cookie-notice > h4
{
  margin:0; padding:0;
  font-weight: normal;
  color:#666;
}

div.cookie-notice > p
{
  margin:0; padding:0;
  font-size:.8em;
  line-height: 1.25em;
}



/* IMPRINT */
div.imprint, div.about
{
  margin:0; padding:1em;
  border-radius:0 0 8px 8px;
  background:#9cf;
  font-size:1em;
  line-height: 1.25em;
}

/*
div.imprint h4
{
  margin:0; padding:0;
  font-size:1.5em;
}

div.imprint p
{
  margin:0.5em 0; padding:0;
  font-size:.8em;
  line-height: 1.25em;
}
 */


/* ABOUT
div.about
{
  margin:0; padding:1em;
  border-radius:0 0 8px 8px;
  background:#9cf;
  font-size:1em;
  line-height: 1.25em;
}
*/

div.imprint small, div.about small
{
  line-height:.5em;
}

div.imprint h4, div.about h4
{
  margin:0; padding:0;
}

div.imprint h4, div.about h4
{
  margin:2em 0 0 0; padding:0;
}

div.imprint h4 + p
{
  margin:0;
}

div.imprint h4:nth-child(1), div.about h4:nth-child(1)
{
  margin:0; padding:0;
}

div.imprint p, div.about p
{
  margin:.5em 0; padding:0;
}


/* KEYFRAMES */
@keyframes copy-bubble
{
  0%
  {
    margin-top:1em;
    opacity:1;
  }
  100%
  {
    margin-top:-1.5em;
    opacity:0.1;
    display:none;
  }
}





/* MEDIA RULES */
@media only screen and (max-width:1300px)
{
  .header .notice
  {
    display:none;
  }

  .emoji-container
  {
    margin:1em;
  }
}

@media only screen and (max-width:500px)
{
  .header
  {
    padding:2em 1.5em 1em 1.5em;
  }
  
  .header .logo
  {
    display:none;
  }
}