* {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: 5px 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;}
#size-indicator span {font-weight: 900;}
#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%;}

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

	.commons-wrap,
	.links-wrap,
	.services-wrap,
	.tools-wrap {display: flex; flex-flow: column wrap; flex-grow: 1; justify-content: center; gap: 5px 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,
	.commons,
	.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: 5px 15px;}
	.commons-wrap {display: flex; flex-flow: row wrap; flex-grow: 4; justify-content: center; gap: 5px 15px;}

	.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: 5px 15px;}
	.commons-wrap {display: flex; flex-flow: column wrap; flex-grow: 4; justify-content: center; gap: 5px 15px;}

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