@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@300&display=swap');
/* CSS Reset */
* { margin: 0; padding: 0; }

/* Basic Responsive Image */
img {
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-top-right-radius: 47px 47px;
  overflow: hidden;
  background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
}

/* Responsive Images in Columns */
.two-columns {
  width: 48%;
  display: inline-block;
}
.three-columns {
  width: 32%;
  display: inline-block;
}
/* Responsive Images with Conditional Breakpoints  */

html {
  scroll-behavior: smooth;
}

.breakpoint { /* One column for smartphones */
  max-width: 100%;
  display: inline-table;
  overflow: hidden;
  box-shadow: 0 0 0px 0px #f11111;
  border-top-right-radius: 47px 47px;
  transition: box-shadow 0.2s ease-out;
}
.grid{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(200px, 250px);
	grid-auto-flow: dense;
	gap: 0.7rem;
	max-width: 1377px;
	max-height: fit-content;
	margin: auto;
}
.breakpoint:hover {
  box-shadow: 0 0 0px 50px #11f14b;
  transition: box-shadow 0.2s ease-out;
}
@media (min-width: 420px) { /* Two columns for tablets */
  .breakpoint {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  	.breakpoint .span-h{
		grid-column: span 2;
	}
	.breakpoint .span-v{
		grid-row: span 2;
	}
}
/* Full-width Responsive Image */
.full {
  width: 100%;
}

/* Demo Page Styles: Basic */
body {
  font: normal 400 18px/25px "Play", sans-serif;
  color: #484848;

  background-image: url("../Projects/bg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height:100vh;  /* responsive height */
    background-repeat: inherit;
}

/* Project Name */
.centered {
  position: absolute;
  top: 87%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Demo Page Styles: Typography */
h1, h2, h3 {
  font-weight: 700;
  font-family: 'Gemunu Libre', monospace;
  color:#BDBDBD;
background: linear-gradient(90deg, rgb(108 126 62) 0%, rgb(179, 86, 5) 12%, rgb(63, 54, 54) 28%, rgba(0,0,0,1) 45%, rgba(0,18,252,1) 61%, rgba(238,0,225,1) 78%, rgb(68, 110, 4) 100%);
}
h2, h3 {
  margin: 40px auto 20px auto;
} 
h1 {
  margin: 10px auto 50px auto;
  font-size: 23px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 2px;
}
h2 {
  font-size: 77px;
  line-height: 34px;
  letter-spacing: 17px;
  	-webkit-box-shadow: 0px 0px 43px 12px #1CC2FF; 
	box-shadow: 0px 0px 43px 12px #1CC2FF;
}
h2:hover {
  color:Cyan;
  transition: box-shadow 0.3s ease-out;
}
h3 {
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 17px;
  -webkit-box-shadow: 0px 0px 41px 7px #4AFF0A; 
box-shadow: 0px 0px 41px 7px #4AFF0A;
}
h3:hover {
  color:Cyan;
  transition: box-shadow 0.3s ease-out;
}
p, .button {
  font-family: 'Gemunu Libre', monospace;
  color: #00021f;
  margin: 5px auto 20px auto;
  background: rgb(163,222,11);
  background: linear-gradient(90deg, rgba(163,222,11,0.7) 0%, rgba(181,181,181,1) 35%, rgba(231,196,227,1) 73%, rgba(0,212,255,0.77) 100%);

  letter-spacing: 2px;
  font-weight: 500;

  -webkit-box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);
  -moz-box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);
  box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);

  text-align:left;
  border-top-right-radius: 21px 21px;
  padding: 7px 7px 7px 7px;
  -webkit-box-shadow: 0px 0px 50px 37px #91205F; 
  box-shadow: 0px 0px 50px 37px #91205F;
}
Portfolio {
  color: #000;
  margin: 5px auto 20px auto;
  background: rgb(163,222,11);
  background: linear-gradient(90deg, rgba(163,222,11,0.5) 0%, rgba(181,181,181,1) 35%, rgba(231,196,227,1) 73%, rgba(0,212,255,0.5) 100%);

  -webkit-box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);
  -moz-box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);
  box-shadow: inset 7px 7px 13px -3px rgba(176,12,176,1);

  text-align:left;
  border-top-right-radius: 21px 21px;
  padding: 7px 7px 7px 7px;
}
a {
  color: #3185fc;
  text-decoration: none;
  font-weight: 700;
  transition: box-shadow 0.2s ease-out;
  z-index: 0;
  overflow: hidden;
  box-shadow: 0 0 0px 0px #F700FF;
  border-top-right-radius: 47px 47px;
}

.button.three-columns {
    width: 200px;         /* Set a specific width so it doesn't grow */
    overflow: hidden;     /* This is the key: it clips anything outside the box */
    white-space: nowrap;  /* Prevents the text from jumping to a new line */
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.button.three-columns span {
    display: inline-block;
    animation: move-text 0.5s linear infinite;
}

@keyframes move-text {
    0% { transform: translateX(-10%); }
    100% { transform: translateX(-3%); } /* Slides exactly half the length to loop */
}

/* When the mouse is anywhere over the grid, 
   bring the whole grid above the text layer */
.grid:hover {
  z-index: 10 !important;
}

/* Your existing hover effect */
.grid a:hover {
  box-shadow: 0 0 0px 50px #11f14b;
  transition: box-shadow 0.3s ease-out;
  position: relative; /* Required for z-index to work */
  z-index: 77;
}

b {
  font-family: 'Gemunu Libre', monospace;
  color: #44046b;
  padding-right: 13px;
  text-decoration: none;
  background-color: #56e7d8;
  font-weight: 700;
  transition: box-shadow 0.2s ease-out;
  z-index: 0;
  overflow: hidden;
  letter-spacing: 1px;
  padding: 2px;
  padding-left: 3%;
  padding-right: 2%;
  box-shadow: inset 0 0 0px 0px #F700FF;
  border-top-right-radius: 17px 17px;
  transition: box-shadow 0.5s ease, background-color 0.5s ease, letter-spacing 0.5s ease;
}
b:hover {
  box-shadow: inset 0 0 7px 7px #11f14b;
  background-color: bisque;
  letter-spacing: 3px;
  z-index: 1;
}

/* Demo Page Styles: Layout */
.container {
  position: relative;
  top:120px;
  width: 97%;
  max-width: 97%;
  margin: 0 auto;
  text-align: center;
  z-index: 0;
}
header {
  position:fixed;
  top:0;
  width: 100%;
  height:100px;

  color: #fff;

  z-index:10;
}
header .container {
  top:0;

}
section {
  margin: 5px auto;
}
/* Demo Page Styles: Special classes */
.button {
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  width: 96%;
  max-width: fit-content;
  text-align: center;
  color: #f2f6fc;
  text-shadow: 1px 1px #0501ee;
  letter-spacing:1px;
  transition: background-color 0.2s ease-in, color 0.2s ease-in, max-width 0.2s ease-in, letter-spacing 0.2s ease-in;
}
.button:hover {
  background:#BDBDBD;
  color: #fff;
  max-width: 100%;
  letter-spacing:20px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, max-width 0.2s ease-out, letter-spacing 0.2s ease-out;

}

.kamtar {
  position: fixed;
  top: 0;
  width: 100%;
  background: linear-gradient(0deg, rgba(221,203,220,0) 19%, rgba(34,193,195,1) 97%);
  font-size: 13px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  text-decoration: overline;
  
  display: flex; 
  justify-content: center;
  align-items: center;
  
  /* Initial state */
  gap: 80px; 
  transform: scale(1.3);

  animation: 7s kamination ease-out infinite;
}

@keyframes kamination {
  0% {
    gap: 120px;       /* Pieces fly out */
    transform: scaleX(3); /* Entire header feels "larger" */
  }
  93% {
    gap: 10px;        /* Pieces come together */
    transform: scaleX(0.77);   /* Returns to natural size */
  }
  100% {
    gap: 120px;
    transform: scaleX(3);
  }
}

.kamtar span {
  display: inline-block;
  /* This ensures the individual letters don't distort internally */
}

.kamtar span {
  display: inline-block;
}

.buttonon {
font-family: 'Gemunu Libre', monospace;
font-size: 27px;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  letter-spacing:20px;
}
.instructions {
  width: 100%;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
  background: #BDBDBD;
  color: #89043d;
  font-weight: 700;
}
#credits {
  color: #959595;
}
/* Demo Page Styles: Media Queries */
@media (max-width: 400px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 28px;
    line-height: 34px;
  }
  h2 {
    font-size: 72px;
    line-height: 26px;
  }
  h3 {
    font-size: 18px;
    line-height: 22px;
  }
}

.skills {
  text-transform:uppercase;
  display: inline-block;
  white-space: nowrap;
  animation: floatText 77s infinite linear;
  padding-left: 17%; /*Initial offset, which places the text off-screen*/ 
}
.dayy {
      margin-top: -70px;
}
@keyframes floatText {
  0% {
    transform: translateX(0);
  }
  97% {
    transform: translateX(-37%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Only targets the about page portrait and video */
#portrait-about, 
#video-about {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; /* Keeps your head in frame */
}

/* LAzy Youtube*/
.wrapper {
	max-width: 100%;
}

.youtube {

	position: relative;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
    height: 100%;
}
.youtube img {
filter: blur(0.7vw);
	width: 100%;
	left: 0;
	opacity: 0.87;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
/* LAzy Youtube end*/


/* prevent click but KEEP hover */
.no-lightbox {
  cursor: default;
}
/* video behaves exactly like your images */
.fal-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-right-radius: 47px;
  pointer-events: none;
}
/* keep your existing hover glow */
.boxout2:hover {
  box-shadow: 0 0 0px 50px #11f14b;
  transition: box-shadow 0.3s ease-out;
  z-index: 1;
}
/* Ensure the container and video allow transparency */
.progressive.replace, 
.fal-video {
    background-color: transparent !important;
    background-image: none !important;
}

video.fal-video {
    outline: none;
    border: none;
}




/* Force-disable any hover state */
.media-container:hover {
  cursor: default;
  outline: none;
}

@media screen and (min-width: 460px){
	.grid{
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		max-height: fit-content;
	}
	.grid .span-h{
		grid-column: span 2;
	}
	.grid .span-t{
		grid-column: span 3;
	}
	.grid .span-f{
		grid-column: span 4;
	}
	.grid .span-v{
		grid-row: span 2;
	}


}