/* basic */
* {
	box-sizing: border-box;
	margin: 10;
	padding: 10;
}
/* layout*/
body {
	font-family: sans-serif;
	padding: 1rem;
}
nav a {
	margin-right: 1rem;
}
/* tables */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}
th, td {
	border: 1px solid #ccc;
	padding: 0.5rem;
	text-align: left;
}
/* Mobile */
@media (max-width: 600px) {
	table, thead, tbody, th, td, tr {
		display: block;
	}
	th {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr {
		margin-bottom: 1rem;
	}
	td {
		border: none;
		position: relative;
		padding-left: 50%;
	}
	td:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 45%;
		padding-right: 0.5rem;
		white-space: nowrap;
		font-weight: bold;
	}
	td:nth-of-type(1):before {
		content: "Year";
	}
	td:nth-of-type(2):before {
		content: "Semester";
	}
	td:nth-of-type(3):before {
		content: "Course";
	}
	td:nth-of-type(4):before {
		content: "Credits";
	}
	td:nth-of-type(5):before {
		content: "Grade";
	}
}