@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,700');
::selection{background: #18dae0;color: #1c1c1d;}
::-moz-selection{background: #18dae0;color: #1c1c1d;}
*{
    margin:0;
    padding:0;
}
html, body{
    height:100%;
    background: #1c1c1d;

    font-family: Quicksand, sans-serif;
    color:#18dae0;
}

a{
    color:#18dae0;
    text-decoration: none;
    border: none;

}

.wrapper{
    height:100%;

    display:flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
}
.searcher{
    margin-top:-80%;

    height: 100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transition: 200ms;
}
.searchtitle{
    font-size: 2.448em;

    display:flex;
    flex-grow: 3;
    align-items: flex-end;

    color:#18dae0;
}
.searchtitle h3{
    font-family:Quicksand, sans-serif;
    font-weight: 700;

    letter-spacing: .07em;

    margin-bottom:-0.24em;
}
.searchfield{
    display: flex;
    /*flex-grow: 1;*/
    align-items: center;
    justify-content: center;

    /*flex-direction: column;*/

    min-height:170px;
    width:55%;
}
.magnify{
    /*position:relative;*/
    position: absolute;
    /*left:72%;*/
    right:25%;

    height:40px;
    width:40px;
    border: solid 5px;
    border-radius:50%;
    border-color: #18dae0;

    cursor:hand;
    cursor:pointer;
}
.magnify:after{
    content:"";
    display:block;
    height:10px;
    width:0;
    border:solid 5px;
    border-color: #18dae0;
    transform: rotate(-44deg);

    position:relative;
    top:33px;
    left:38px;
}
#searchinput{
    width: 100%;
    height:50%;

    text-align: center;
    font-size: 2.448em;
    font-family: Quicksand, sans-serif;
    font-style: italic;
    font-weight: 100;
    letter-spacing: 0.06em;

    color: #18dae0;

    border:solid 5px;
    border-color: #18dae0;
    border-radius:75px;
    background: transparent;
}
/*fixes the color on the input placerholder*/
::-webkit-input-placeholder{
    opacity: 1 !important;
}
::-moz-placeholder{
    opacity: 1 !important;
}
.searchbutton{
    display: flex;
    /*flex-grow: 3;*/
    align-items: flex-start;

    font-size:1.738em;
    letter-spacing: 0.2em;

    position:absolute;
    bottom:37%;
}
.content{
    /*initial values, used for animating*/
    height:0;
    opacity:1;

    width:55%;
    /*height:75%;*/
    overflow-y:scroll;
    border:solid 5px;
    border-color: #18dae0;
    border-radius: 10px;

    transition: 150ms;
}
.resultmodal{
    border: solid 5px;
    border-radius:10px;
    margin: .5em .5em .5em .5em;
}
.title{
    font-size:1.44em;
    color: #1c1c1d;
    background: #18dae0;
    padding:.2em;
    font-weight: 700;
    font-style: italic;
    /*border-radius: 10px 10px 0 0;*/
}
.snippet{
    font-size:1.2em;
    margin: .5em;
}

.junq{
    width:0;
    height:0;
    border-left: solid 35px transparent;
    border-right: solid 35px transparent;
    border-bottom: solid 60px #18dae0;

    position:absolute;
    right:10px;
    bottom:10px;

    cursor:pointer;cursor:hand;
}
.junq::before{
    content:'';
    display:block;
    width:20px;
    height:20px;
    background:#1c1c1d;

    position:relative;
    right:10px;
    bottom:-25px;

    border-radius: 80% 5%;
    transform:rotate(45deg);
}
.junq::after{
    content:'';
    display:block;
    width:18px;
    height:18px;
    background:#18dae0;

    position:relative;
    border-radius:50%;

    right:9px;
    bottom:-1px;
}
.junq-lash{
    position:absolute;
    right:44px;
    bottom:23px;
    width:2px;
    height:5px;

    background:#1c1c1d;
    /*background: #f0f;*/
}
.junq-lash::before{
    content:'';
    display:block;
    width:3px;
    height:5px;
    background:#1c1c1d;

    position:relative;
    right:8px;
    bottom:2px;
    transform:rotate(23deg);
}
.junq-lash::after{
    content:'';
    display:block;
    width:3px;
    height:6px;
    background:#1c1c1d;

    position:relative;
    right:-7px;
    bottom:7px;
    transform:rotate(-23deg);
}