html , body {
    height: 100%;
    font-family: 'San Francisco', 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #655;
}
h1 { font-family: cursive; margin: 15px; }
h2 { font-weight: lighter; }
a { color: #655; text-decoration-color: #bbb; }
svg { width: 24px; height: 24px; } /* Icons */
a svg { margin-left: 14px; margin-right: 14px; } /* Icon buttons */
button { /* Button base definition */
    padding-left: 0px;
    padding-right: 0px;
    background-color: white;
    border-color: #655;
    border-style: solid;
    border-radius: 5%;
    border-width: 0.5px;
    font-family: monospace;
    font-size: 1em;
    color: #655;
}
#about { margin: 40px; } /* Home page index.html text */
#footer {
    margin: 20px;
    font-family: cursive;
    text-align: center;
}

/* ===== Styling for list.html ===== */
a button { width: 80px; height: 25px; margin: 5px; } /* Kanji buttons */
a button svg { height: 1em; vertical-align: text-top; } /* Home icon button */

/* Top navigation for home page and list pages */
a button.topnav { width: 30px; height: 25px; margin: 5px; } /* Top nav buttons */
a button.topnav svg { margin-left: 0px; margin-right: 0px; } /* Top nav buttons */

/* ===== Styling for canvas.html ===== */
#main { min-height: 100%; } /* Canvas landing / main page */
#kanji { margin: 0px; font-size: 2.5em; } /* Kanji character in  main page */
button#clear-canvas { /* Clear canvas button */
    width: 40px;
    margin: 10px;
    background-color: white;
    border-style: none;
}
#clear-canvas svg { /* Clear canvas icon in the button */
    width: 31px;
    height: 31px;
    fill: #655;
    background-color: white;
    border-style: none;
    vertical-align: text-bottom;
}
button.wide-button { /* Button for dictionary and hints */
    width: 110px;
    height: 30px;
    margin: 10px;
}
#hints { min-height: 100%; padding-top: 40px; } /* Bottom / KanjiVG page */
img { width: 5.5em; } /* KanjiVG strokes order */