/*
 * Variables
 */

:root {
	/* Colors & branding */
	--clr-brand-gray: #323230;
	--clr-brand-red: #dd3700;
	--clr-brand-white: #eee;

	--clr-text: #eee;
	--clr-text-faded: #aaa;
	--size-text: 1.5rem;
	--clr-link: var(--clr-accent);
	--clr-link-active: #f65202;

	--transition-curve-default: ease-in-out;
	--transition-duration-btn: 100ms;
	--transition-duration-link: 300ms;

	/* Background */
	--clr-bg: #161613;

	/* Content */
	--clr-content-bg: #2221;
	--border-content: 0.0625rem solid #222;
	--spacing-content-vertical: 2rem;	
	--width-content:  1250px;
}

/*
 * Global styling
 */

* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100vh;
}

/* Body */
body {
	/*background: linear-gradient(to top, var(--clr-bg1), var(--clr-bg2));*/
	background: var(--clr-bg) url('../assets/img/hex-bg.svg') repeat center / 168px 96.99px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-family: "Roboto", sans-serif;
	font-size: var(--size-text);
}

#wrapper {
	color: var(--clr-text);
	text-align: center;
}

h1 {
	font-size: 3.5em;
}

/* Links */
a:focus {
	outline: none;
}
a {
	display: inline-block;
	position: relative;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration-link) var(--transition-curve-default);
}
a:focus,
a:hover {
	color: var(--clr-link-active);
}
a::before {
	content: '';
	position: absolute;
	bottom: 0.15em;
	left: 0;
	width: 100%;
	height: 0.1em;
	background: var(--clr-link-active);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition-duration-link) ease-in;
}
a:hover::before,
a:focus::before {
	transform: scaleX(1);
	transform-origin: left;
}

/*
 * List stuff
 */

.list {
	display: grid;
	grid-auto-rows: minmax(min-content, max-content);
	text-align: left;
	row-gap: 0.5em;
}
.list .item {
	display: grid;
	grid-template-rows: auto auto auto auto;
	grid-template-columns: 2ch 1fr 4ch;
	row-gap: 0.25em;
	column-gap: 2em;
	background: #56565288;
	backdrop-filter: blur(0.15em);
	border-radius: 0.25em;
	padding: 0.5em 1em;
}
.list .item > * {
	grid-row: 2;
}
.list .item > *::before {
	grid-row: 1;
	display: block;
	font-size: 0.5em;
	color: var(--clr-text-faded);
	text-transform: uppercase;
}
.list .item .file {
	grid-row: 4;
	grid-column: 1 / span 3;
}
.list .item .track::before {
	content: "Track";
}
.list .item .title::before {
	content: "Title";
}
.list .item .length::before {
	content: "Length";
}
.list .item .file::before {
	content: "File";
	grid-row: 3;
}

.list audio {
	width: 100%;
}

@media (max-width: 768px) {
	.list .item {
		grid-template-rows: auto auto auto auto;
		grid-template-columns: 2ch 1fr 4ch;
	}
	.list .item .track, .list .item .title {
		grid-row: 1;
	}
	.list .item .track::before, .list .item .title::before {
		grid-row: 2;
	}
	.list .item .length, .list .item .file {
		grid-row: 3;
	}
	.list .item .length::before, .list .item .file::before {
		grid-row: 4;
	}
	.list .item .track {
		grid-column: 1;
	}
	.list .item .title {
		grid-column: 2 / span 2;
	}
	.list .item .length {
		grid-column: 3;
	}
	.list .item .file {
		grid-column: 1 / span 2;
	}
}