:root {
	color-scheme: dark light;
	font-family: system-ui, sans-serif;
	font-size-adjust: cap-height from-font;
	overflow-wrap: break-word;
	line-height: 1.5;
	scrollbar-color: #8885 transparent;
	background-color: Canvas;
	touch-action: manipulation;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
}

body {
	display: flow-root;
	box-sizing: border-box;
	min-block-size: 100dvb;
	margin: 0;
}

h1, h2, h3, h4 {
	font-weight: 600;
}

h1, h2, h3, h4, p {
	margin: 0;
}

ul#main-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	padding: 1rem;

	& > li {
		display: block;

		& > a {
			color: CanvasText;
			padding: 1rem;
			border: 1px solid #8888;
			border-radius: 0.5rem;
			text-decoration: none;

			display: grid;
			gap: .5rem 1rem;
			grid-template-columns: auto 1fr;
			grid-auto-flow: row;

			box-sizing: border-box;
			block-size: 100%;
			align-items: start;

			& > .username {
				color: color-mix(in srgb, CanvasText, transparent 30%);
			}

			& > .logo {
				/* grid-area: 1 / 1 / span 3 / 1; */
				inline-size: 5rem;
				aspect-ratio: 1;
				grid-row-end: span 3;
				align-self: center;

				&.mask {
					--mask: var(--src) center / contain no-repeat;
					-webkit-mask: var(--mask);
					mask: var(--mask);
					background-color: CanvasText;
				}

				&:not(.mask) {
					background: var(--src) center / contain no-repeat;
				}
			}
		}
	}
}