:root {
	--rotation: 0deg;
}
* {
	box-sizing: content-box !important;
}
html {
	font-size: 62.5%;
	min-height: 100%;
}
body {
	background: linear-gradient(185deg, hsl(0 0% 50% / 0.75) 0, hsl(0 0% 0% / 0.75) 100%);
	font-family: "Helvetica Neue", sans-serif;
	font-size: 1.6rem;
	font-weight: 200;
	margin: 0;
	padding: 0;
}
a {
	border-bottom: 1px dotted #0606;
	color: #060;
	text-decoration: none;
}
main {
	display: grid;
	grid: "header" auto "releases" auto "footer" auto / auto;
	min-height: 100vh;
	place-items: end center;
}
img {
	height: auto;
	width: 100%;
}
header {
	grid-area: header;
	padding: 2vh 3vw;
}
div.logo,
div.artist {
	margin: 0 auto;
	max-width: 1000px;
	width: 80%;
}
div.logo {
	padding: 0 0 5vh;
	position: sticky;
	top: 2vh;
	width: 75%;
	z-index: 1;
}
div.artist {
	transform: rotate(var(--rotation));
	transition: 10s all cubic-bezier(0.1, 0.2, 0.3, 1);
}
div.artist img {
	border-radius: 4px;
	box-shadow: 0 1rem 2rem #0006;
}
section.releases {
	display: grid;
	grid: auto / repeat(2, 1fr);
	grid-gap: 2vw;
	max-width: 1600px;
	width: 80vw;
}
section.releases h2 {
	grid-area: h2;
}
@media only screen and (min-width: 600px) {
	section.releases {
		grid: 1fr / repeat(4, 1fr);
	}
}
.release {
	transition: all 0.25s ease-in-out;
	&:hover {
		rotate: var(--rotation);
		scale: 1.75;
		translate: 0 -5rem;
		z-index: 2;
	}
}
.release img {
	border-radius: 3px;
	box-shadow: 0 0.5rem 0.5rem #0003, 0 0 20px #0006;
}
.release .stores {
	margin: 0 0 1vh;
	padding: 0;
	text-align: right;
}
.release .stores a img {
	border-radius: 10px;
	box-shadow: 0 0 0 1px #fff1, 0 0 10px #0003;
	width: 20px;
}
footer {
	background: #aaaa;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-top: 1px solid #0003;
	bottom: 0;
	margin: 2rem auto 0;
	padding: 2rem 0;
	position: sticky;
	text-align: center;
	/* text-shadow: -1px -1px 1px #aaaa, 1px 1px 1px #aaaa; */
	width: 100%;
}