body {
    margin: 0;
    padding: 0;
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(253, 249, 244);
    background-color: rgb(15, 15, 15);
    /* Removed: height: 100vh; and flex properties to allow normal scrolling */
}

.container{
    /* Key fix: Set minimum height to viewport height */
    min-height: 100vh; 
    /* Key fix: Use flex column direction */
    display: flex;
    flex-direction: column;
    /* Optional: Center the entire container content horizontally */
    align-items: center; 
    /* Remove justify-content: center to let content flow from the top */
    
    /* Ensure the container isn't excessively wide on large screens */
    max-width: 1200px; 
    width: 100%;
    margin: 0 auto;
}

/* --- New Footer Style --- */
.page-footer {
    /* KEY FIX: Pushes this element down to the very bottom of the flex container.
       If content is shorter than 100vh, it fills the remaining space.
       If content is longer, it acts as a normal margin. */
    margin-top: auto; 
    padding: 1em 0;
    text-align: center;
    color: rgb(148, 145, 141);
    font-size: 0.8em;
}

.page-footer a{
    color: rgb(148, 145, 141);
    text-decoration: none;
}

/* --- Existing Styles Below --- */

.splash {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.splash img{
    max-width: 1.5em;
    margin: 0 0.5em;
}

.title {
    margin: 0;
    padding: 0;
}

.title-gradient{
 /* Text gradient background (same as before) */
 background: linear-gradient(
   to right,
   #ff6b6b, /* Red */
   #ffe66d, /* Yellow */
   #4ecdc4, /* Teal */
   #4f86f7, /* Blue */
   #ff6b6b   /* Red for seamless loop */
 );
 background-size: 400% 100%;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent; /* Text itself is transparent */
 
 /* Main text color shift animation */
 animation: 
   gradient-shift 10s ease-in-out infinite alternate, /* For the text color */
   glow-color-shift 10s ease-in-out infinite alternate; /* For the glow color */
}

/* ------------------------------------------- */
/* Keyframes for the Text's Gradient Movement  */
/* ------------------------------------------- */
@keyframes gradient-shift {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* ------------------------------------------- */
/* Keyframes for the Outer Glow Color Shift    */
/* ------------------------------------------- */
@keyframes glow-color-shift {
  0% {
    text-shadow: 
      0 0 1px #ff6b6b,   /* Red */
      0 0 3px #ff6b6b, /* Stronger red glow */
      0 0 5px #ff6b6b; /* Fainter red spread */
  }
  25% {
    text-shadow: 
      0 0 1px #ffe66d,   /* Yellow */
      0 0 3px #ffe66d,
      0 0 5px #ffe66d;
  }
  50% {
    text-shadow: 
      0 0 1px #4ecdc4,   /* Teal */
      0 0 3px #4ecdc4,
      0 0 5px #4ecdc4;
  }
  75% {
    text-shadow: 
      0 0 1px #4f86f7,   /* Blue */
      0 0 3px #4f86f7,
      0 0 5px #4f86f7;
  }
  100% {
    text-shadow: 
      0 0 1px #ff6b6b,   /* Back to Red */
      0 0 3px #ff6b6b,
      0 0 5px #ff6b6b;
  }
}

.subtitle {
    margin: 0;
    padding: 0;
    color: rgb(148, 145, 141);
}

.projects-container{
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    /* Removed justify-content: center to allow content to flow from the top */
    align-items: center;
    flex-grow: 1; /* NEW: Makes this section take up all remaining vertical space */
}

.projects-grid{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.projects-grid img{
    max-height: 5em;
}

.projects-grid a{
    text-decoration: none;
}

.project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 1em;
    padding: 2em;
    min-width: 10em;
    max-width: 10em;
    max-height: 10em;
    min-height: 10em;
    
    border-radius: 1em;
    transition: 0.25s;
    
    position: relative; 
    overflow: hidden; 
    z-index: 1; /* Establishes a stacking context */
    background-color: transparent; 
    color: white; /* Ensures text is visible */
}

/* ------------------------------------------- */
/* Project Hover State */
/* ------------------------------------------- */
.project:hover {
    scale: 110%;
    background-color: rgb(7, 7, 7); 
    transition: 0.25s;
}

/* ------------------------------------------- */
/* The Gradient Outline (Pseudo-Element) */
/* ------------------------------------------- */
.project::before {
    content: '';
    position: absolute;
    top: -50%; /* Position it higher */
    left: -50%; /* Position it left */
    
    /* Make it much larger than the container so it covers the edges when rotating */
    width: 200%;
    height: 200%;
    
    /* Define the full rainbow gradient */
    background: conic-gradient(
        from 0deg,
        red, orange, yellow, green, blue, indigo, violet, red /* Full spectrum for rotation */
    );

    background-size: 100% 100%; /* Keep it at the natural size */
    z-index: -1; 
    
    /* Apply the rotation animation */
    animation: gradient-rotation 3s linear infinite; /* 6s duration, continuous spin */
}

/* ------------------------------------------- */
/* The @keyframes Animation for the Border */
/* ------------------------------------------- */
@keyframes gradient-rotation {
  to {
    transform: rotate(360deg); /* Spins the entire large gradient */
  }
}

/* ------------------------------------------- */
/* The Inner White Mask (to create the "border" effect) */
/* ------------------------------------------- */
.project::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    
    /* This must be the color of the inner box background */
    background-color: rgb(7, 7, 7); 
    
    border-radius: calc(1em - 2px); 
    z-index: 2; /* Sits above the gradient */
}

/* 3. The Content Wrapper (.content-wrapper) - Top Layer */
.content-wrapper {
    position: relative; 
    z-index: 3; /* Must be higher than the mask (z-index: 2) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* NOTE: The background of this element will be the transparent background of .project
       or the dark color of the ::after mask.
       If your image has a transparent background, the dark mask color will show behind it.
    */
}

@keyframes rainbow-shift {
  0% {
    background-position: 0% 0; /* Start of the gradient */
  }
  100% {
    background-position: 100% 0; /* Shifts the gradient fully */
  }
}

.socials-container{
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em; /* NEW: Pushes the socials section down to maximize space distribution */
}

.socials-container img{
    max-height: 2.5em;
}

.socials-container a{
    text-decoration: none;
}

.social{
    opacity: 0.5;
    transition: 0.25s;
}

.social:hover{
    scale: 110%;
    opacity: 1;
    transition: 0.25s;
}

.features-container{
    font-weight: 800;
    font-size: 2em;
}

.feature{
    margin: 1em 0;
    display: flex;
    align-items: center;
}

.feature a{
    color: rgb(253, 249, 244);
    text-decoration: none;
}

.feature img{
    max-width: 1.5em;
    margin: 0 0.5em;
}

.info-container{
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-container img{
    margin: 1em 0;
    max-height: 2.5em;
}

.help-container{
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.commands-container {
    width: 50vw;
}

.command {
    padding: 1em;
    background-color: #252525;
    margin: 1em 0;
}

.command-name{
    font-weight: 600;
    font-size: 1.2em;
    color:#4f86f7;
}

.command-desc{
    margin: 0 0.5em;
}

.card-container{
    margin: 2em 0;
    display: flex;
    flex-direction: row;
    gap: 20%;
}

.card img{
    max-width: 20em;
    min-width: 20em;
    min-height: 20em;
    max-height: 20em;
}