emojicipher.css

body,
html {
    font-family: Lato, sans-serif;
    margin: 0;
    color: #666666;
    text-align: center;
    background-color: #eeeeee;
}

#container {
    width: 720px;
    padding: 40px 0;
    margin: auto;
}

input {
    border: none;
    font-family: Lato, sans-serif;
    display: block;
    font-size: 24px;
    cursor: text;
    padding: 20px;
    color: #666666;
    margin: auto;
    width: 80%;
    background-color: #ffffff;
}
#advanced {
    font-size: 0;
}
#textalphabet,
#emojialphabet {
    width: 60%;
    display: inline-block;
}
#shuffletext,
#shuffleemojis {
    width: 20%;
    display: inline-block;
    margin: 8px 0;
}
input[type="button"] {
    background-color: #e5e5e5;
}
input[type="button"]:hover {
    cursor: pointer;
    background-color: #dddddd;
}

#output {
    font-family: Lato, sans-serif;
    color: #666666;
    font-size: 48px;
    padding: 32px 16px;
    margin-top: 16px;
    text-align: center;
    background-color: transparent;
    border: none;
    width: 100%;
    cursor: text;
    resize: none;
}
footer {
    margin: 8px;
    font-size: 0;
}
footer a {
    font-size: 16px;
    margin: 0 16px;
    display: inline-block;
}

* {
    cursor: default;
}
a {
    color: #aaaaaa;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover,
a:hover img {
    cursor: pointer;
    color: #888888;
}

@media screen and (max-width: 720px) {
    #container {
        width: 100%;
    }
}