html,
body {
  height: 100%;
  margin: 0;
}

.OfftheGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	background-color: black;
	background-image: url("../Content/Mountain_andy_betts.png");
	/*
	background-image: 
	linear-gradient(90deg, rgba(0, 255, 255, 0.2) 1px, transparent 1px),
	linear-gradient(0deg, rgba(0, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: gridScroll 5s linear infinite;
	*/
	/*Parallax Effect*/
	background-attachment: fixed;
	background-position: center;
	/*background-repeat: repeat;*/
	/*background-size: 50px 50px;*/
	
}

@keyframes gridScroll {
	from { background-position: 0 0; }
	to { background-position: 50px 50px; }
}

.title{
	display: flex;
	color: white;
	font-size: 150px;
	position: absolute;
	z-index: 10;
	font-family: "Orbitron", sans-serif;
	border-style: double;
	border-color:White;
	background-color: black;
	opacity:0.8;
	padding: 50px; 
		animation: slideIn 1s ease-out;
	animation-timeline: view();
	animation-range: entry 20% cover 40%; 
	
	
}

.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 68px;
  color: white;
  animation: bounce 1.5s infinite;
  z-index: 20;
}



.fypImage {
	display: flex;
	flex:1;
	align-items: center;
	justify-content: center;
}

.fypImage img {
  width: 80%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fypTextContainer{
	display: flex;
	flex:1;
	flex-direction:column;
}

.fypHeading {
	display: flex;
	flex: 1;
	font-size: 75px;
	align-items: center;
	justify-content: center;
	color : white;
	scale:0.8;
	
	
	/*Additional settings for JS attempt */	
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

	/* New Attempt  at animation using JS*/
	.fypHeading.in-view {
	opacity: 1;
	transform: translateY(0);
}

.ProjectsWrapper {
    display: flex;
    flex-direction: column;
    height: 400vh; /* enough for all 3 sections */
    background-image: 
        linear-gradient(90deg, rgba(0, 255, 255, 0.2) 3px, transparent 1px),
        linear-gradient(0deg, rgba(0, 255, 255, 0.2) 3px, transparent 1px);
    background-size: 50px 50px;
    animation: gridScroll 5s linear infinite;
    background-color: black;
}

.fypContainer,
.Project2Container,
.Project3Container {
    display: flex;
    height: 125vh;
    width: 100%;
}

/* Keep layout differences */
.fypContainer {
    flex-direction: row;
}
.Project2Container {
    flex-direction: row-reverse;
}
.Project3Container {
    flex-direction: row;
}


.Project2Container .fypImage img {
    scale:0.7;   /* scale down */
    height: auto; /* keep aspect ratio */
}








.fypTextBody {
	display: flex;
	font-size: 25px;
	flex: 2;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	color : white;
}





.textBox {
	border: 5px solid white;
	padding: 50px;
	max-width: 80%; /* or set a fixed width like 400px */
	word-wrap: break-word;
	box-sizing: border-box;
	background-color:black;
	
	/*Additional settings for JS attempt */	
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	
	scale:0.8;
	
	
	
	/*Added attempt at animation
	animation: slideIn 1s ease-out;
	animation-timeline: view(); /* Tied to scroll position 
	animation-range: entry 20% cover 40%;  Starts animating when 20% in view */
	
	/* New Attempt */

	
	
	
}
/* New Attempt  at animation using JS*/
.textBox.in-view {
  opacity: 1;
  transform: translateY(0);
}



/*Copied From Project Page*/

.return {
	display: flex;
	height:25vh;
	align-items: center;
	justify-content: center;
}

.returnBox {
	display: flex;
	Width: 25%;
	Height: 50%;
	justify-content: center;
	align-items: center;  
}

.returnButton{
	height: 80%;
	width: 80%;
	background-color: black;
	transition: all 0.3s ease;
	font-size:24px;
	padding: 5px 5px;
	color:white;
	border-style: solid;
	font-size: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 5px solid white;
	transform: scale(1);
	cursor: pointer;
}

.returnButton:hover {
	transform: scale(1.3);
	border-color: white;
	background-color: #252526
}




@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


@media (max-width: 900px)  {
	.OffTheGrid {
		height: 25vh;
	}
	
	.fypContainer,.Project2Container,.Project3Container {
		display: flex;
		flex-direction: column;
		background-size: 250px 250px;
		height:95vh;
		
		
	}
	.ProjectsWrapper {
		height: 325vh;
	}
	.title{
		font-size:50px;
	}
	.scroll-down{
		font-size:50px;
	}
	
	.fypHeading {
		scale:0.5;
	}
	
	.textBox {
	border: 5px solid white;
	padding: 15px;
	max-width: 90%; /* or set a fixed width like 400px */
	word-wrap: break-word;
	box-sizing: border-box;
	background-color:black;
	font-size:15px;
	
	/*Additional settings for JS attempt */	
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	
	scale:0.9;
}

.returnBox {
	display: flex;
	Width: 75%;
	Height: 30%;
	justify-content: center;
	align-items: center;  
}

.returnButton{
	font-size:28px;
}

	
}