html {
	font-family: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 16px;
	font-weight: 400;
	padding: 5rem;
}

main {
	padding-top: 2.5rem;
	padding-left: 5rem;
	padding-right: 5rem;
	padding-bottom: 5rem;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

abbr {
	text-transform: uppercase;
	text-decoration: underline dotted;
	-webkit-text-decoration: underline dotted;
	cursor: help;
}

caption {
	caption-side: bottom;
	text-align: right;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

details {
	flex: 1;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: left;
}

details summary {
	text-align: center;
	padding: .5rem;
}

details ul {
	padding-bottom: 1rem;
	line-height: 1.3;
	box-shadow: rgba(0, 128, 128, 0.4) -5px 5px, rgba(0, 128, 128, 0.3) -10px 10px, rgba(0, 128, 128, 0.2) -15px 15px, rgba(0, 128, 128, 0.1) -20px 20px, rgba(0, 128, 128, 0.05) -25px 25px;
}

details li {
	padding-block: .5rem;
}

footer {
	padding-top: 2.5rem;
	text-align: center;
	line-height: 2;
}

hr {
	margin-top: 2em;
	margin-bottom: 2em;
	width: 50%;
	opacity: 50%;
}

img {
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

section {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	/* padding-bottom: 1rem; */
}

section p {
	flex: 1;
	text-indent: 5em;
	margin-right: 10px;
	line-height: 1.5
}


small {
	font-weight: lighter;
	font-style: italic;
	opacity: .5;
}

summary {
	outline: 1px solid black;
}

table {
	width: 100%;
	border: 1px solid;
	border-collapse: collapse;
}

td,
th {
	border: 1px solid;
	padding: .5rem;
}

th {
	text-wrap: nowrap;
}

th.asc::after {
	content: '↑';
}

th.desc::after {
	content: '↓';
}

tbody tr {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

th,
thead,
summary {
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

tfoot {
	text-wrap: wrap;
}

li::marker {
	transition: color 0.3s ease-in-out;
}

li:hover::marker {
	color: rgb(243, 173, 0);
}

ul {
	list-style: star;
}

/* Style for each table */
#mountains {
	flex: 1;
	/* Allow tables to grow and take equal space */
	min-width: 300px;
	/* Minimum width for each table */
	text-wrap: nowrap;
}

#concerts {
	flex: 2;
}

#productions td:nth-last-child(-n+6) {
	text-align: center;

}

.square-container {
	position: relative;
	width: 30%;
	/* Takes up 30% of the section */
}

.square-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bio-text {
	width: 70%;
	/* Takes up the remaining 70% */
}

/* Wrapper for each image to enforce square framing */
.image-wrapper {
	flex: 1 1 calc(33.333% - 20px);
	/* Three images per row with gap accounted for */
	/* Ensures the wrapper is square */
	overflow: hidden;
	/* Ensures the image fills the square */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure the image fills the square */
.image-wrapper img {
	width: 100%;
	object-fit: cover;
	height: auto;
	transition: opacity 0.5s ease-in-out;
	/* Ensures the image fills the square without distortion */
}

.image-container img {
	width: 100%;

}

.column {
	flex-direction: column;
}

.selfie {
	max-width: 30%;
}

/* Concert Coloring */

.red-rocks {
	color: orangered;
}

.bluebird {
	color: #2b529c;
}

.ogden {
	color: #ee2738;
}

.belly-up {
	color: #1174b9;
}

.vortex {
	color: rebeccapurple;
}

.fiddlers {}

.golden-tri {
	color: gold;
}

/* End Concert Coloring */

@counter-style star {
	system: cyclic;
	symbols: "\2726";
	suffix: " ";
}

@media (max-width: 768px) {
	section {
		flex-direction: column;
		/* Stack tables vertically */
	}
}

/* Responsive behavior: Stack images into a column on smaller screens */
@media (max-width: 768px) {
	.image-wrapper {
		flex: 1 1 100%;
		/* Each image takes full width */
	}
}

@media (prefers-color-scheme: dark) {
	a {
		color: aqua;
	}

	body {
		background-color: #121212;
		color: turquoise;
		border-color: turquoise;
	}

	summary {
		outline: 1px solid turquoise;
	}

	img {
		filter: saturate(75%);
		box-shadow: rgba(0, 255, 255, 0.1) 0px 2px 4px, rgba(0, 255, 255, 0.05) 0px 8px 16px, rgba(0, 255, 255, 0.02) 0px 16px 32px;
	}

	main {
		box-shadow: rgba(0, 255, 255, 0.4) 0px 2px 4px, rgba(0, 255, 255, 0.3) 0px 7px 13px -3px, rgba(0, 255, 255, 0.2) 0px -3px 0px inset;

		/* Add more selectors here to adjust other elements as needed */
	}