:root {
	font-size: 16px;
}

body {
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	margin: 0;
	font-family: "Arial", sans;
}

body.aaah {
	background-image: url(./assets/AAAH.jpg);
	background-size: cover;
	background-position: top 0 left 50%;
}

button {
	border: 0;
	background: transparent;
	padding: 0;
	transition: 0.3s ease;
}

button:hover {
	transform: scale(1.05);
}

button.yes img, button.no img {
	height: 6rem;
}

button.click-me {
	position: absolute;
	bottom: 4rem;
	right: 3rem;
	transform: rotate(-13deg);
}

button.click-me:hover {
	transform: scale(1.03) rotate(-13deg);
}

button.click-me img {
	height: 5rem;
}


/* index ------------------------------------------- */

#index {
	height: 100%;
}

.content {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
    align-items: center;
	gap: 3rem;
}

.scream {
	height: 40vh;
}

.buttons {
	display: flex;
	align-items: center;
	justify-content: center;
}

.title, .beloved {
	height: 5rem;
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
}

/* screaming --------------------------------------- */

#screaming {
	height: 100%;
	width: 110%;
	overflow-x: hidden;
}

.letter {
	height: 20vh;
	position: relative;
	top: -1rem;
}

/* you are content --------------------------------- */

.you-are-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70vw;
}

/* signup ------------------------------------------ */

#signup {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rem;
}

#signup-form {
	margin: 0 -1rem -1.5rem -1rem; /* compensate for padding inside iframe */
	border: 0;
}

.album-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #4c4c4c;
}

.album-title img {
	height: 3.5rem;
}

.album-title img:first-of-type {
	position: relative;
	top: 0.5rem;
	right: -0.5rem;
}

.album-title time {
	margin-top: 0.5rem;
}


.artwork-container {
	width: 25rem;
	height: 25rem;
	position: relative;
	perspective: 600px;
}

.artwork {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	transform: rotateY(10deg);
	border-radius: 0.5rem;
}

/* media queries ------------------------------------- */

@media only screen and (max-width: 576px) {
	#signup {
		padding: 4rem 0 0 0;
		height: initial;
		flex-direction: column;
		gap: 2rem;
	}

	button.yes img, button.no img {
		height: 4.5rem;
	}

	button.click-me {
		position: fixed;
		bottom: 5rem;
		right: 1rem;
	}

	button.click-me img {
		height: 4rem;
	}

	.content {
		width: 100vw;
	}

	.scream {
		height: unset;
		width: 90vw;
	}

	.title {
		height: 4rem;
	}

	.beloved {
		position: initial;
		transform: initial;
		height: 4rem;
	}

	.letter {
		transform: scale(0.9);
	}

	.you-are-content {
		width: 100vw;
	}

	#signup-form {
		width: 90vw;
	}

	.artwork-container {
		width: 40vw;
		height: 40vw;
		perspective: initial;
	}

	.artwork {
		transform-style: initial;
		transform: initial;
	}

	.album-title {
		margin-bottom: 1rem;
	}

	.album-title img {
		height: 3rem;
	}
}