@import url("/css/utility.css");

.card-grid {
	/*
	column-gap: 15px;
	row-gap: 15px;
	*/
	position: relative;
	max-width: 100rem; /* 1600px */
	margin: auto;
	/*margin-left: calc(((-100svw + 100%) / 2) + var(--page-padding));
	margin-right: calc(((-100svw + 100%) / 2) + var(--page-padding));*/
	text-align: center;

	filter: drop-shadow(0 0 var(--4px) var(--clr-hcn-shadow));

	/* More complex styling to widen width of .card-grid without needing it to be outside of <main> */
	width: clamp(0px, 100vw, 100rem);
	left: clamp(-25rem, calc((50rem - 100vw) / 2), 0px);
}

article {
	--color: var(--clr-bg-sec);
	text-align: left;

	border: var(--2px) solid var(--clr-hcn-border);
	background-color: var(--color);
	background-image: var(--bg-lines) /*url("/assets/bg-grid-white.png")*/;
	background-attachment: local;

	display: inline-block;

	box-sizing: border-box;
	padding: var(--10px) var(--10px);
	width: 23.125rem; /*370px*/
	height: 18.75rem; /*300px*/
	margin: var(--8px);

	overflow-y: scroll;

	/*filter: drop-shadow(0px 6px 8px #000);*/
	/*transform: rotate(-0.5deg);*/

	& :is(h2, h3, h4, h5, h6, vh2, vh3, vh4, vh5, vh6) {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
}

.cg-large article {
	width: 31.25rem; /*500px*/
	height: 21.875rem; /*350px*/
}

@media screen and (max-width: 50rem) { /*800px*/
	.card-grid {
		width: clamp(0px, 100%, 100rem);
	}

	article {
		width: 100%;
		margin: var(--10px) 0;
	}

	.cg-large article {
		width: 100%;
		margin: var(--10px) 0;
	}
}

@media screen and (width <= 65.625rem) { /* 1050px */
	.cg-large article {
		width: 23.125rem; /*370px*/
	}
}

@media screen and (width <= 49.375rem) { /*790px*/
	.cg-large article {
		width: 100%;
		margin: var(--10px) 0;
	}
}

article :last-child {
	margin-bottom: 0;
}

article h2, article h3 {
	font-size: 1rem;
	margin-top: 0;
	left: 0;

	width: 100%;
	clear: none;
}

article h3 {
	left: 0;
	font-size: 1rem;
	margin-bottom: inherit;
}

.tag {
	font-size: 1rem;
	padding: 0 var(--5px);
	background-color: var(--clr-tag-bg);
	border-radius: var(--5px);
	border: var(--1px) solid var(--clr-tag-border);
}
/* Made so that the light theme tags are also identifiable by color
/* #tag-list .tag {
	background-color: unset;
} */

#tag-list {
	text-align: center;
	margin-bottom: 1rem;
	line-height: 1.875rem;
	cursor: default;
}
#tag-list h-c {
	text-decoration: none;
}

#tag-list span {
	color: var(--clr-main);
	background-color: #353535;
	border: var(--1px) solid #575757;
	border-radius: var(--5px);
	font-size: 1rem;
	padding: var(--1px) var(--6px);
}

#tag-list .box-bottom {
	margin-bottom: 0;
}

/* #tag-list button {
	color: var(--clr-main);
	background-color: #353535;
	border: none;
	border-radius: 5px;
	font-size: 1rem;
	padding: 1px 6px;
	font-family: sans-serif;
	letter-spacing: 0.2px;
	word-spacing: 1px;

	position: relative;
	bottom: 0;
	filter: drop-shadow(0 0 black);
	transition: .15s;
}
#tag-list button:hover {
	bottom: 3px;
	filter: drop-shadow(0 3px black);
}
#tag-list button:active {
	bottom: 0;
	filter: drop-shadow(0 0 black);
} */

.tag.yellow {
	background-color: var(--clr-tag-yellow-bg);
	color: var(--clr-tag-yellow);}
.tag.green {
	background-color: var(--clr-tag-green-bg);
	color: var(--clr-tag-green);}
.tag.blue {
	background-color: var(--clr-tag-blue-bg);
	color: var(--clr-tag-blue);}
.tag.red { 
	background-color: var(--clr-tag-red-bg);
	color: var(--clr-tag-red);}

article {
	scrollbar-color: var(--clr-hcn-scrollbar) var(--clr-hcn-border);
	&::-webkit-scrollbar {
		width: var(--4px);
		height: var(--4px);
		background-color: transparent;
	}
	&::-webkit-scrollbar-corner {
		background-color: transparent;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: var(--10px);
		background-color: gray;
	}
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

.meta {
	margin: var(--5px) var(--5px) -.5rem;
	& date {
		filter: opacity(.7);
		float: right;
		clear: right;
	}
}

article h-cn {
	background-color: var(--clr-prim-bg);
}

:target {
	animation: target-light 4s;
}
.unfin { --color: var(--clr-gray); }

@keyframes target-light {
	0% {
		background-color: default;
		filter: default;
	}
	15% {
		background-color: var(--clr-target-bg);
		filter: drop-shadow(0 0 var(--10px) var(--clr-target-border));
	} /* 353535 */
	/* 70% { background-color: default; filter: default;} */
	100% {
		background-color: default;
		filter: default;
	}
}

article.bg-green {
	--color: var(--clr-green);
}