/* hero section styles */
#hero {
	background: rgb(183,138,72); /* fallback */
	background: linear-gradient(135deg, rgba(183,138,72,1) 0%, rgba(81,61,31,1) 100%);
	background-position: bottom;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 0; /* put hero behind other sections */
}

#hero > img {
	max-height: 75%;
	max-width: 70%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#hero-foreground {
	animation-name: blur-out;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: backwards;
	backdrop-filter: blur(5px);
	position: fixed;
}

#hero h1, #hero h2, #hero a {
	animation-name: fade-and-drop-in;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: both;
	color: inherit;
	text-decoration: none;
}

#hero a { animation-delay: 2.5s; }

section.first-section { box-shadow: 0px -8px 6px 0px rgba(0, 0, 0, 0.50); }


/* portfolio section styles */
.portfolio-teaser {
	width: 100%; 
	height: 100vh;
    background-image: url("../images/portfolio-teaser-horizontal.png");
	background-position: center;
	background-size: cover;
}

#portfolio-1 {
	background-image: url("../images/jordan-delta-camosun-2024-delta-cheese-app-pairing.png");
	background-position: center;
	background-size: cover;
}

#portfolio-2 {
	background-image: url("../images/jordan-delta-spectrum-2019-dont-breakout.png");
	background-position: center;
	background-size: cover;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.50);
}

#portfolio-3 {
	background-image: url("../images/jordan-delta-camosun-2024-notan-tree.png");
	background-position: center;
	background-size: cover;
}

@media (min-width: 768px) {
	.portfolio-teaser { 
		height: calc(100vh/2);
	}
}