* {
    box-sizing: border-box;
}
html {
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0.01em;
}
body {
    color: #777;
    line-height: 1.6;
}
.header {
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    letter-spacing: 0.05em;
}
.content.start {
    margin-top: 10%;
    max-width: 66%;
}
.search {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.search input {
    line-height: 2.6 !important;
    height: 3.9em;
    color: #555;
    font-size: 1.0em;
}
.search #search-input {
    width: 60%;
    font-weight: bold;
    padding: 0.1em 0.8em;
}
.search #search-input::placeholder {
    font-style: italic;
}
.content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    width: 95%;
}
.add-buzzword {
    margin-top: 3%;
    text-align: center;
    font-size: 1.8em;
    letter-spacing: 0.08em;
    line-height: 0.8em;
}
.result h3.parent {
    border-bottom: 1px #777 solid;
    width: 30%;
    min-width: 300px;
}
a {
    color: #444;
    
}
.result>.children>div.add {
    padding-left: 14px;
}
.result>.children>div.add:hover::after {
    content: "+";
}
.result>.children>div.match {
    font-weight: bold;
    color: #ff8c00;
}
.result>.children>div.match::before {
    content: "» ";
}
.result>.children>div.match::after {
    content: " «";
}
.add-word>form>div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-bottom: 20px;
}
.add-word>form>div>input {
    line-height: 1.2em;
    width: 100%;
    height:3em;
    min-width: 250px;
    color: #555;
    font-weight: bold;
    font-size: 1.0em;
    padding: 3px 10px;
}
.add-word>form>div>input::placeholder{
    font-style: italic;
}
.add-word>form>div.submit {
    text-align: right;
}
.add-word>form>div.submit>input {
    width:auto;
}