* {
	box-sizing: border-box;
}

body, html {
	font-family: Arial, sans-serif;
	background-color: #282c34;
	color: white;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

body {
	padding: 2.2rem 0;
	max-width: min(50rem, 90vw);
}

a {
	color: inherit;
	&:visited {
		color: lightgrey;
	}
	&:hover {
		color: #61dafb;
	}
	&:active {
		color: color-mix(in srgb, #61dafb, black 15%);
	}
}

button {
	--colour: #61dafb;
	&.update {
		--colour: #7aff68;
		background-color: rgba(var(--colour), 0.1);
		background-color: color-mix(in hsla, var(--colour), transparent 10%);
	}
	
	color: var(--colour);
	border: 1px solid var(--colour);
	&:hover {
		background-color: var(--colour);
		color: #282c34;
	}
	
	margin: 3px;
	background: none;
	padding: 10px 20px;
	cursor: pointer;
	user-select: none;
}
li {
	text-align: start;
	max-width: 35rem;
	margin: 0.35rem 0;
}
/* Hide the update table header when there is no data to display yet. */
table:not(:has(tr:nth-child(2))) th {
	display: none;
}
th, td {
	padding: 1em 2em;
	margin: 2em 0.5em;
	height: 2.7em;
}
tr:not(.inactive) .dismiss {
	display: none;
}
.dismiss {
	padding-left: 0;
	transform: translateX(1.25rem); /*This could use some work.*/
	& button {
		font-size: 90%;
		border-radius: 50%;
		width: 2rem;
		height: 2rem;
		display: flex
		align-items: center;
		justify-content: center;
		padding: 0;
	}
}
.status:not(:last-child) {
	padding-right: 0;
}
.banner {
	color: #282c34;
	background: goldenrod;
	background: #41bb19;
	text-align: center;
	padding: 0.5ex;
	top: 0;
	width: 100%;
	position: absolute;
	font-weight: bold;
}

*[title] {
	cursor: help;
}