/*
Shared layout for the album sites. Each site's theme.css sets these colors:

	--bg               page background
	--text             body text
	--text-shadow
	--link             links in the credits
	--title            album/artist heading
	--subtitle         album/artist subheading
	--input            code input text
	--input-border     code input underline (defaults to --input)
	--placeholder      code input placeholder
	--submit-bg        submit button background
	--submit-text      submit button text
	--download-link    "Download the album" link
	--album-gap        space between the cover and the info column
*/

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--bg);
	font-family: 'Roboto';
	font-size: 20px;
	color: var(--text);
	text-shadow: var(--text-shadow, 0.5px 0.5px 0px rgba(0,0,0,1));
}

@media screen and (max-width: 768px) {
	body, html {
		height: auto;
		padding-bottom: 5rem;
	}
}

a {
	text-decoration: none;
	color: var(--link, #a1865b);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

ol, li {
	margin: 0;
	padding-inline-start: 0;
}

.album_info {
	display: flex;
	justify-content: space-between;
	max-width: 900px;
	margin: 0 auto;
	padding-top: 3rem;
}

@media screen and (max-width: 768px) {
	.album_info {
		display: block;
		max-width: 400px;
	}
}

.album {
	flex: 0 0 auto;
	margin-right: var(--album-gap, 9rem);
	width: 400px;
}

.album img {
	width: 100%;
	margin-bottom: 2rem;
	box-shadow: 0px 9px 69px 0px rgba(0, 0, 0, 0.25);
}

.audio__label {
	margin-bottom: 1rem;
	font-size: 12px;
}

audio {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.album {
		display: block;
		width: 250px;
		margin: 0 auto;
		margin-bottom: 3rem;
	}
}

.info {
	flex: 1 1 auto;
	max-width: 400px;
}

@media screen and (max-width: 768px) {
	.info {
		padding: 0 1rem;
	}
}

.info__title {
	color: var(--title);
}

.info__band {
	color: var(--subtitle);
}

.tracklist {
	margin: 2rem 0;
	padding-left: 1rem;
	line-height: 1.3;
}

.credits {
	font-size: 12px;
}

/* CODE */

.CodeInput {
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}

.code {
	max-width: 300px;
	position: relative;
	border: none;
	padding: 0;

	transition: transform 0.3s, opacity 0.3s;
}

.code.code--download {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.code__input {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem;
	padding-top: 0;
	outline: none;
	border: none;
	border-bottom: 2px solid var(--input-border, var(--input));
	background-color: transparent;
	color: var(--input);
	font-family: 'Roboto';
	font-size: 20px;
}

.code__input::placeholder {
	color: var(--placeholder);
}

.code__label {
	font-size: 12px;
}

.code__submit {
	position: absolute;
	bottom: 0.45rem;
	right: 0;
	outline: none;
	border: none;
	padding: 0.25rem 0.5rem;
	background: var(--submit-bg);
	color: var(--submit-text, ButtonText);
	font-size: 20px;
	border-radius: 6px;
	cursor: pointer;
	font-family: 'Roboto';

	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;

	transition: transform 0.3s, opacity 0.3s;
}

.code__submit.code__submit--visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.code__submit.code__submit--loading {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.download {
	text-align: center;

	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: 0.3s transform, 0.3s opacity;
}

.download.download--visible {
	transform: translateY(-100%);
	opacity: 1;
	pointer-events: auto;
}

.download a {
	color: var(--download-link);
}

/* GS logo */

.gs-logo {
	width: 80px;
	margin: 3rem auto 2rem auto;
}

.gs-logo img {
	width: 80px;
	height: 80px;
	opacity: 0.6;
}

.gs-logo img:hover {
	opacity: 1;
}