styles.css

html,
body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Roboto Slab', serif;;
}
* {
	margin: 0;
	padding: 0;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	background: purple;
	color: white;
	padding: 10px 15px;
}
header > div:first-child {
	display: flex;
	justify-content: space-between;
}
.site-logo {
	border: 1px solid #f1f1f1;
	padding: 5px 10px;
	font-size: 20px;
	border-radius: 6px;
	cursor: pointer;
}
.site-logo:hover {
	opacity: 1;
}
.menu-bar {
	display: none;
	font-size: 25px;
	border-radius: 2px;
	border: 1px solid #f1f1f1;
	opacity: 0.7;
	cursor: pointer;
	padding: 5px 10px;
}
h1 {
	padding: 20px 0;
	text-align: center;
	font-size: 2em;
	color: white;
}
.nav ul {
	list-style-type: none;
}
.nav ul li {
	display: inline-block;
	margin: 0 12px;
}
.nav ul li a {
	color: white;
	text-decoration: none;
}
.t-lead,
.t-deputy {
	opacity: 0.7;
}

[class='github-icon'] a,
[class='slack-icon'] a {
	border: 1px solid #f1f1f1;
	padding: 5px 7px;
	border-radius: 5px;
	opacity: 0.6;
}
[class='github-icon'] a:hover,
[class='slack-icon'] a:hover {
	opacity: 1;
}
.container {
	display: flex;
	justify-content: center;
}
.highlight {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 85%;
	margin: 0 auto;
	margin-top: 30px;
}
.highlight > div {
	max-width: 150px;
	border: 1px solid #c9c5c5;
	padding: 6px 10px;
	font-size: 1rem;
	border-radius: 4px;
	background: #f1f1f1;
}
.highlight > div span:last-child {
	float: right;
	margin-left: 10px;
	padding: 2px 5px;
	border: 0;
	border-radius: 3px;
	color: white;
}
.total-members {
	background: rgb(185, 5, 185);
}
.total-passes {
	background: rgb(6, 190, 6);
}
.total-fails {
	background: rgb(238, 17, 17);
}

.table {
	width: 85%;
	margin-top: 20px;
	box-sizing: border-box;
	box-shadow: 1px 1px 10px 1px #dfe6e9;
	overflow-x: auto;
}
table {
	border-collapse: collapse;
	width: 100%;
}

thead {
	text-align: left;
	color: white;
	background: purple;
}
tr {
	border-bottom: 1px solid #dfe6e9;
}

th:first-child {
	border-radius: 5px 0 0 0;
	width: 40px;
	text-align: center;
}

th:last-child {
	border-radius: 0 5px 0 0;
}

tr:nth-child(even) {
	background-color: #f3efef;
}
th,
td {
	border: 1px solid #ffffff57;
	padding: 15px 15px;
	font-size: 0.8em;
}

.status {
	margin-left: 10px;
	font-size: 20px;
}
.status.pass {
	color: green;
}
.status.fail {
	color: red;
}

@media screen and (max-width: 780px) {
	.container {
		padding: 10px;
	}
	.table {
		width: 100%;
	}
	header > div {
		width: 100%;
	}
	.highlight {
		justify-content: center;
	}
	.highlight > div {
		width: 70%;
		justify-content: center;
		margin-bottom: 10px;
		margin-right: 10px;
		display: block;
	}
	.nav ul li {
		display: none;
		margin: 20px 0;
	}
	.nav.responsive ul li {
		display: block;
	}
	.menu-bar {
		display: block;
	}
}