@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: normal;
  src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff') format('woff');
}

@font-face {
  font-family: 'ArvoI';
  font-style: italic;
  font-weight: normal;
  src: local('Arvo Italic'), local('Arvo-Italic'), url('http://themes.googleusercontent.com/static/fonts/arvo/v5/7solcx-ZQo6LBqJvZuxkkg.woff') format('woff');
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}

body {
    font-size: 14px;
    font-family: 'Arvo', "Palatino Linotype", "Book Antiqua", Palatino, Tahoma, sans-serif;
    text-align: center;
}

::-webkit-input-placeholder {
    color: #999;
    font-style: italic;
}
::-moz-placeholder {
    color: #999;
    font-style: italic;
}
:-ms-input-placeholder {
    color: #999;
    font-style: italic;
}
:-moz-placeholder {
    color: #999;
    font-style: italic;
}

.wrap {
    border-top: 6px solid black;
    padding: 33px 0 0 0;
    width: 100%;
}

.main {
    margin: 0 auto 90px;
    max-width: 960px; /* 694 */
    padding: 0 20px;
}

.logo img {
    left: -7px;
    max-width: 100%;
    position: relative;
}

.opt {
    padding: 22px 0 40px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.opt li {
    cursor: pointer;
    float: left;
    line-height: 25px;
    list-style-type: none;
    width: 33%;
}

.option {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    font-family: 'Times New Roman', serif;
    font-weight: 200;
    font-size: 2em;
    height: 70px;
    letter-spacing: 2px;
    line-height: 70px;
    margin: 0 auto 10px;
    width: 70px;
}

.option.c { background-color: #2e2e2e; }
.option.t { background-color: #8a8a8a; }
.option.l { background-color: #b5b5b5; }

.selected .option {
    background-color: #60abad;
    color: #fff;
}

.string,
.result {
    padding: 5px 0;
    width: 100%;
}

input,
textarea {
    border: 1px solid #888;
    font-family: Helvetica, 'Helvetica Neue', Georgia, Geneva, sans-serif;
    font-size: 16px;
    padding: 10px;
    width: 100%;
}

textarea {
    height: 158px;
    resize: vertical;
}
.js-input {
    height: 100px;
}

.copy {
    margin-top: 10px;
    overflow: hidden;
}

.copy section {
    float: left;
    text-align: right;
    width: 50%;
}

.copy section:first-child {
    text-align: left;
    padding-left: 5px;
}

.share img {
    margin-right: 22px;
}

.powered {
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
}

.powered a {
    color: #7eafb0;
    font-family: 'ArvoI', "Palatino Linotype", "Book Antiqua", Palatino, Tahoma, sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-transform: none;
}

.js-copy {
    cursor: pointer;
    display: inline-block;
    width: 20px;
}

.js-copy path {
    fill: black;
    transition: fill .5s;
}

.js-copy.done path {
    fill: limegreen;
}