:root {
	--color-grad-0: #ffffff;
	--color-grad-1: #829fae;
	--color-grad-2: #466a7e;
	--color-grad-3: #0a374b;
	--color-grad-4: #021d31;
	--content-width: 70%;
	--content-width-sm: 43%;
	--spacer: 6rem;
	--spacer-sm: 3rem;
	--offset: 3rem;
	font-size: 20px;
}

@font-face {
	font-family: InstrumentSerif;
	font-weight: normal;
	font-style: normal;
	src: url(/assets/InstrumentSerif-Regular.ttf);
}

@font-face {
	font-family: InstrumentSerif;
	font-weight: normal;
	font-style: italic;
	src: url(/assets/InstrumentSerif-Italic.ttf);
}

body {
	font-family: serif;
	margin: 0;
	background-color: var(--color-grad-1);
	color: var(--color-grad-4);
}

h1 {
	font-family: InstrumentSerif, serif;
	font-style: italic;
	font-weight: normal;
	font-size: 4rem;
	margin: 0;
}

footer {
	text-align: center;
	padding: var(--spacer) 0;
	background-color: var(--color-grad-4);
	color: var(--color-grad-0);
}

footer > * {
	max-width: var(--content-width);
	margin: auto;
}

hr {
	border: 0;
	margin-top: 0;
	margin-bottom: 0;
	position: relative;
	height: 4rem;
	color: inherit;
}

hr::after {
	content: "* * *";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

a {
	color: inherit;
}

ul {
	padding: 0;
}

li {
	list-style-type: none;
}

li.no-shows {
	margin-top: var(--spacer);
}

figure {
	margin: 0;
}

figure img {
	width: 100%;
}

section {
	position: relative;
	padding: var(--spacer) 0;
	box-sizing: border-box;
}

section.centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

section.centered > *:not(img) {
	max-width: var(--content-width-sm);
	margin-left: auto;
	margin-right: auto;
}

section.collage .inner {
	position: relative;
	max-width: var(--content-width);
	margin: auto;
}

section.collage .inner.--size-sm {
	max-width: var(--content-width-sm);
}

article {
	background-color: var(--color-grad-4);
	color: var(--color-grad-0);
	padding: var(--spacer) 0;
}

article h1 {
	margin-bottom: var(--spacer);
}

article pre {
	font-family: Serif;
}

article > * {
	max-width: var(--content-width-sm);
	margin: auto;
}

img.heading {
	height: 3.5rem;
}

#home {
	background-image: url(/assets/bg.png);
	background-size: 100vw calc(100vh + var(--offset));
	width: 100vw;
	height: calc(100vh + var(--offset));
	overflow: hidden;
	z-index: 1;
}

#home .inner {
	max-width: 65%;
	height: 100%;
	margin: auto;
	position: relative;
}

#news {
	background-color: var(--color-grad-2);
	color: var(--color-grad-0);
	position: relative;
	top: -1rem;
	padding-bottom: 0;
}

#news .inner {
	height: 30rem;
}

#pre-order-title {
	text-align: center;
}

#pre-order-title img {
	width: 100%;
}

#tour {
	color: var(--color-grad-0);
}

#tour ul {
	font-size: 1.5rem;
	line-height: 2;
	min-height: 30rem;
	padding-top: var(--spacer);
	max-width: var(--content-width);
}

#music {
	background-color: var(--color-grad-4);
	color: var(--color-grad-0);
}

#music .inner {
	height: 50rem;
}

#merch {
	padding-bottom: 0;
}

#merch .inner {
	height: 40rem;
}

#lyrics .inner {
	height: 40rem;
}

#lyrics li {
	line-height: 2;
}

#bio {
	background-color: var(--color-grad-4);
	color: var(--color-grad-0);
	padding-bottom: 0;
}

#bio p:last-of-type {
	margin-bottom: var(--spacer);
}

.sticker {
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -50%);
}

.invisible {
	/* visually hidden but will be heard by screen readers */
	position: absolute !important;
	height: 1px; width: 1px; 
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

.socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 18px 0;
}

.social {
	text-decoration: none;
}

.social img {
	width: 2rem;
}

.blurred {
	color: transparent;
	text-shadow: 0 0 8px var(--color-grad-4);
	pointer-events: none;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.tear {
	position: absolute;
	bottom: -1rem;
	left: 0;
	width: 100vw;
}

.tear.--pos-top {
	bottom: unset;
	top: -1rem;
}

.release .links {
	display: none;
	position: absolute;
	top: calc(50% - 0.5rem); /* Compensate for the figure caption */
	left: 50%;
	transform: translate(-50%, -50%);
}

.release:hover .links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.release .links img {
	height: 2rem;
	filter: drop-shadow(0 2px 8px #444444);
}



	#home-title {
  width: 100%;
top: calc(49% - var(--offset));
transform: translateY(-50%);
}


	#home-lea {
  width: 40%;
right: -3rem;
bottom: calc(-4rem + var(--offset));
transform: unset;
}


	#stars-top-left {
  top: 10%;
left: 10%;
width: 5%;
transform: unset;
}


	#stars-top-right {
  top: 10%;
right: 5%;
width: 15%;
transform: unset;
}


	#stars-bottom-left {
  bottom: 10%;
left: 10%;
height: 15%;
transform: unset;
}


	#stars-bottom-center {
  bottom: 5%;
left: 50%;
height: 15%;
transform: unset;
}


	#pre-order-cover {
  height: 36%;
top: 23%;
left: 13%;
transform: rotate(-7deg) translate(-50%, -50%);
}


	#pre-order-title {
  top: 25%;
left: 36%;
width: 20%;
transform: rotate(5deg) translate(-50%, -50%);
}


	#icon-bc {
  left: 67%;
top: 54%;
width: 3rem;
transform: rotate(-5deg) scale(1.2);
}


	#icon-ig {
  left: 72%;
top: 45%;
transform: rotate(5deg) scale(1.2);
}


	#icon-yt {
  left: 79%;
top: 51%;
transform: rotate(-5deg) scale(1.2);
}


	#icon-sp {
  left: 84%;
top: 35%;
transform: rotate(5deg) scale(1.2);
}


	#galaxy {
  height: 18%;
top: 12%;
left: 70%;
transform: rotate(-7deg) translate(-50%, -50%);
}


	#news-star-1 {
  width: 5.5rem;
top: 70%;
left: 44%;
}


	#news-star-2 {
  width: 4rem;
top: 66%;
left: 90%;
}


	#news-star-3 {
  width: 4rem;
top: 63%;
left: 35%;
}


	#tour-stars-top-left {
  left: 15%;
top: 20%;
width: 12%;;
}


	#tour-galaxy {
  left: 19%;
bottom: 15%;
height: 12%;
transform: rotate(10deg) translate(-50%, -50%);
}


	#tour-stars-top-right {
  right: 10%;
top: 20%;
width: 17%;
transform: unset;
}


	#music-title {
  left: 55%;
top: 47%;
}


	#polaroid1 {
  left: 36%;
top: 53%;
width: 10%;
}


	#polaroid2 {
  left: 57%;
top: 31%;
width: 10%;
}


	#polaroid3 {
  left: 76%;
top: 55%;
width: 10%;
}


	#merch1 {
  left: 27%;
top: 55%;
width: 50%;
z-index: 2;
}


	#merch2 {
  left: 73%;
top: 31%;
width: 40%;
}


	#flowers {
  right: 0;
top: -3rem;
width: 16%;
transform: unset;
}


	#mushrooms {
  left: -1rem;
bottom: -4rem;
width: 14%;
transform: unset;
}


	#polaroids {
  width: 16rem;
top: 30%;
right: 0;
transform: unset;
}


	#blanket-fort {
  width: 40%;
display: block;
margin-top: var(--spacer);
}


	#butterfly-bloom-tee {
  left: 65%;
top: 70%;
}


	#cinema-alone {
  left: 38%;
top: 22%;
width: 23%;
}


	#marbles {
  left: 55%;
top: 71%;
width: 23%;
}


	#branding-bruises {
  left: 15%;
top: 58%;
width: 23%;
}


	#bittersweet {
  left: 77%;
top: 27%;
width: 23%;
}



@media only screen and (max-width: 1400px) {
	:root {
		--content-width: 80vw;
		--content-width-sm: 57vw;
		font-size: 18px;
	}

	#home .inner {
		max-width: 80%;
	}

	#news .inner {
		max-width: 90vw;
	}

	#music {
		padding: 0;
	}
}

@media only screen and (max-width: 1200px) {
	:root {
		font-size: 16px;
	}
}

@media only screen and (max-width: 576px) {
	:root {
		--content-width: 80vw;
		--content-width-sm: 80vw;
	}

	img[role=heading] {
		height: 3rem;
	}

	#home {
		background-size: auto calc(100vh + var(--offset));
	}

	#home .inner {
		width: 90%;
	}

	#news .inner {
		height: 30rem;
	}

	#tour ul {
		font-size: 1rem;
	}

	#music {
		padding: var(--spacer) 0;
	}

	#music .inner {
		height: 30rem;
	}

	#merch .inner {
		height: 40rem;
	}

	#lyrics {
		text-align: center;
	}

	#lyrics .inner {
		height: 35rem;
	}

	.tear {
		bottom: -0.25rem;
	}

	.tear.--pos-top {
		top: -0.5rem;
	}

	.release:hover .links {
		display: none;
	}

	
		#home-title {
  left: 50%;
top: calc(50% - var(--offset));
width: 200%;
transform: translate(-50%, -50%) rotate(-55deg);
}

	
		#home-lea {
  right: 0;
width: 80%;
}

	
		#stars-top-left {
  display: none;
}

	
		#stars-top-right {
  display: none;
}

	
		#stars-bottom-left {
  top: 8%;
left: 8%;
height: 12%;
}

	
		#stars-bottom-center {
  display: none;
}

	
		#pre-order-cover {
  height: 32%;
top: 7%;
left: 65%;
}

	
		#pre-order-title {
  top: 47%;
width: 60%;
}

	
		#icon-bc {
  left: 21%;
top: 82%;;
}

	
		#icon-ig {
  left: 43%;
top: 68%;
}

	
		#icon-yt {
  left: 60%;
top: 76%;
}

	
		#icon-sp {
  left: 70%;
top: 58%;
}

	
		#galaxy {
  display: none;
}

	
		#news-star-1 {
  display: none;
}

	
		#news-star-2 {
  display: none;
}

	
		#news-star-3 {
  display: none;
}

	
		#tour-stars-top-left {
  display: none;
}

	
		#tour-galaxy {
  left: 30%;
bottom: 6%;
height: 6%;
}

	
		#tour-stars-top-right {
  width: 35%;
top: 36%;
}

	
		#music-title {
  left: 74%;
top: 57%;
}

	
		#polaroid1 {
  display: none;
}

	
		#polaroid2 {
  display: none;
}

	
		#polaroid3 {
  display: none;
}

	
		#merch1 {
  left: 60%;
top: 30%;
width: 80%;
}

	
		#merch2 {
  display: none;
}

	
		#flowers {
  width: 30%;
top: -9rem;
}

	
		#mushrooms {
  width: 30%;
}

	
		#polaroids {
  display: none;
}

	
		#blanket-fort {
  width: 80%;
}

	
		#butterfly-bloom-tee {
  left: 7%;
top: 50%;
transform: unset;
}

	
		#cinema-alone {
  left: 27%;
top: 18%;
width: 46%;
}

	
		#marbles {
  left: 70%;
top: 85%;
width: 46%;
}

	
		#branding-bruises {
  left: 16%;
width: 46%;
}

	
		#bittersweet {
  left: 81%;
width: 46%;
}

	
}