:root {
	--bg-color: #ddd;
	--color: #333;
	color-scheme: light dark;
	@media (prefers-color-scheme: dark) {
		--bg-color: #272727;
		--color: #f9f9f9;
	}
}
body {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	color: var(--color);
	background-color: var(--bg-color);
}
.blurb {
	width: 50vw;
	margin-inline: auto;
	margin-block-end: 3em;
}
.table {
	display: flex;
	flex-direction: column;
}
.row {
	display: flex;
	justify-content: center;
	transition: font-size 0s 0.25s;
}
.row-info {
	left: 0;
	height: 11vw;
	width: 27vw;
	align-content: center;
	text-align: end;
	text-wrap: balance;
	position: absolute;
	visibility: visible;
	transition: visibility 0s 0.25s allow-discrete;
}
.row-toolbar {
	width: 100vw;
	margin-block-start: calc(-0.5vw - 1em);
	text-align: center;
	position: absolute;
	--v: 0%;
	background: linear-gradient(0deg, var(--color) 0%, var(--color) calc(var(--v) - 30%), transparent var(--v));
	background-clip: text;
	-webkit-text-fill-color: transparent;
	visibility: hidden;
	transition: margin 0.25s ease-out, --v 0.25s ease-out, visibility 0s 0.25s allow-discrete;
}
.row-icons {
	height: 0.9em;
	position: absolute;
	visibility: hidden;
	transition: visibility 0s 0.25s allow-discrete;
}
.row-icons i {
	width: 0.9em;
	height: 0.9em;
	stroke: white;
	display: inline-block;
	background: linear-gradient(0deg, var(--color) 0%, var(--color) calc(var(--w) - 30%), transparent var(--w));
	transition: --w 0.25s ease-out;
	cursor: pointer;
}
.row-icons i.copy {
	mask: url(copy.svg);
}
.row-icons i.check {
	mask: url(copy.svg), url(check.svg);
}
.row-icons i.fluxproart {
	mask: url(fluxproart.svg);
}
.row-icons i.search {
	mask: url(search.svg);
}
.row-icons i.minimize {
	mask: url(minimize.svg);
}
.row-icons > * {
	margin-inline-start: 0.5em;
}
.row .img-container {
	width: 10vw;
	height: 10vw;
	border-radius: 0.5vw;
	margin: 0.5vw;
	background-size: 400%;
	transition: width 0.25s ease-out, height 0.25s ease-out, margin 0.25s ease-out, background-position 0.25s ease-out, background-size 0.25s ease-out;
	cursor: zoom-in;
}
.row .img-container.loading {
	cursor: wait;
}
.row img {
	width: 100%;
	height: 100%;
	border-radius: 0.5vw;
	visibility: hidden;
}
.row img.loaded {
	visibility: visible;
}
.row.row-expanded {
	cursor: auto;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.25em;
	transition: font-size 0s 0s;
}
.row.row-expanded .row-info {
	visibility: hidden;
	transition: visibility 0s 0s allow-discrete;
}
@property --v {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 130%;
}
@property --w {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}
.row.row-expanded .row-toolbar {
	--v: 130%;
	margin-block-start: 2vw;
	visibility: visible;
	transition: margin 0.25s ease-out, --v 0.25s ease-out, visibility 0s 0s allow-discrete;
}
.row.row-expanded .row-icons {
	--w: 130%;
	visibility: visible;
	transition: visibility 0s 0s allow-discrete;
}
.row.row-expanded .row-icons i {
	--w: 130%;
}
.row.row-expanded:not(:hover) .row-icons i {
	--w: 0%;
}
.row.row-expanded .img-container {
	width: 24vw;
	height: 24vw;
	margin-block-start: calc(1em + 3vw);
}
.row.row-expanded img.img-expanded {
	position: absolute;
	margin-inline: auto;
}