input[type="text"] {
    border: 0;
}
button {
    margin-left: 0.2em;
    color: white;
    background-color: hsl(300, 100%, 20%);
}
button:hover {
    background-color: hsl(300, 100%, 30%);
}
.auth {
    font-family: serif;
    font-size: 100%;
    color: white;
    border: 0;
    border-radius: 0.2em;
    padding: 0.4em 0.8em;
    margin: 0 0.2em;
    font-weight: bold;
}
.facebook-login {
    /* https://developers.facebook.com/docs/facebook-login/userexperience */
    background-color: #1877F2; /* hsl(214, 89, 52) */
}
.facebook-login:hover {
    background-color: hsl(214, 89%, 39%);
}
.facebook-login:disabled {
    background-color: hsl(214, 89%, 75%);
}
.facebook-logged-in {
    background-color: hsl(214, 89%, 75%);
}
.bluesky {
    background-color: hsl(211, 100%, 53%); /* taken from the logo */
}
.bluesky:hover {
    background-color: hsl(211, 100%, 68%);
}
.bluesky:disabled {
    background-color: hsla(211, 60%, 53%, 50%);
    color: #ddd;
}
.blueskyHandle {
    font-size: 100%;
    width: 10em;
}
/* also used for "delete your account" */
.logout {
    background-color: hsl(334, 89%, 52%);
}
.logout:hover {
    background-color: hsl(334, 89%, 39%);
}
.logout:disabled {
    background-color: hsl(334, 89%, 75%);
}
.searchwords .term {
    margin-right: 0.2em;
}
.searchwords button {
    background-color: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin-left: 0.2em;
}
.searchwords input {
    width: 8em;
}
.errors {
    list-style-type: none;
}
.errors > li {
    padding: 0.2em;
}
@keyframes fade-in {
    from {opacity: 0%;}
    to {opacity: 100%;}
}
.login-icon {
    margin-left: 0.3em;
}