:root {
	--him : calc(-.75rem - 7px);
}

#project_list {
	display       : flex;
	gap           : .75rem;
	flex-flow     : row wrap;
	align-items   : stretch;
	align-content : end;
	max-width     : 1200px;
}

.plist_tile {
	position        : relative;
	display         : grid;
	cursor          : pointer;
	border-radius   : 1rem;
	flex            : 1 1 300px;
	grid-template   : auto 1fr auto / 1fr;
	height          : auto;
	text-align      : center;
	flex-direction  : column;
	background      : var(--c-dark-text);
	border          : solid 2px var(--c-blue);
	text-decoration : none;
	justify-items   : center;
}

.plist_tile:hover {
	background : var(--c-blue-d);
}

.plist-title {
	padding : 0.75rem 0.75rem 0;
}

.plist-lore {
	color      : var(--c-blue-f);
	padding    : 0.75rem;
	height     : auto;
	overflow-y : auto;
	max-width  : 600px;
}

.plist-tags {
	padding         : 0.25rem;
	display         : flex;
	gap             : 4px;
	justify-content : center;
	flex-flow       : row wrap;
	/*
	height: 32px;
	overflow-y: auto;
	*/
}

.tags button {
	font-size   : 10pt;
	line-height : 1.3rem;
}

.tags button:hover {
	background : var(--c-gold);
}

.tags {
	cursor : default;
}

.tags img {
	top      : 0;
	bottom   : 0;
	left     : 0;
	right    : 0;
	width    : 2.5rem;
	height   : 2.5rem;
	display  : block;
	position : absolute;
}

.tags span {
	cursor         : pointer;
	display        : inline-block;
	position       : relative;
	margin         : 2px;
	width          : 2.5rem;
	height         : 2.5rem;
	vertical-align : middle;
}

.tags span:hover img {
	background    : white;
	border        : 2px solid black;
	border-radius : 50%;
	padding       : 4px;
	z-index       : 9;
	top           : var(--him);
	bottom        : var(--him);
	left          : var(--him);
	right         : var(--him);
	width         : 4rem;
	height        : 4rem;
}

.plist_tile.green {border-color : var(--c-green)}
.plist_tile.green .plist-lore {color : var(--c-green-f)}
.plist_tile.green:hover {background : var(--c-green-d)}

.plist_tile.magenta {border-color : var(--c-magenta)}
.plist_tile.magenta .plist-lore {color : var(--c-magenta-f)}
.plist_tile.magenta:hover {background : var(--c-magenta-d)}

.plist_tile.purple {border-color : var(--c-purple)}
.plist_tile.purple .plist-lore {color : var(--c-purple-f)}
.plist_tile.purple:hover {background : var(--c-purple-d)}

.plist_tile.blue {border-color : var(--c-blue)}
.plist_tile.blue .plist-lore {color : var(--c-blue-f)}
.plist_tile.blue:hover {background : var(--c-blue-d)}

.plist_tile.gold {border-color : var(--c-gold)}
.plist_tile.gold .plist-lore {color : var(--c-gold-f)}
.plist_tile.gold:hover {background : var(--c-gold-d)}

.plist_tile.red {border-color : var(--c-red)}
.plist_tile.red .plist-lore {color : var(--c-red-f)}
.plist_tile.red:hover {background : var(--c-red-d)}

.plist_tile.gray {border-color : var(--c-gray)}
.plist_tile.gray .plist-lore {color : var(--c-gray-f)}
.plist_tile.gray:hover {background : var(--c-gray-d)}


@media screen and (max-width : 800px) {
}

@media screen and (min-width : 800px) {
}