* {margin: 0; padding: 0; box-sizing: border-box;}
body {font: 400 1em/1.2em 'Roboto', Arial, Verdana, Tahoma, Sans-serif; color: #111; word-wrap: break-word; overflow-x: hidden;}


@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,900,900i');

a {color: #00b4bd; text-decoration: none; transition: background 0.2s ease-in;}

.wrap {}
.container {display: flex; flex-flow: column wrap;}
.header {background: #fff; position: relative; width: 100%; padding: 50px 0; margin: 0 auto; text-align: center;}
.footer {clear: both; margin: 0 auto; width: 100%; color: #777; font-size: .8em; text-align: center; padding: 50px 0;}

h1 {font-size: 3em; font-weight: 900; line-height: 100%; text-align: center;}
h1 span {color: #00b4bd;}
h2 {font-size: 1.35em; font-weight: 900; text-align: center; color: #00b4bd; margin-bottom: 20px;}
h3 {font-weight: normal; margin: 20px 0;}

.fa-brands,
.fa-solid,
.fa-regular {font-size: 3.5em; margin-top: 30px; color: #2C3E50;}

.tools-single:hover {background: #f5f5f5; border-radius: 8px;}

hr {border: none; height: 1px; background-color: #eee; margin: 0;}

.links-single a {display: block; color: #fff; background: #00b4bd; padding: 10px; margin: 10px 0; border-radius: 8px;}
.links-single a:hover {background: #2C3E50;}

button {padding: 10px; display: inline; margin: auto; color: #fff; background: #00b4bd; border: 1px solid #00b4bd; cursor: pointer; font-size: 1em; font-weight: 900; border-radius: 8px; transition: background 0.2s ease-in;}
button:hover {background: #2C3E50; border: 1px solid #2C3E50;}
input[type=text],
input[type=file] {padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 8px;}
#answers-result,
#speed-result,
#result,
#size-indicator {margin: 20px 0; padding: 20px 0; font-size: 2em; line-height: 1.5em;}
#output {}

pre {text-align: left; border: 1px solid #ccc; padding: 20px; overflow: auto; line-height: 1.8em; border-radius: 8px;}

#sourceCodeDisplay {margin: 20px auto; width: 100%;}

.post-button-wrap {padding: 20px;}
.post-button {padding: 10px; display: inline; margin: auto; color: #fff; background: #00b4bd; border: 1px solid #00b4bd; cursor: pointer; font-size: 1em; font-weight: 900; border-radius: 8px; transition: background 0.2s ease-in;}
.post-button:hover {background: #2C3E50; border: 1px solid #2C3E50;}

/* pinyin input */
textarea {font-size: 18px; font-family: Arial, Verdana, Tahoma, Sans-serif; background: #fff;}
textarea.chinese {width: 610px; height: 200px; border: 5px solid #00b4bd; padding: 10px; color:#111111;}
.chinese-checkbox {color: #666; font-size: 14px; padding: 5px; display: inline;}
#chinese-ime {font-family: Arial, Sans-serif; font-size: 16px; color: #444; position: absolute; background: #fff; border: 1px solid #aaa; padding: 5px;}
#chinese-ime .typing {border-right-style: solid; border-right-width: 2px; border-right-color: #000;}
#chinese-ime ul.options {margin: 0; padding: 0; list-style-type: none;}
#chinese-ime ul.options li {float: left; padding: 0.2em;}
#chinese-ime ul.options li.current {background: #eee;}

/* handwriting input */
.drawingBoard {width: 250px; height: 250px; cursor: crosshair; clear: both; overflow: hidden; background-color: #fafafa;}
.drawingBoard span {display: none;}
.drawingBoard.loading {background-color: #f0f0f0;}
.drawingBoard.loading span { display: inline; color: #606060;}
.commands { width: 250px; margin-top: 3px;}
.cmd {width: 122px; background-color: #fce7c0; text-align: center; cursor: default; padding: 3px; color: #606060;}
.cmd.cmdUndo {float: right;}
.cmd:hover {background-color: #f1d7a6;}
.charPicker {border: 1px solid #a0a0a0; padding: 15px; height: 25px; width: 400px; font-size: 48px; background-color: #fafafa; overflow: hidden; color: #606060;}
.charPicker span {cursor: pointer; line-height: 20px;}
.hanziLookupChars {margin-bottom: 20px;}
.character:hover {background-color: yellow;}

/* Mobile styles */
@media (max-width: 767px) {
	.links,
	.commons,
	.services,
	.tools,
	.contact {text-align: center; margin: 50px auto; width: 100%;}

	.commons-wrap,
	.links-wrap,
	.services-wrap,
	.tools-wrap {display: flex; flex-flow: column wrap; flex-grow: 1; justify-content: center; gap: 20px;}

	.links-single,
	.services-single,
	.tools-single {width: 100%; transition: background 0.2s ease-in; border-radius: 8px;}
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
	.links,
	.answers,
	.services,
	.tools,
	.contact {text-align: center; margin: 80px auto; width: 100%;}

	.commons-wrap,
	.links-wrap,
	.services-wrap,
	.tools-wrap {display: flex; flex-flow: row wrap; flex-grow: 4; justify-content: center; gap: 20px;}
	.commons-wrap {display: flex; flex-flow: row wrap; flex-grow: 4; justify-content: center; gap: 20px;}

	.links-single,
	.services-single,
	.tools-single {width: 30%; transition: background 0.2s ease-in; border-radius: 8px;}
}

/* Desktop styles */
@media (min-width: 1024px) {
	.links,
	.commons,
	.services,
	.tools,
	.contact {text-align: center; margin: 100px auto; width: 860px;}

	.links-wrap,
	.services-wrap,
	.tools-wrap {display: flex; flex-flow: row wrap; flex-grow: 4; justify-content: center; gap: 20px;}
	.commons-wrap {display: flex; flex-flow: column wrap; flex-grow: 4; justify-content: center; gap: 20px;}

	.links-single,
	.services-single,
	.tools-single {width: 30%; transition: background 0.2s ease-in; border-radius: 8px;}
}