:root {
    --pomegranatepink: #ec008c; 
	--pomegranatehighlight: rgba(255,35,175,1);
}

body {
	margin: 0;
	padding: 0;
	font-family: Tahoma, sans-serif;
	background: #fff;
	color: #000;
}

a {
	text-decoration: none!important;
}

.list li {
    padding: 0.33em 0;
}


.hero {
	width: 100vw;
	background: rgba(0,0,0,1);
	padding: 60px 0 0px;
	background-image: url(images/background.svg);
	position: relative;
	z-index: 10;
}

.band {
	width: 100vw;
	padding: 60px 0 60px; 
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5vw;
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 100%;
}

.heading {
	font-size: 6vw;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	max-width: 100%;
}

.heading h1,
.heading h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    margin: 0; 
}

.white-heading {
	color: white;
}

span { color: var(--pomegranatepink); }

.body {
	margin-top: 15px;
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 500;
	text-align: center;
}

.white-body {
	color: white;
}

span { color: var(--pomegranatepink); font-weight: 600;}

.button-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* center on mobile */
	margin: 10px 0;
}

.hero-button {
	color: white !important;
	background-color: var(--pomegranatepink); 
	width: 11em;
	padding: 0.5em;
	margin: 0.5em;
	border-radius: 2em;
	text-align: center;
	font-weight: 600 !important;
}

.hero-button {
	transition: transform 0.3s ease-out;
}

.hero-button:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.hero-image-container {
	margin-left: 0;
	margin-top: 20px;
	max-width: 80%;
}

.hero-image-polaroid {
	background: #fff;
	padding: 20px 10px 40px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(3deg);
	margin-left: 0;
	width: 100%;
}

.hero-image-polaroid img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Larger screens */
@media (min-width:1025px) {
	.hero,
	.band {
		padding: 80px 0 100px;
		max-height: 425px;
	}

	.content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		max-width: 1260px;
		padding: 0 5vw;
	}

	.hero-heading,
	.heading {
		font-size: clamp(3rem,5vw,5rem);
		text-align: left;
		max-width: 600px;
	}

	.body,
	.hero-body {
		font-size: 1.2rem;
		margin-top: 20px;
		text-align: left;
	}

	.hero-image-container {
		margin-left: 0;
		max-width: 480px;
	}

	.hero-image-polaroid {
		transform: rotate(5deg);
		margin-left: 2em;
		width: auto;
	}

	.button-wrapper {
		justify-content: flex-start;
	}

	.hero-button {
		text-align: center;
	}
}

.hero-image-polaroid {
    transform: scale(0.95) rotate(3deg);
    animation: growPolaroid 1s ease-out forwards;
}

@media (min-width:1025px) {
    .hero-image-polaroid {
        transform: scale(0.95) rotate(5deg);
    }
}

@keyframes growPolaroid {
    to {
        transform: scale(1) rotate(3deg);
    }

    /* Desktop override */
    100% {
        transform: scale(1) rotate(5deg);
    }
}

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s ease, transform 1s ease;
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}