html {
	margin: 0;
	padding: 0;
	background-image: linear-gradient(to right, var(--color-background), var(--color-background-offset), var(--color-background));
	height: 100%;
}

body {
	min-height: 100%;
}



.centered-content {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing);
	margin: 0;

	
	.content {
		width: clamp(40vw, 700px, 100%);
		flex-basis: var(--content-height);
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: var(--spacing);
	}
}

.title {
	display: flex;
	gap: var(--spacing);
	justify-content: center;
	text-align: center;
	align-items: center;

	h2 {
		font-size: 3rem;
	}
}

.monsterChart__table.table {
	max-width: 100%;
	width: 100%;
	
	border: 1px solid #ccc;
	background-color: var(--color-foreground);
	
	
	border-radius: 0.25em;
	border: medium solid var(--color-primary);
	box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
	border-collapse: collapse;

	& a {
		color: var(--color-primary)
	}


	tr td, tr th {
		border: 1px solid var(--color-foreground-darkest);
	}

	thead, tfoot {
		position: sticky;
	}

	thead {
		inset-block-start: 0;
		background-color: var(--color-background-offset);

		th {
			padding: var(--spacing) 0;
			overflow: hidden;
			font-size: 0.75rem;
		}
	}

	tfoot {
		inset-block-end: 0;
		/* "top" */
	}

	tbody {
		height: 50px;
		overflow: auto;

		th {
			padding: var(--spacing) 0;

			&>img {
				max-width: 4rem;
			}

			text-align: left;
			/* display: flex;
			align-items: center;
			justify-content: flex-start; */
			flex-wrap: nowrap;
			font-size: 1.5rem;
		}

		td {
			&>img {
				max-width: 4rem;
			}

			padding: var(--spacing) 0.25rem;
			text-align: center;
			font-size: 1.0rem;
		}
	}

	@media screen and (max-width: 850px) {
		font-size: 0.75rem;

		tbody {
			img {
				width: 4rem;
			}

			th, td {
				font-size: 1rem;
			}
		}
	}
	@media screen and (max-width: 500px) {
		font-size: 0.5rem;

		tbody {
			img {
				width: 3rem;
			}

			th, td {
				font-size: 0.5rem;
			}
			.monsterChart__stat{
				font-size: 0.75rem;
			}
			.monsterChart__name{
				font-size: 0.75rem;
			}
			.monsterChart__control{
				font-size: 0.75rem;
			}
		}
	}
}

@media screen and (max-width: 850px) {
	.title {
		h2 {
			font-size: 2rem;
		}
	}

	.content {
		width: 100%;
	}

	#monsterChartTable {
		width: 100%;

		&>* {
			flex-grow: 1;
		}
	}
}
@media screen and (max-width:500px) {
	.content{
		padding: 0;
	}

	#monsterChartFilter{
		font-size: 0.75rem;
	}
}

#monsterChartTable {
	display: flex;
	justify-content: center;

	tbody {
		.monsterChart__stat {
			width: 45px;
			padding: var(--spacing) 0.25rem;
			align-items: center;
			font-size: 1.25rem;
		}

		.monsterChart__control {
			width: 30px;
		}
	}

	.monsterChart__photo {
		padding: 0;
		width: 3rem;
		vertical-align: middle;
	}

	.monsterChart__name, .monsterChart__control {
		padding: var(--spacing) 1px;
	    text-wrap-style: balance;
	}

	.table:has(.isPinned) {
		tr:has(.isPinned) {
			background-color: var(--color-foreground);
		}

		background-color: var(--color-foreground-darker);
	}
}

#monsterAbilities {
	columns: 2;
	
	padding: var(--spacing);

	@media screen and (max-width: 650px) {
		columns: 1;
	}

	.ability{
		display: flex;
		break-inside: avoid;
		margin-bottom: var(--spacing);
		flex-direction: column;
        margin-bottom: 2rem;
		.ability__title{
			font-size: 1.25rem;
		}

		.ability__description{
			p + p {
				margin-top: var(--spacing);
			}
			p{	
				text-align: justify;
				margin: 0
			}
		}
	}
}