html,body{
    background:#222;
    font-family: FreeSans, Arial, sans-serif;
    text-align: center;
    color:#ddd;
}
a,a:visited,a:link,a:active{
    color:#4369db;
    text-decoration: underline;
}
a:hover{
    color:#fff;
}
form{
    margin:2em auto;
    text-align: center;
    width: 100%;
    max-width: 900px;
}
input,button{
    border-radius:0;
    color:#333;
    font-size:2em;
    padding:0.5em;
    box-shadow: rgba(0,0,0, 0.2) 0 3px 4px;
}
input{
    border:#333 2px solid;
    border-right: #ccc 1px solid;
    background:#FFF;
    color:#333;
    max-width: 65%;
    border-radius: 5px 0 0 5px;
}
button{
    border:#333 2px solid;
    border-left: none;
    background:#ddd;
    color:#333;
    max-width: 25%;
    border-radius: 0 5px 5px 0;
}
button:focus, button:hover{
    background:#333;
    color:#ddd;
}

h1{
    margin 2em 0;
}
p.input{
    margin: 5em 0 1em;
    white-space: nowrap;
}
p.result{
    margin: 1em 0 2em;
    font-size: 2em;
    font-weight: 700;
}
p.share{
    margin: 1em 0 6em;
}
.original{
    color:#ddd;
}
.become{
    color:#333;
}
.a8ed{
    display: block;
    font-size: 1.5em;
    color: #fff;
}
.legal{
    margin: 2em 0 1em;
    font-size: 0.8em;
}

.share a{
  display: inline-block;
  padding:0.5em 1.5em;
  margin: 0 1em;
  text-align: center;
  color:#FFF;
  background: #0C6;
  text-decoration: none;
  opacity: 0.4;
}
.share a:hover{
  opacity: 1;
}
.share .twitter{
    background:#0D9DFE; 
}
.share .facebook{
    background:#164D9F; 
}

@media(max-width: 767px) {
    input, button{
        font-size:1.1em;
    }
}