@charset "UTF-8";

/* Simple CSS Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
}

/* Remove link color. */
a {
	color: inherit;
}

/*
	1) Center the main content.
	2) Set the width of the element to 48rem, with lower padding on mobile devices.
	3) Relative position as the default allows for absolute positioning of child elements.
*/
article,
main {
	margin: auto; /* 1 */
	max-width: 48rem; /* 2 */
	padding: 0 1rem; /* 2 */
	width: 100%; /* 2 */
	position: relative; /* 3 */
}

@media (max-width: 600px) {
	article,
	main {
		padding: 0 0.2rem; /* 2 */
	}
}

header,
section,
footer {
	margin: 0.7rem;
	padding: 0.7rem;
}

/* On mobile devices, a smaller margin looks more fitting due to the smaller view. */
@media (max-width: 600px) {
	header,
	section,
	footer {
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;
	}
}


/* ===================================================================================================================== */
/*   Tables   ========================================================================================================== */
/* ===================================================================================================================== */

/* Remove the distance between adjacent cells, since we don't have vertical border lines. */
table {
	border-spacing: 0;
}

/* Add some padding around table cells. */
td,
th {
	padding: 0.4rem 1.0rem;
}

/* Remove left padding for first cell in a row. */
td:first-child,
th:first-child {
	padding-left: 0;
}

/* Remove right padding for last cell in a row. */
td:last-child,
th:last-child {
	padding-right: 0;
}

/*
	1) Add a border under the table header.
	2) Align the text to the left in the table header.
*/
th {
	border-bottom: 2px solid var(--fg); /* 1 */
	text-align: left; /* 2 */
}

.button {
	background-color: transparent;
	color: var(--fg);
	padding: 10px;
	margin-top: 1.6rem;
	border: 2px solid var(--fg);
	font-weight: bold;
}