<div class="page">
  <div class="top-bar"> </div>
  
  <div id="splash">
    
    <div class="logo"><i class="fa fa-envira" aria-hidden="true"></i>Splash</div>
  </div>
  
  <div class="searchform">
    <div class="options">
      <i class="fa fa-cube" aria-hidden="true"></i>
      <i class="fa fa-cubes" aria-hidden="true"></i>
      <i class="fa fa-cube" aria-hidden="true"></i>
    </div>
    <form>
    <span class="box"><input onkeyup="filterlist(this);" type="search" placeholder="Search ..."></span>
    </form>
  </div>

  <div class="output"> <div class="content">
    <p>Ailurophile A cat-lover.</p>
    <p>Assemblage  A gathering.</p>
    <p>Becoming  Attractive.</p>
    <p>Beleaguer To exhaust with attacks.</p>
    <p>Brood To think alone.</p>
    <p>Bucolic In a lovely rural setting.</p>
    <p>Bungalow  A small, cozy cottage.</p>
    <p>Chatoyant Like a cat’s eye.</p>
    <p>Comely  Attractive.</p>
    <p>Conflate  To blend together.</p>
    <p>Cynosure  A focal point of admiration.</p>
    <p>Dalliance A brief love affair.</p>
    <p>Demesne Dominion, territory.</p>
    <p>Demure  Shy and reserved.</p>
    <p>Denouement  The resolution of a mystery.</p>
    <p>Desuetude Disuse.</p>
    <p>Desultory Slow, sluggish.</p>
    <p>Diaphanous  Filmy.</p>
    <p>Dissemble Deceive.</p>
    <p>Dulcet  Sweet, sugary.</p>
    <p>Ebullience  Bubbling enthusiasm.</p>
    <p>Effervescent  Bubbly.</p>
    <p>Efflorescence Flowering, blooming.</p>
    <p>Elision Dropping a sound or syllable in a word.</p>
    <p>Elixir  A good potion.</p>
    <p>Eloquence Beauty and persuasion in speech.</p>
    <p>Embrocation Rubbing on a lotion.</p>
    <p>Emollient A softener.</p>
    <p>Ephemeral Short-lived.</p>
    <p>Epiphany  A sudden revelation.</p>
    <p>Erstwhile At one time, for a time.</p>
    <p>Ethereal  Gaseous, invisible but detectable.</p>
    <p>Evanescent  Vanishing quickly, lasting a very short time.</p>
    <p>Evocative Suggestive.</p>
    <p>Fetching  Pretty.</p>
    <p>Felicity  Pleasantness.</p>
    <p>Forbearance Withholding response to provocation.</p>
  </div></div>
</div>
<div class="heart">❤</div>
<div class="signature">nullqube</div>

/* in the name of god */

html, body {
  padding: 0;
  margin: 0;
  height:100%;
  font-family: 'Dosis', sans-serif;
  background: #333;
  background:url('http://www.pixempire.com/images/preview/dark-background-with-pattern.jpg');
}

html, body, div, span, i, ul, li, a, p {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

div.page {
  position: relative;
  width:100%;
  height:100%;
  top:11%;
  margin:0 auto;
  min-width:340px;
  max-width:340px;
  min-height:540px;
  max-height:540px;
  border: 1px solid #333;
  border-radius: 0 0 0 11px;
  overflow:hidden;
  box-shadow:0 11px 23px 7px #000;
}
div.page > .top-bar {
/*   position:absolute; */
/*   top:0;
  left:0;
  right:0;
  width:100%; */
  height:3px;
  margin:0 auto;
  background:orange;
}

div#splash {
  position: relative;
  width:100%;
  height:77%;
  text-align:center;
  vertical-align:middle;
  font-size:3em;
  color:#fff;
  background:#111;
}
div#splash > .logo {
  position: absolute;
  bottom:11px;
  width:100%;
  height:1.1em;
  line-height:1em;
  font-size:1.1em;
  color:orange;
}
/* div#splash > .logo :first-letter {
  font-size:larger;
  font-weight:bolder;
  text-transform:capitalize;
  font-style:none;
  text-decoration:underline;
} */
.searchform {
  text-align:center;
  position:relative;
  width:100%;
  height:100%;
  background:#1a1a1a;
  z-index:111;
}

.searchform > form > .box > input[type=search] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  
/*   position:absolute; */
/*   bottom:37%; */
  width:50%;
/*   left:25%; */
  font-size:1em;
  padding: 5px 3px;
  margin:0;
  border:none;
  outline:none;
  color:#fff;
  background:#000;
}
.searchform .box{
  position:relative;
  top:3px;
  padding:0;
  margin:0;
}
.searchform > form > .box.fight:before,
.searchform > form > .box.fight:after {
  content:' ';
  display:block;
  position:absolute;
  bottom:-3px;
  width:0;
  height:3px;
  background:orange;
  animation: activeBorders 1s 0.3s;
}
.searchform > form > .box.fight:before {
  left:0;
}
.searchform > form > .box.fight:after {
  right:0;
}
@keyframes activeBorders {
  from{
    width:0;
    left:0;
  }
  50% {
    width:50%;
    left:50%;
  }
  77% {
    width:1%;
  }
}
.searchform > .options {
  height:3px;
  color:#777;
  font-size:0;
  background:#1a1a1a;
  overflow:hidden;
}
.searchform > .options > i {
  display:hidden;
  margin:0 3px;
  text-shadow:0 0 3px #000;
}

.output {
  display:none;
  position:absolute;
  width:100%;
  top:0px;
  bottom:0;
/*   overflow:scroll; */
  overflow-x: hidden;
/*   padding:23px; */
  font-size:1.1em;
  line-height:2.3em;
  color:#eee;
  background:rgba(77,77,77,0.3);
}

.output>.content {
  padding-top:77px;
/*   padding-left:23px; */
}

.signature {
  position: fixed;
  bottom:23px;
  right:23px;
  color:orange;
  cursor: url('https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_3_high_five-256.png'), pointer;
  transition:all 0.3s ease-in-out;
}

.signature:before, .signature:after {
  display:block;
  position:absolute;
  top:0;
  transition:all 0.3s;
}
.signature:before{
  content:'[';
  left:-7px;
}
.signature:after {
  content:']';
  right:-7px;
}

.signature:hover,
.signature:hover::before,
.signature:hover::after {
  font-size:larger;
  font-weight:bold;
}
.signature:hover::before {
  left:-11px;
}
.signature:hover::after {
  right:-11px;
}

.heart{
  display:none;
}
.heart.liked {
  display:block;
  position:fixed;
  top:50%;
  left:50%;
  width:33px;
  height:33px;
  padding:0;
  text-align:center;
  font-size:33px;
  line-height:33px;
  color:red;
  opacity:0;
  animation:explode 0.7s ease-in-out;
}
@keyframes explode {
  from {
    opacity:0;
    transform:scale(0.01);
  }
  47% {
    opacity:0.07;
    transform:scale(23.0);
  }
}

// in the name of god

$(function() {
  $("div.searchform>form>.box>input").on("focus",function(){
    $(this).animate({width:"77%"});
    $("div.searchform>form>.box").addClass("fight")
      .delay(1111).queue(function() {
          $(this).removeClass("fight").dequeue();
    });
    
    $(".top-bar").animate({width:"0"});
    $(".output").fadeIn(777);
    $(this).animate({bottom:"3px"}
      ,777,"easeOutCubic");
    $("#splash").animate({height:"0px"}
      ,555,"easeOutCubic");
    $("#splash>.logo").animate(
         {height:"11px","font-size":"11px",width:"%"}
      ,555,"easeOutCubic");
    
    $(".searchform").animate({height:"67px"}
      ,555,"easeOutCubic").delay(333).animate({top:"23px"});
    $(".searchform>.options").animate({height:"23px",fontSize:"1em"}
      ,555,"easeOutCubic");
    $(".searchform>.options>i").delay(333).fadeIn().animate(
         {margin:"0 11px"}
      ,555,"easeOutCubic");
  });
  
  // Just for demo
  $("div.searchform>form>.box>input").on("blur",function(){
    $(this).animate({width:"50%"});
    $(".top-bar").animate({width:"100%"});
    $(".output").fadeOut(111);
    $("#splash").animate(
         {height:"77%"}
      ,555,"easeOutCubic");
    $("#splash>.logo").animate(
         {height:"1em",fontSize:"1em"}
      ,555,"easeOutCubic");
    $(".searchform>.options").animate(
         {height:"3px"}
      ,555,"easeOutCubic");
    $(".searchform>.options>i").animate(
         {margin:"0 3px"}
      ,555,"easeOutCubic").hide();
    $(this).animate(
         {bottom:"37%"}
      ,777,"easeOutCubic");
    $(".searchform").animate({height:"100%",top:"0"});
  });
  
  $(".signature").on("click",function(){
    $('.heart').addClass("liked").
        delay(777).queue(function() {
          $(this).removeClass("liked").dequeue();
    });
  });// .signature clicked
  
  
});

function filterlist(a) {
  var filter = $(a).val().toLowerCase();
  $(".output>.content>p").slideUp().filter( function() {
    return $(this).text().toLowerCase().indexOf(filter) > -1;
  }).stop(true).fadeIn();
}