@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css? family=Raleway:900&display=swap");
/* giving a lil somtin to Google--> not all bad; Google deserves some credit for the resources that they provide*/ 
*, 
*::before, 
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
	
}


body{ 
	
	background:linear-gradient(155deg, #7c15ff 25%, #c7c798 75%);
 	margin: 0;
/*	border-radius:15px; */
/*	box-shadow: 0px 20px 10px 10px black;*/
	backdrop-filter: blur(3px) saturate(150%);
	background-size: cover;
	background-repeat: repeat;
	background-attachment:fixed;
	padding: 35px 15px;
	
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	-webkit-text-size-adjust:100%;
	-moz-webkit-text-size-adjust:100%;
	-ms-webkit-text-size-adjust:100%;
	-o-webkit-text-size-adjust:100%;
		
}

html{ 
	background: linear-gradient(155deg, #7c15ff 25%, #c7c798 75%);
	overflow-x:hidden;
	
	
}


#mttop{ 
	position:relative; 
	left: 0; 
	right: 0; 
	border-radius: 30px;
	margin: 30px 0px 5px 0px;
	padding-top: 0px;
	width:90%;
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);
	z-index: -1;
	transform: translate(5%, -50%);
	-moz-webkit-transform: translate(5%, -50%);
	-ms-webkit-transform: translate(5%, -50%);
	-o-webkit-transform: translate(5%, -50%);

}

[title]:hover::after{ 
display: block; 
font-size: 36px; 
position: absolute; 
content: attr(tooltip); 
}



.titleText{ 
	height:50vh;
	text-align: center;
	justify-content: center; 
	font-weight: bold;
	font-size:104px;
	right: 100px;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	text-transform: uppercase;
	color:rgba(244,250,255,1.00);
	text-shadow: -10px -1px 10px #eeeeee;
	animation: intro linear forwards 10s; 
/*	animation-delay: 1s;*/
	transition: 10s;
	z-index: 4;
/*	opacity:1;*/
	transform: translateY(20%);
	-moz-webkit-transform: translateY(20%);
	-ms-webkit-transform: translateY(20%);
	-o-webkit-transform: translateY(20%);
}
@keyframes intro{ 
	from { 
	opacity: 0; 
	}to { 
	opacity: 1; 
	}
	
}


.inward {
   	/*stitch this--inspired by Safari developer behavior; 
	transformZ can be edited to balloon at open 50620260521*/
/*	background-image: url("images/DenverLogans.png");*/
	
	min-height:50vh;
	min-width: 100vh;
    align-items:center;
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);
	opacity: .9; 
	background-size: cover;
	transition: 5s;
	background-repeat: no-repeat;
	background-attachment:fixed;
	z-index: 1;
	padding:45px 40px ; 
	margin: 30px 30px;
	border-radius: 28px;
	perspective: 3px;
	animation: introCard linear forwards 3s ; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

@keyframes introCard {
	from  { 
	transform: translateZ(-10px) scale(0); 
	-moz-webkit-transform: translateZ(-10px) scale(0); 
	-ms-webkit-transform: translateZ(-10px) scale(0); 
	-o-webkit-transform: translateZ(-10px) scale(0); 
		
	}
	50%, to{ 
	top: 25%;
		transform: translateZ(20px) scale(1); 
		-moz-webkit-transform: translateZ(20px) scale(1); 
		-ms-webkit-transform: translateZ(20px) scale(1); 
		-o-webkit-transform: translateZ(20px) scale(1); 

	}
}

.card{ 
	text-align:center;
	background: rgba(255, 255, 255, 0.3); 
	backdrop-filter: blur(1px) saturate(120%); 
	padding: 10px 30px; 
	height: 60vh;
	width:50vw;
	border-radius: 28px; 
	border: 1px solid rgba(255, 255, 255, 0.2); 
	box-shadow: 0px 18px 36px 10 rgba(0,0,0, 0.35);
/*
	max-width:100vw;
	max-height: 100vh;
*/
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	bottom: 10px;
	transform-style: preserve-3d;
	perspective: 1px; 
	z-index: -2;
	transition: 20s;
	transform: translateX(50%);
	animation: showCard1 linear forwards 20s; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

@keyframes showCard1 {
	from  { 
	
		transform: translateZ(-10px) scale(0); 
		-moz-webkit-transform: translateZ(-10px) scale(0); 
		-ms-webkit-transform: translateZ(-10px) scale(0); 
		-o-webkit-transform: translateZ(-10px) scale(0); 
	}
}


.inward2 {
   	
	min-height:100vh;
	width: 65%;
	background-image: url("../images/portoCanon.png");
	box-shadow: 5px 7px 10px 8px rgba(52, 60, 34, 0.5);
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
	padding: 20px 30px ; 
	margin: 20px 450px;
	border-radius: 28px;
	perspective: 1px;
	transition: 3s;
	animation: showCard2 linear forwards 3s;
	animation-timeline: view(); 
	animation-delay: entry 0% cover 50%; 

}
@keyframes showCard2{  0%,
	from  { 
	
		transform: translateZ(-10px) scale(0); 
		-moz-webkit-transform: translateZ(-10px) scale(0); 
		-ms-webkit-transform: translateZ(-10px) scale(0); 
		-o-webkit-transform: translateZ(-10px) scale(0); 
	/*this changed the parallax/card dispay but omits the cards
		to stitch: replace cards in the containers and remove the bottom */ 
	} 
	50%, to{ 
	top: 25%;
		transform: translateZ(20px) scale(1); 
		-moz-webkit-transform: translateZ(20px) scale(1); 
		-ms-webkit-transform: translateZ(20px) scale(1); 
		-o-webkit-transform: translateZ(20px) scale(1); 

	}
}

.card1{ 
	
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 80px; 
	border-radius: 24px; 
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 1000px;
	max-heignt: 1000px;
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	right: 25px;
	transform: translateY(-20%);
	animation: showCardIn1 show linear; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 30%; 
	
	
}

	@keyframes showCardIn1 { 0%, 
	from { 
	opacity: 0; 
	transform: translateZ(90px) scale(0.8); 
	filter: blur(10px); 
	}100%, to{ 
	opacity: 1; 
	transform: translateZ(0) scale(1); 
	filter: blur(0); 
	}
}

.card2{ 
	
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 100px; 
	border-radius: 24px; 
	left: 900px;
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 700px;
	max-heignt: 750px;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	z-index: 2; 
	position:sticky;
/*	transform: translateY(-200%);*/
	animation: showCardOut1 linear forwards; 
	transition: 3s;
	animation-timeline: view(); 
	animation-range: entry 0% cover 30%; 
}

@keyframes showCardOut1 {0%, 
	from { 
	opacity: 0; 
	transform: translateZ(90px) scale(0.8); 
	filter: blur(10px); 
	}100%, to{ 
	opacity: 1; 
	transform: translateZ(0) scale(1); 
	filter: blur(0); 
	}
/*
	from  { 
	
	transform: translateZ(10px) scale(.5); 
		-moz-webkit-transform: translateZ(10px) scale(.5);
		-ms-webkit-transform: translateZ(10px) scale(.5);
		-o-webkit-transform: translateZ(10px) scale(.5);
	}
*/
}

.inwardMid{ 
	background-image: url("../images/displayMethod.jpg");
	backdrop-filter: blur(1px) saturate(120%); 
	padding: 5px 5px; 
/*	top: 50px;*/
	height:100vh;
	border-radius: 28px; 
	border: 1px solid rgba(255, 255, 255, 0.1); 
	box-shadow: 12px 10px 24px 10 white;
	max-width: 50vw;
	max-height: 100vh;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	bottom: 20px;
	margin: 0px 15px 5px 10px ;
	transform-style: preserve-3d;
	perspective: 1px; 
	z-index: -1;
/*	transform: translateY(-50%);*/
	animation: showCardIn1 linear forwards ; 
	transition: 3s;
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

	@keyframes showCardIn1 {0%, 
	from { 
	opacity: 0; 
	transform: translateZ(90px) scale(0.8); 
	filter: blur(10px); 
	}100%, to{ 
	opacity: 1; 
	transform: translateZ(0) scale(1); 
	filter: blur(0); 
	} 
	
}



.inward3 {
   	background-image:url("../images/canoeMountains.jpeg");
	height:100vh;
	width: 50%;
    display:hidden;
    align-items:center;
	box-shadow: 5px 7px 10px 8px rgba(52, 60, 34, 0.5);
	background-size: cover;
	background-repeat: repeat;
	left: 50%;
	z-index: 1;
	bottom: 20px;
	border-radius: 25px;
	perspective: 1px;
	transition: 3s;
	position:relative;
	
	animation: showCard3 linear forwards ;
	animation-timeline: view(); 
	animation-delay: entry 0% cover 50%; 

}



 .card3{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 100px; 
	border-radius: 24px; 
	left: 125px;
	top: 175px;
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 900px;
	max-heignt: 650px;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	z-index: 2; 
	position:sticky;
	transform: translateY(25%);
	animation: showCard3 linear forwards ; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

} 


@keyframes showCard3{  0%,
	from  { 
 
	transform: translateZ(0px) scale(0); 
		-moz-webkit-transform: translateZ(0px) scale(0); 
		-ms-webkit-transform: translateZ(0px) scale(0); 
		-o-webkit-transform: translateZ(0px) scale(0); 
	/*this changed the parallax/card dispay but omits the cards
		to stitch: replace cards in the containers and remove the bottom */ 
	} 
	50%,  to{ 
	 
		transform: translateZ(20px) scale(1); 
		-moz-webkit-transform: translateZ(20px) scale(1); 
		-ms-webkit-transform: translateZ(20px) scale(1); 
		-o-webkit-transform: translateZ(20px) scale(1); 
	}
}

#date{
	position: fixed; 
	bottom: 2px; 
	width:100%; 
	color:rgba(255,255,255,0.9);
	font-size:12px;
	text-align:  center;
	z-index: 4;
	
	
}

/* Google Gemini suggested RWD edits-these resolved some issues but images are still not resizing properly on iPad and iPhone  */
@media screen and (max-width: 768px) {
    body {
        padding: 1rem 0.5rem;
        border-radius: 0;
    }

    .inward, .inward2, .inward3, .inwardMid {
        padding: 1.25rem 0.75rem;
        margin: 1.5rem auto;
        border-radius: 16px;
        /* Disable fixed attachments on mobile for better scrolling performance */
        background-attachment: scroll; 
    }

    .card, .card1, .card2, .card3 {
        padding: 1.25rem;
        border-radius: 16px;
    }
}