@import url("/assets/css/fonts.css");

:root {
	--main-font: "Zen Kaku Gothic New", sans-serif;
	--secondary-font: "Pixellari", serif;
	--app-background: black;
	--app-text-color: white;

	/* shadow the hedgehog red */
	--accent-color: rgb(220, 0, 0);

	--link-color: var(--accent-color);
	--border-radius: 0.5rem;
	--auto-column-size: 250px;
	--box-border: 2px solid hsl(from var(--accent-color) h 40% 30%);
	--light-accent: hsl(from var(--accent-color) h 50% 30%);
	--triangle-gradient: linear-gradient(45deg, black 50%, var(--light-accent));
}

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
site-header {
	grid-area: header;
}
site-nav {
	grid-area: nav;
}
main {
	grid-area: main
}
body {
	/* background-color: var(--app-background); */

	background: var(--triangle-gradient);
	background-size: 10px 10px;
	color: var(--app-text-color);
	max-width: 1150px;
	/* max-width: 1350px; */
	padding: 2em;
	margin: auto;
	font-family: var(--main-font);
	/* font-size: 14px; */
}

.main-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"nav"
		"main";
	@media (width > 700px) {
		grid-template-columns: 1fr 4fr;
		grid-template-areas: 
			"header header"
			"nav main";
	}
	/* display: flex; */
	/* flex-direction: column; */
	background: var(--app-background);
	padding: 1em;
	box-shadow: 0px 0px 18px var(--accent-color);
	border: var(--box-border);
	border-radius: 5px;
	gap: 0.5em;
}

a {
	color: var(--accent-color);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}

	&:visited {
		color: var(--accent-color);
	}

}

p {
	margin-block: 1em;
}

.shadow-button {
	padding-inline: 1rem;
	padding-block: 0.5rem;
	color: white;
	background: var(--accent-color);
	border: none;
	border-radius: var(--border-radius);

	&:hover {
		cursor: pointer;
		background-image: url("/assets/black-arms-resized.png");
		background-size: cover;
	}
}

.songlinks {
	display: grid;
	gap: 1em;
	border: 2px solid var(--app-text-color);
	border-radius: var(--border-radius);
	padding: 1rem;
	margin-block: 1em;

}

.featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;

	@media (width > 690px) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.album-header {
	display: grid;

	@media (width > 500px) {
		grid-template-columns: 1fr 1fr;
	}

	gap: 1em;

}

.album-metadata {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-block: 0;
	transform: translateY(-15px);

	/* makes it look better with the transformations on the cd cover */
	& p {
		padding: 0;
		margin: 0;
	}

}