/*
 * Author: Caleb Bronn
 * Last Update: 8 Apr 2025

 * This page contains styling that applies to the DougDoug Charity Streams page
 */

.hero-page header {
	min-width: 14em;
	/* Calculate remaining width because, on this page specifically, there is no 100vmin 
	square element to take up the rest of the space. So we just pretend like there is :P */
	max-width: calc(100vw - 100vmin);
	background-color: rgba(0, 0, 0, 0.7);
}

@media screen and (orientation: portrait) {
	/* Move header to be below the image in portrait view */
	.hero-page header {
		min-width: 0;
		max-width: 100vw;
		margin-top: 100vmin;
	}
}

.hero-page header ul {
	grid-template-columns: 1fr 1fr;
}

/* Similar to the shadow on the homepage, except this one is on the left. */
.shadow-left {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
/* Apply shadow only on wide screens */
@media screen and (orientation: landscape){
	.shadow-left::after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100vmin;
		box-shadow: inset 200px 0 200px #000;
	}
}

/* Change background positioning so Rosa and Doug are always in the center */
.hero-page .hero-img {
	object-position: 40% 50%;
}


/* Pretty self-explanatory: the element takes up the entire screen, is placed 
behind the <header>, and the animation decreases the width to 0 when the page loads,
creating a sliding curtain effect */
#slide-out-curtain {
	position: absolute;
	top: 0;
	z-index: -1;
	height: 100vmin;
	width: 0;
	background-color: #000;
	box-shadow: 100px 0 100px #000;
	animation: slideLeft 2s ease-out;
}

@keyframes slideLeft {
	from {
		width: 100vw;
	}
	to {
		width: 0;
	}
}

/***************
 * GRAND TOTAL *
 ***************/

#grand-total {
	width: 60%;
	margin: auto;
	border-radius: 10px;
	border: 2px solid #fff;
	/* Padding responds to screen size so that the text always fits */
	padding: min(10%, 3rem);
}

@media screen and (width < 700px) {
	#grand-total {
		width: 100%;
	}
}

#grand-total h2 {
	text-align: center;
	font-size: min(2.5rem, 10vw);
	color: #fff;
	border-bottom: 2px solid #fff;
}

@media screen and (width < 700px) {
	#grand-total h2 {
		width: 100%;
	}
}

#grand-total p {
	margin-top: 2rem;
	text-align: center;
	color: var(--mba-blue);
	/* Again, these are just the magic numbers that work for this text */
	font-size: max(4vw, 2rem);
}

/* Change dollar sign to a yellowish-orange color */
#grand-total p::first-letter {
	color: var(--saffron);
}