img {
	height: auto;
	max-width: 100%;
}

.button {
	--pane-colour: var(--page-colour);
	appearance: none;
	color: var(--text-colour);
	cursor: pointer;
	display: inline-block;
	padding: 1em;
	
	&:hover {
		--close-edge: color-mix(in srgb, white, transparent 90%);
		--far-edge: color-mix(in srgb, black, transparent 90%);
		--offset: 2px;
		padding-top: calc(1em + var(--offset));
		padding-bottom: calc(1em - var(--offset));
		text-decoration: none;
		transition: all 0.1s;
	}
}

.table-wrapper {
	overflow: auto;
}

table {
	border-collapse: collapse;
	
	th,
	td {
		border: 2px solid var(--highlight);
		padding: 0.2em 0.5em;
	}
}

.centred {
	display: flex;
	justify-content: center;
}

pre,
.glass-pane,
.button {
	--close-edge: color-mix(in srgb, black, transparent 90%);
	--far-edge: color-mix(in srgb, white, transparent 90%);
	--pane-background: color-mix(in srgb, var(--pane-colour), transparent 80%);
	background: var(--pane-background) url(/theme/images/noise.png) center;
	backdrop-filter: blur(3px);
	border: 3px solid;
	border-color: var(--far-edge) var(--close-edge) var(--close-edge) var(--far-edge);
	border-radius: 1rem;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
	
	@media (prefers-reduced-transparency: reduce) {
		--close-edge: color-mix(in srgb, black, transparent 50%);
		--far-edge: color-mix(in srgb, white, transparent 50%);
		background: color-mix(in srgb, var(--pane-colour), var(--reverse-highlight) 80%);
	}
}

.polaroid {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	margin: 1em 0;
	text-align: center;
	
	@media (min-width: 600px) {
		float: right;
		margin: 0 0 1em 1em;
		max-width: 50%;
	}
	
	@media (min-width: 1000px) {
		max-width: 30%;
	}
	
	img {
		border-radius: 0.5em;
		margin: 5.7% 5.7% 0;
		max-width: calc(100% - 11.4%);
		overflow: hidden;
	}
	
	figcaption {
		align-items: center;
		display: flex;
		flex-grow: 1;
		justify-content: center;
		padding: 5.7%;
	}
}