/* Global Styles */
body {
    background: var(--background);
    /* font-family: 'Anton', sans-serif; */
    margin: 0;
    padding: 0;
}

/* Header */
.LandingHeader {
    background: var(--red);
    padding: calc(var(--padding) * 2) var(--padding);
	background: var(--red); /* Keep the red background */
    padding: 0; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%; 
    text-align: center; 

}

/* Arrow on header */
.scroll-arrow {
    position: absolute; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    animation: bounce 1.5s infinite;
}

.scroll-arrow .arrow {
    width: calc(var(--base-size)*4);
    height: calc(var(--base-size)*4);
    border: solid var(--background); 
    border-width: 10px 10px 0 0; 
    transform: rotate(90deg);
    margin: 0 auto;
	margin-bottom: calc(var(--padding)*2);
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(45deg);
    }
    50% {
        transform: translateX(-50%) translateY(10px) rotate(45deg); /* Move down slightly */
    }
}

/* Basic header styles */

.FirstTitle {
    font-family: 'Climate Crisis';
    font-size: calc(var(--base-size) * 4.2);
    margin: 0;
    color: var(--background);
}

.MiddleTitle {
    font-family: 'Anton';
    font-size: calc(var(--base-size) * 1.4);
    letter-spacing: 8px;
    margin: 10px 0;
    text-align: center;
    color: var(--background);
}

/* header animations */
.FirstTitle {
	line-height: 0.4;
	display: inline-block;
	transition: all 0.5s ease; 
	color: var(--background);
	text-decoration: none; 
	font-weight: bold;
	-webkit-text-stroke: 0px; 
}

.FirstTitle {
	animation: 
		fadeInLargeText 2s ease-in-out forwards 1.5s, 
		textStrokeEffect 4s infinite ease-in-out;
		opacity: 0; 
}

@keyframes fadeInLargeText {
	0% {
		opacity: 0; 
		transform: translateY(10px); 
	}
	100% {
		opacity: 1; 
		transform: translateY(0); 
	}
}

@keyframes textStrokeEffect {
	0%, 100% {
		-webkit-text-stroke: 0px; 
		/* color: var(--background); */
	}
	50% {
		-webkit-text-stroke: 2px #FFF6E5; 
		color: transparent; 
	}
}

.MiddleTitle {
	display: inline-block;
	letter-spacing: calc(var(--base-size) * 2);
	animation: letterSpacingLoop 4s infinite ease-in-out;
}

@keyframes letterSpacingLoop {
	0% {
		letter-spacing: calc(var(--base-size) * 2);
	}
	50% {
		letter-spacing: 2px;
	}
	100% {
		letter-spacing: calc(var(--base-size) * 2);
	}
}



.text-content{
	height: 100vh;
    width: 100%; 
	display: flex;
	justify-content: center;
	align-items: center;
    text-align: center; 
	padding: 0;
}



/* Glyph Styles */
		.icon1 {
			font-family: 'Climate Crisis', sans-serif;
			color: var(--red);
			text-decoration: line-through;
			-webkit-text-stroke: 2px var(--background);
		}
	
		.icon2 {
			font-family: 'Climate Crisis', sans-serif;
			color: var(--red);
			transform: rotate(-12deg);
			text-underline-offset: 30px;
		}
	
		.icon3 {
			font-family: 'Climate Crisis', sans-serif;
			color: var(--red);
			text-decoration: overline;
		}
	


/* All mobile media queries */
@media (max-width: 800px) {

	.LandingHeader {
        height: 100vh; 
        display: flex;
        flex-direction: column;
		
    }


    .FirstTitle {
        font-size: calc(var(--base-size) * 3.5); 
        margin-bottom: calc(var(--padding) * 1); 
    }

    .MiddleTitle {
        font-size: calc(var(--base-size) * 1.5); 
        margin-top: calc(var(--padding) * 1); 
		letter-spacing: calc(var(--base-size) * 1); 
		font-weight: lighter;
		animation: none;
    }


	.FirstTitle {
		animation: 
			textPulse 3s infinite ease-in-out; 
	}
	
	@keyframes textPulse {
		0%, 100% {
			transform: scale(1); 
			opacity: 1; 
		}
		50% {
			transform: scale(1.1); 
			opacity: 0.8; 
		}
	}


.MiddleTitle {
	animation: none; 
}

.text-content{
	height: 80vh;
	text-align: left;
}


	/* Glyph Styles for mobile */
	.icon1, .icon2, .icon3{
		font-size: calc(var(--base-size)*3);
		margin-right: 10px;
		margin-left: var(--padding);
		display: block; 
		animation: rotationalPulse 2s infinite ease-in-out;
	}

.icon3{
	text-decoration-thickness: 8px;
}

@keyframes rotationalPulse {
    0%, 100% {
        transform: rotate(0deg); 
    }
    50% {
        transform: rotate(10deg); 
    }
}

/* Article Links */
.article-links ol {
    list-style: none; 
    margin: 0;
    padding: 0;
	margin-top: calc(var(--padding)*2);
	margin-bottom: calc(var(--padding)*4);
}

.article-links li {
    display: block;
    text-align: center; 
	margin-bottom: 20px;
	padding-top: 10px;
	border-top: 2px solid #DD1E26; 
}

/* Default Text */
.article-links .default-text {
    font-family: 'Anton', sans-serif;
    font-weight: bold; 
    font-size: calc(var(--base-size)*2);
	color: var(--red);
    text-transform: uppercase; 
    letter-spacing: 2px; 
	margin-top: var(--base-size);
	text-align: center;
	display: block;
}


.article-links .hover-text {
    display: none; 
}

.big-footer {
    padding: 20px 10px; 
    text-align: center;
  }

  .footer-thankyou h5 {
    font-size: calc(var(--base-size) * 3); 
    margin-bottom: 20px; 
  }

  .footer-links h3,
  .footer-colophon h3 {
    font-size: calc(var(--base-size) * 2); 
    margin-bottom: 10px;
  }


  .footer-links a{
	font-size: var(--base-size);
  }


  .footer-content {
    flex-direction: column; 
    text-align: center; 
    gap: 20px;
  }

  .footer-links,
  .footer-colophon {
    margin: 0 auto; 
    width: 100%; 
  }

  .footer-glyphs .glyph {
    width: 3px; 
    height: 50px; 
    gap: 15px; 
  }

  .back-to-top{
	font-family: 'Anton';
  }
   
}


  /* Trying to make landing page fluid */

@media (min-width:800px) and (max-width:1200px){


	.FirstTitle {
		font-size: calc(var(--base-size) * 8);
	}

	.MiddleTitle {
		font-size: calc(var(--base-size) * 3);
	}



	.text-content p {
		max-width: 70vw;
        font-size: var(--base-size);
		text-align: left;
		margin: calc(var(--padding) * 1.5) 0;
    }

		/* Article Links Section */
		.article-links {
			display: flex;
			flex-direction: column; 
			gap: 30px; 
			width: 100%;
			max-width: 800px;
			margin: 50px auto 0 auto; 
			padding: 0;
			width: 100vw; 
		}
	
		.article-links ol {
			padding: 0;
			margin: 0;
		}
	
		.article-links li {
			list-style: none;
			display: flex; /* Horizontal layout for glyph and text */
			align-items: center; /* Vertically align glyph and text */
			gap: 20px; /* Space between glyph and text-box */
			position: relative;
			width: 100%; /* Make the row span full width */
		}
		
		.article-links a {
			width: 100%; /* Ensure link spans full width */
		}


		/* Glyph Styles for desktop */
		.icon1 {
			font-size: 100px; /* Large glyph */
			margin-right: 20px;
			transition: all 0.3s ease-in-out;
		}
	
		.icon2 {
			font-size: 100px; /* Large glyph */
			margin-right: 20px;
			transition: all 0.3s ease-in-out;
		}
	
		.icon3 {
			font-size: 100px; /* Large glyph */
			margin-right: 20px;
			text-decoration-thickness: 18px;
			transition: all 0.3s ease-in-out;
		}
	
		/* Hover Effect for lists!!!!! */
		li:hover,
		li:hover,
		li:hover{
			color:var(--background);
			background-color: black; /* Background turns black */
			padding: 10px; /* Add some padding to emphasize the change */
		}
		/* li:hover .icon1,{
			color: var(--background);
			-webkit-text-stroke: 2px var(--background);

		} */

		li:hover .icon1, li:hover .icon2, li:hover .icon3{
			color: var(--background);
			-webkit-text-stroke: 2px var(--background);

		}

		.text-box {
			display: flex; /* Ensure the box is a flex container */
			flex: 1; /* Take up remaining horizontal space */
			justify-content: flex-start; /* Align text inside to the left */
			flex-direction: column;
			align-items: flex-start;
		}
		
		.default-text {
			font-family: 'Anton';
			text-transform: capitalize;
			text-decoration: line-through;
			font-size: calc(var(--base-size) * 6);
			color: var(--red);
			opacity: 1; /* Visible by default */
			transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
		}
		
	
		/* Hover Text */
		.hover-text {
			display: flex;
			flex-direction: column; /* Align text horizontally */
			align-items: flex-start;
			width: 100%;
			font-family: 'Courier Prime', monospace;
			font-size: 24px;
			color: var(--background);
			opacity: 0; /* Hidden by default */
			visibility: hidden; /* Hidden by default */
			transform: translateX(-10px); /* Start slightly offset for animation */
			transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
		}
	
		.hover-text .title {
			font-family: 'Anton';
			font-size: calc(var(--base-size)*3);
		}
			


		/* Add Diagonal Arrow to Hover Text */
		.hover-text::after {
			content: " →";
			font-size:100px;
			margin-left: 8px;
			line-height: 1;
			font-family: 'Courier New', monospace; 
			font-weight: bold;        
			transform: rotate(-45deg);   /* Rotate to make it diagonal */
			display: inline-block;      /* Ensure it's treated like a block for transformations */
			color: #FF5733;             /* Custom color for the arrow */
			transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover effect */
		}
		

		li:hover .hover-text::after {
			transform: rotate(0deg);  
			color: var(--background);  
			text-align: right;
		}

	
		/* Hover Effect for Text */
		li:hover .default-text {
			opacity: 0; 
			visibility: hidden;
			transform: translateX(10px); 
		}
	
		li:hover .hover-text {
			opacity: 1; 
			visibility: visible;
			transform: translateX(0); 
		}
	
		
		li + li {
			border-top: 1px solid var(--red); 
			padding-top: 20px;
		}
	


		.default-text {
			opacity: 1;
			visibility: visible;
			position: absolute; 
			transition: opacity 0.3s ease, visibility 0.3s ease;
			white-space: nowrap; 
		}
		
		li:hover .default-text {
			opacity: 0; 
			visibility: hidden; 
			position: absolute; 
		}
		
		.text-box {
			display: flex;
			flex-direction: column; 
			justify-content: flex-start;
			align-items: flex-start; 
			position: relative;
			overflow: hidden; 
		}
		
		.hover-text {
			position: relative;
			top: 0; 
			left: 0; 
			opacity: 0; 
			visibility: hidden; 
			transition: opacity 0.3s ease, visibility 0.3s ease;
		}
		
		li:hover .hover-text {
			opacity: 1; 
			visibility: visible; 
		}

		.footer-thankyou h5 {
			font-size: calc(var(--base-size) * 7); 
			margin-bottom: 20px; 
		  }

		  .back-to-top{
			font-family: 'Anton';
		  }

}












/* REST OF DESKTOP MEDIA QUERIES */

 @media (min-width: 1200px) {
	.LandingHeader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: calc(var(--padding) * 10);
        padding-bottom: calc(var(--padding) * 10);
		
    }



	.FirstTitle {
		font-size: calc(var(--base-size) * 12);
	}

	.MiddleTitle {
		font-size: calc(var(--base-size) * 4);
	}


    .text-content {
        max-width: 50vw;
        margin: 0 auto;
        text-align: left;
        line-height: 1.6;
        color: var(--background);
        padding: calc(var(--padding) * 2);
    }

    .text-content p {
        font-size: 20px;
        margin: calc(var(--padding) * 1.5) 0;
    }

    body {
        background: var(--background);
        font-family: 'Anton', sans-serif;
        margin: 0;
        padding: 0;
    }

 


		/* Article Links Section */
		.article-links {
			display: flex;
			flex-direction: column; /* Vertical stack */
			gap: 30px; /* Space between rows */
			width: 100%;
			max-width: 1200px;
			margin: 50px auto 0 auto; /* Centered */
			padding: 0;
			width: 100vw; /* Force the container to span the full viewport width */
		}
	
		.article-links ol {
			padding: 0;
			margin: 0;
			margin-bottom: calc(var(--padding)*4);
		}
	
		.article-links li {
			list-style: none;
			display: flex; /* Horizontal layout for glyph and text */
			align-items: center; /* Vertically align glyph and text */
			gap: 20px; /* Space between glyph and text-box */
			position: relative;
			width: 100%; /* Make the row span full width */
		}
		
		.article-links a {
			width: 100%; /* Ensure link spans full width */
		}


		/* Glyph Styles for desktop */
		.icon1 {
			font-size: 140px; /* Large glyph */
			margin-right: 20px;
			transition: all 0.3s ease-in-out;
		}
	
		.icon2 {
			font-size: 140px; /* Large glyph */
			margin-right: 20px;
			transition: all 0.3s ease-in-out;
		}
	
		.icon3 {
			font-size: 140px; /* Large glyph */
			margin-right: 20px;
			text-decoration-thickness: 18px;
			transition: all 0.3s ease-in-out;
		}
	
		/* Hover Effect for lists!!!!! */
		li:hover,
		li:hover,
		li:hover{
			color:var(--background);
			background-color: black; /* Background turns black */
			padding: 10px; /* Add some padding to emphasize the change */
		}
		/* li:hover .icon1,{
			color: var(--background);
			-webkit-text-stroke: 2px var(--background);

		} */

		li:hover .icon1, li:hover .icon2, li:hover .icon3{
			color: var(--background);
			-webkit-text-stroke: 2px var(--background);

		}

		.text-box {
			display: flex; /* Ensure the box is a flex container */
			flex: 1; /* Take up remaining horizontal space */
			justify-content: flex-start; /* Align text inside to the left */
			flex-direction: column;
			align-items: flex-start;
		}
		
		.default-text {
			font-family: 'Anton';
			text-transform: capitalize;
			text-decoration: line-through;
			font-size: calc(var(--base-size) * 8);
			color: var(--red);
			opacity: 1; /* Visible by default */
			transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
		}
		
	
		/* Hover Text */
		.hover-text {
			display: flex;
			flex-direction: column; /* Align text horizontally */
			align-items: flex-start;
			width: 100%;
			font-family: 'Courier Prime', monospace;
			font-size: 24px;
			color: var(--background);
			opacity: 0; /* Hidden by default */
			visibility: hidden; /* Hidden by default */
			transform: translateX(-10px); /* Start slightly offset for animation */
			transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
		}
	
		.hover-text .title {
			font-family: 'Anton';
			font-size: calc(var(--base-size)*4);
		}
			


		/* Add Diagonal Arrow to Hover Text */
		.hover-text::after {
			content: " →";
			font-size:150px;
			margin-left: 8px;
			line-height: 1;
			font-family: 'Courier New', monospace; 
			font-weight: bold;        
			transform: rotate(-45deg);   /* Rotate to make it diagonal */
			display: inline-block;      /* Ensure it's treated like a block for transformations */
			color: #FF5733;             /* Custom color for the arrow */
			transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover effect */
		}
		

		li:hover .hover-text::after {
			transform: rotate(0deg);  
			color: var(--background);  
			text-align: right;
		}

	
		/* Hover Effect for Text */
		li:hover .default-text {
			opacity: 0; 
			visibility: hidden;
			transform: translateX(10px); 
		}
	
		li:hover .hover-text {
			opacity: 1; 
			visibility: visible;
			transform: translateX(0); 
		}
	
		
		li + li {
			border-top: 1px solid var(--red); 
			padding-top: 20px;
		}
	


		.default-text {
			opacity: 1;
			visibility: visible;
			position: absolute; 
			transition: opacity 0.3s ease, visibility 0.3s ease;
			white-space: nowrap; 
		}
		
		li:hover .default-text {
			opacity: 0; 
			visibility: hidden; 
			position: absolute; 
		}
		
		.text-box {
			display: flex;
			flex-direction: column; 
			justify-content: flex-start;
			align-items: flex-start; 
			position: relative;
			overflow: hidden; 
		}
		
		.hover-text {
			position: relative;
			top: 0; 
			left: 0; 
			opacity: 0; 
			visibility: hidden; 
			transition: opacity 0.3s ease, visibility 0.3s ease;
		}
		
		li:hover .hover-text {
			opacity: 1; 
			visibility: visible; 
		}

		/* Footer desktop sizes */
		.big-footer {
			padding: 20px 10px; /* Reduce padding */
			text-align: center; /* Ensure content is centered */
		  }
		
		  .footer-thankyou h5 {
			font-size: calc(var(--base-size) * 10); /* Smaller heading size */
			margin-bottom: 20px; /* Adjust spacing */
		  }
		
		  .footer-links h3,
		  .footer-colophon h3 {
			font-size: calc(var(--base-size) * 3); /* Smaller subheading size */
			margin-bottom: 10px;
		  }
		
		  .footer-links a {
			font-size: 1.2rem; /* Reduce link font size */
			margin-left: 50px; /* Adjust margin for smaller screens */
		  }
		
		  .footer-links h3{
			margin-left: 50px;
		}

		  .footer-glyphs .glyph {
			width: 3px; /* Narrower glyphs */
			height: 50px; /* Shorter glyphs */
			gap: 15px; /* Reduce spacing between glyphs */
		  }	
	
  }


/* footer */
  .big-footer {
    background-color: #DD1E26; /* Red background */
    color: #FFF6E5; /* Cream text */
    text-align: center;
}

.footer-thankyou h5 {
    color: #FFF6E5;
	font-family: 'Climate Crisis', sans-serif;
    margin: 0 0 20px;
	margin-bottom: 40px;
}


.footer-content {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin: 40px 0;
}

.footer-links,
.footer-colophon {
    flex: 1;
}

.footer-links h3,
.footer-colophon h3 {
	font-family: 'Anton';
	-webkit-text-stroke-color: var(--background);
	-webkit-text-stroke-width: 2px;
	color: var(--red);
    margin-bottom: 20px;
}



.footer-links a {
    display: block;
    color: #FFF6E5;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
	font-family: 'Courier Prime', monospace;
}


.footer-links a {
	margin-bottom: var(--base-size);
}

.footer-links a:hover {
    color: #000000; /* Black on hover */
    transform: scale(1.1);
	font-weight: bold;
}

.footer-colophon p {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    line-height: 1.8;
    color: #FFF6E5;
	padding: 0;
}

.footer-credits {
    text-align: center;
    margin: 40px 0;
}

.footer-credits p {
    font-family: 'Courier Prime', monospace;
    font-size: 1rem;
    color: #FFF6E5;
}

.back-to-top {
    display: inline-block;
    margin-top: 10px;
    color: #FFF6E5;
    font-size: 2rem;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.back-to-top:hover {
    color: #000000; 
}


.footer-glyphs {
	display: flex;
	justify-content: center;
	gap: 30px; 
  }
  
  .footer-glyphs .glyph {
	width: 5px; 
	height: 100px; 
	background-color: var(--background); 
	transform: scale(1);
	transition: transform 0.3s ease, background-color 0.3s ease;
	padding: 0;
	margin: 0;
  }
  
  .footer-glyphs .glyph:hover {
	transform: scaleY(1.5) translateX(-5px); 
	background-color: black;
  }
  

  .footer-glyphs .glyph:nth-child(1) {
	animation: glyph-movement 2s infinite alternate; 
  }

  .footer-glyphs .glyph:nth-child(2) {
	animation: glyph-movement 2s infinite alternate; 
  }
  
  .footer-glyphs .glyph:nth-child(3) {
	animation: glyph-movement 2s infinite alternate; 
  }

  @keyframes glyph-movement {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(10px); 
	}
  }