/* Lite Light - Lightweight Lightbox Utility Styles */

.lite-light 				{ align-items: center; background: rgba(0, 0, 0, 0.9); display: none; height: 100%; justify-content: center; left: 0;
							  position: fixed; top: 0; width: 100%; z-index: 1000;
	&.lite-light-active 	{ display: flex;	}
	.lite-light-prev 		{ left: 10px; position: absolute;  }
	.lite-light-next 		{ position: absolute; right: 10px;  }
	img 					{ background-color: #fff;  padding: 0px; }
}
/* Navigation Arrows */
.lite-light-arrow 			{ border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 10px; transform: scale(1.0);
				 			  transition: all 0.3s ease;
	&:hover 				{ cursor: pointer; transform: scale(1.1);  }
	&.lite-light-right 		{ -webkit-transform: rotate(-45deg); margin-right: 10px; transform: scale(1.00) rotate(-45deg);
		&:hover 			{ transform: scale(1.05) rotate(-45deg);    }
	}

	&.lite-light-left 		{ -webkit-transform: rotate(135deg); margin-left: 10px; transform: scale(1.00) rotate(135deg);
		&:hover 			{ transform: scale(1.05) rotate(135deg);   }
  	}
}
/* Close Button */
.lite-light-close 			{ 
	&.lite-light-button 	{ background: none; border: none; color: white; cursor: pointer; display: flex; flex-direction: column; height: 21.5px;
							  justify-content: space-between; position: absolute; right: 15px; top: 15px; transform: scale(1.0); transition: all 0.3s ease;
    						  width: 22px;
    	&:hover 			{ transform: scale(1.1);    }
  	}

	.lite-light-bar			{ background-color: #fff; display: block; height: 1px; transition: all 100ms ease-in-out; width: 100%;
		&:nth-of-type(1) 	{ transform: rotate(45deg); transform-origin: top left; transition: all 100ms ease-in-out; width: 30px;   }
    	&:nth-of-type(2) 	{ transform: rotate(-45deg); transform-origin: bottom left; transition: all 100ms ease-in-out; width: 30px;    }
	} 
}

/* Animation keyframes for fading */
@keyframes lite-light-fade-in {
  from 						{ opacity: 0; }
  to 						{ opacity: 1;  }
}

@keyframes lite-light-fade-out {
  from 						{ opacity: 1;  }
  to 						{ opacity: 0;  }
}

/* Animation classes */
.lite-light-fade-in 		{ animation: lite-light-fade-in 0.5s ease-in-out forwards;		}
.lite-light-fade-out 		{ animation: lite-light-fade-out 0.5s ease-in-out forwards;		}

/* Mobile Responsive Design */
@media (max-width: 768px) 	{
	.lite-light 			{
		.lite-light-prev,
		.lite-light-next 	{ display: none;    }
    	img 				{ max-height: 80vh; max-width: 90%; padding: 5px;    }
    	.lite-light-close 	{ font-size: 2rem; right: 25px; top: 25px;    }
  	}
	.lite-light-close.lite-light-button { height: 21.5px;  }
}

/* Mobile Safari Fixes */
@supports (-webkit-touch-callout: none) {
  .lite-light img {
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

.description 				{ font-size: 15px; font-weight: 400; color: #ffb152; text-align: center; margin-top: 0; margin-bottom: 2rem; opacity: 0.9; 
							  letter-spacing: 0.5px; position: relative; text-transform: uppercase; z-index: 2;											}

.github-button 				{ display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, var(--theme-color-2), var(--theme-color-3));
							  color: var(--theme-color-5); text-decoration: none; padding: 1rem 2rem; border-radius: 50px; font-weight: 600;
							  font-size: 1rem; letter-spacing: 0.5px; box-shadow: 0 8px 32px rgba(242, 158, 56, 0.3), 0 4px 12px rgba(31, 5, 1, 0.2);
							  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; border: 2px solid transparent; text-transform: uppercase;
	&:hover 				{ transform: translateY(-3px) scale(1.05); box-shadow:  0 8px 32px rgba(242, 158, 56, 0.3), 0 4px 12px rgba(31, 5, 1, 0.2);}
}