@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*/ 
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
	
}

body{ 
	
	background-color:rgba(0,0,0,1.00);
 	background-image: url("../pics/DenverLogans.png");
	box-shadow: 0px 20px 10px 10px black;
	backdrop-filter: blur(3px) saturate(150%);
	background-size: cover;
	background-repeat: repeat;
	background-attachment:fixed;
	padding:10px 20px ; 
		
} 



html{
	
    -webkit-text-size-adjust:100%;
}

.titleText{ 
	height:100vh;
	text-align: center;
	justify-content: center; 
	font-weight: bold;
	font-size:96px;
	right: 100px;
	font-family: "Raleway"; 
	text-transform: uppercase;
	color:rgba(80,91,90,0.97);
	text-shadow: 2px 5px 5px antiquewhite;
	animation: intro 3s linear forwards; 
	animation-delay: 1s;
	transition: 3s;
	opacity:0;
	transform: translateY(25%);
}
@keyframes intro{ 
	from { 
	opacity: 0; 
	}to { 
	opacity: 1; 
	}
	
}


.inward {
   	
	min-height:100vh;
	min-width: 100vh;
    display:hidden;
    align-items:center;
	background-image: url("../pics/download-2026-04-26T11_37_23.jpg");
	
	box-shadow: 5px 7px 10px 8px rgba(52, 60, 34, 0.5);
	background-size: cover;
	transition: 3s;
	background-repeat: no-repeat;
	background-attachment:fixed;
	z-index: 1;
	padding:20px 30px ; 
	margin: 10px 20px;
	border-radius: 28px;
	perspective: 3px;
	animation: introCard linear forwards ; 
	
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
	
	

}

@keyframes introCard {
	from  { 
	
	transform: translateZ(0px) scale(0); 
	}
}




.card{ 
	text-align:center;
	background: rgba(255, 255, 255, 0.1); 
	backdrop-filter: blur(1px) saturate(120%); 
	padding: 72px 5px; 
	height: 75vh;
	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-heignt: 100vh;
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	right: 25px;
	transform-style: preserve-3d;
	perspective: 1px; 
	z-index: -2;
	transition: 3s;
	animation: showCard1 linear forwards ; 
	
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
	

}

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

.cardIn{ 
	
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(1px) saturate(120%); 
	padding: 50px 5px; 
	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-heignt: 100vh;
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	right: 75px;
	transform-style: preserve-3d;
	perspective: 1px; 
	z-index: -1;
	animation: showCardIn1 linear forwards; 
	transition: 3s;
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

	@keyframes showCardIn1 {
	from  { 
	
	transform: translateZ(10px) scale(.5); 
	/*this changed the parallax/card dispay but omits the cards
		to stitch: replace cards in the containers and remove the bottom */ 
	} 
	/* to{ 
	top: 50%;
		transform: translateZ(10px) scale(.5); 
	}*/
	
}

.cardOut{ 
	
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(1px) saturate(120%); 
	padding: 50px 5px; 
	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-heignt: 100vh;
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	left: 575px;
	transform-style: preserve-3d;
	perspective: 1px; 
	z-index: -1;
	animation: showCardIn1 linear forwards; 
	transition: 3s;
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

@keyframes showCardOut1 {
	from  { 
	
	transform: translateZ(10px) scale(.5); 
	}
}
.inward2 {
   	
	min-height:100vh;
    display:hidden;
    align-items:center;
	background-image: url("images/canoeMountains.jpeg");
	box-shadow: 5px 7px 10px 8px rgba(52, 60, 34, 0.5);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment:fixed;
	z-index: 0;
	padding: 20px 30px ; 
	margin: 20px 30px;
	border-radius: 28px;
	perspective: 1px;
	transition: 3s;
	animation: showCard2 linear forwards 5s;
	animation-timeline: view(); 
	animation-delay: entry 0% cover 50%; 

}

.card2{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 20px; 
	border-radius: 28px; 
	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: 0px;
	
	z-index: 1;
	transition: 3s;
	animation: showCard2 linear forwards ; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

}

.cardIn2{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 20px; 
	border-radius: 28px; 
	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: 0px;
	
	z-index:2;
	transition: 3s;
	animation: showCard2 linear forwards; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

}

@keyframes showCard2{  0%,
	from  { 
	bottom: 10%; 
	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); 

	}
}


.inward3 {
   	
	min-height:100vh;
    display:hidden;
    align-items:center;
	background-image:url("images/blanket.jpeg");
	box-shadow: 5px 7px 10px 8px rgba(52, 60, 34, 0.5);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment:fixed;
	z-index: 2;
	padding: 20px 30px ; 
	margin: 20px 30px;
	border-radius: 25px;
	perspective: 1px;
	transition: 3s;
	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: 20px; */ 
	border-radius: 100px; 
	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: 0px;
	
	z-index: 3;
	transition: 3s;
	animation: showCard3 linear forwards ; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 
}

 .cardIn3{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
/*	padding: 20px; */ 
	border-radius:50% ;
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 750px;
	max-heignt: 500px;
	
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	left:450px;
	transition: 3s;
	z-index: 4;
	
	animation: showCard3 linear forwards ; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

} 


@keyframes showCard3{  0%,
	from  { 
	bottom: 10%; 
	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); 
	}
}




.sidenav{
	height: 100%; /*full height of the document*/ 
	width:0; /* width to be changed with JS */ 
	position: fixed; /*stays in place */
	top:0;  
	left:0; 
	z-index: 4; /*stays on the top layer*/
	background-color:rgba(255, 255, 255, 0.05);  
	overflow-x:hidden; /*no horizontal scroll*/
	padding-top: 60px; /*keeps content 60 pixels from the top */ 
	transition: 0.5s; 
	font-family: "Raleway";
	color:rgba(228,231,227,1.00); 
	
	
}

.sidenav a, .dropdownbtn{ 
	padding: 6px 8px 6px 16px; 
	text-decoration: none; 
	font-size: 20px; 
	color:rgba(228,231,227,1.00); 
	display: block;
	border: none; 
	width: 100%; 
	text-align: left; 
	cursor: pointer; 
	outline: none;
	
}

.sidenav a{ 
	padding: 8px 8px 8px 32px; 
	text-decoration: none; 
	font-size: 25px; 
	color: #f1f1f1; 
	display: block; 
	transition: 0.3s; 
}

.sidenav a:hover, .dropdownbtn:hover { 
	color:darkslategray; 
}

.sidenav .closebtn { 
	position: absolute; 
	top: 0; 
	font-size: 36px; 
	 
}

.openbtn{ 
	cursor: pointer;
	border-radius: 5px; 
	top:2px; 
	left: 15px;
	font-size: 24px; 
	color: rgba(255,254,254,1.00); 
	background-color: transparent;
	padding: 10px 15px; 
	border:none; 
	background-attachment: absolute;
	background-repeat: no-repeat;
	position:absolute;

}

.openbtn:hover{ 
	background-color: #444; 
}

.dropdown-container{ 
	display:none; 
	background-color: transparent; 
	padding-right: 8px; 
}

.fa-caret-down{ 
	float:right; 
	padding-right: 8px; 
}

.nav input[text=text] {
	position:left; 
	padding-left: 10px;
	display: inline-block;
	border: none; 
	font-size:17px;
	background-color: black;
	
	/*to stitch : hide and display the navbar after ckicking the icon*/ 
}

#main{ 
	
	transition: margin-left .5s; 
	padding: 0px 20px;
}

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


@media screen and (max-height: 767px) { 
	.sidebar{ padding-top: 15px;} 
	.sidebar a {font-size: 18px;}
	}