style.css

/***** PAGE *****/

html {
	background: #eee;
	color: #333;	
	text-align: center;
	padding: 75px 0 25px;
}

body {
	margin: 0;
	padding: 0;
	font-family: rubik, sans-serif;
}

p {
	margin-top: 0;
	padding: 0 5px;
}

/***** HEADING *****/

h1 {
	padding: 0 5px;
	margin: 0 0 20px;
	font: normal 40px 'roboto slab', georgia, serif;
	font-weight: 500;
}

/***** LINKS *****/

a {
	color: #E5007E;
	text-decoration: none;
}

a:hover {
	border-bottom: 1px dotted #E5007E;
}

/***** CONTROLS *****/

select, input {
	font-family: rubik, sans-serif;
	max-width: 100%;
}

select[direction="rtl"] {
	text-align: right;
}

/********** BUTTONS **********/

input[type="button"] {
  background: #E5007E;
  color: #fff;
  padding: 5px 8px;
  cursor: pointer;
  border: 0;
  border-bottom: 3px solid #F17EBD;
  border-radius: 5px;
  opacity: 0.666;
  margin: 6px 1px 8px;
}

input[type="button"]:hover {
  opacity: 1;
}

input[type="button"]:active {
  margin: 8px 1px 6px;
}

#simulate {
	font-size: 24px;
}

/***** SPLITTERS *****/

hr {
	border: 0;
	border-top: 3px solid #333;
	margin: 0 auto 20px;
	max-width: 75%;
	display: none;
}

/***** TABLES *****/

table {
	width: auto;
	padding: 5px;
	margin: 0 auto 24px;
	border-spacing: 0;
	border-collapse: separate;
	background: white;
	border: 0 solid #FAFAFA;
	border-radius: 7px;
	box-shadow: rgba(14, 31, 53, 0.2) 0 2px 4px 0;	
}

th, td {
	text-align: right;
	padding: 5px 10px;
	border: 0;	
}

th {
	border-bottom: 2px solid #aaa;	
	font-weight: bold;	
}

td {
	border-top: 1px solid #ccc;
}

td:first-child, th:first-child {
	border-left: 0;
}

tr:first-child td,
tr.first td {
	border-top: 0;
}

td.value {
	padding: 0 10px;
	font-family: 'Roboto Mono', monospace;
	font-size: 95%;
}

.left {
	text-align: left;
}

.text {
	white-space: pre;
}

#tableNotes {
	max-width: 400px;
	margin: 0 auto 20px;
}

#tableNotes * {
	text-align: center !important;
}

/***** OUTPUT *****/

#output {
	display: none;
}

/***** FOOTER *****/

#footer {
	margin: 15px 20px;
}

#footer p {
	margin: 0;
}

/***** HANDLE SCREEN SIZES *****/

#screenSmall {
	display: none;
}

@media (max-width: 650px) {
	#screenLarge {
		display: none;
	}
	#screenSmall {
		display: block;
	}
}