/* FOR THE INTRO PAGE WITH THE TV AND WHATNOT*****************************************************************************************************************************************************************************************************************************/



.tv-container {
    position: relative; /* Forget what this does rip - to review because centering is kicking my ass ahhhhhhhhhhh*/
    width: 700px; /* Adjust width as needed (of just the image itself)*/
    height: auto;
        /* Centering */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: auto;
}

/* ----------------------FOR MOBILE STUFFFFFFFFFFFFF------------------------------------ */
@media (max-width: 700px) {
    .tv-container {
        width: 100%; /* Set to 700px if the viewport is smaller than 700px */
    }
}
/*---------------------------------------------------------------------------------------*/
.tv-frame {
    width: 100%; /* Ensure TV fills the container???? revise this maybe */
    display: block;
    align-items: center;
}

/* USE THE Z-INDEX TO PLCE THE SCREEN BEHIND THE GIF, THEN EXPORT WITH TRANSPARENCY AND VOILA! iT WOULD BE MUCHO EASIERRRRRR ME THINKS */
.tv-screen {
    position: absolute;
    align-items: center;
    transform: rotate(13deg);
    top: 23%; /* This and following line are for the TV screen fit (top left corner i think) - places it precisely on da pageeeee */
    left: 62%;
    width: 18%;
    height: 24%;
    object-fit: cover; /* Ensures the screen fills correctly */
        /* Clip the TV screen into a custom polygon shape */
    clip-path: polygon(0% 15%, 10% 9%,25% 9%, 45% 5%, 62% 5%, 90% 10%, 97% 45%, 100% 84%, 70% 88%, 43% 90%, 10% 82%, 2% 47%);
}



/* Container for holding intro index images - to change later as of March 10th 2025*/
.introimg-container {
    grid-template-columns: 300px 300px;
    gap: 100px;
    justify-content: center;
}

/* General Container for holding main images - to tweak */
.image-container {
    display: flex;  /* Makes the images sit side by side */
    gap: 0.5px;  
    justify-content: center;
    align-items: center;
}




/*.intro-page moved from here to the index page just to hopfeully load better in the thumbnail....*/





/*FOR REF LATER WHEN YOU MAYBE POSSIBLY IDK PERHAPS CLEANUP THE STYLESHEET INSTEAD OF HTML-ING EVERYTHING u messy mudafukaaaaa*/
/*h1 {
   /* font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: #FFF9BE;
  /*  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9);
} */


/* INTRO TV END oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo/


/* BACKGROUNDS FOR EACH PAGE **************************************************************************************************************************************************/



.anim-page {
    width: 100%;
    height: 100vh; /* Ensures full viewport coverage */
    margin: 0;
    text-align: center; /* Centers inline text elements */
    min-height: 100vh;
    background-color: black; /* BACKUP - PREVENTS WHITE FLICKER FROM SHOWING UP - DONTTT DELETEEEEEEEEEE */
    background: url(IMG/JUSJUSBGblue.jpg) 0 0 repeat;
    background-attachment: fixed;
    background-size: 400px 400px;
    
    
    margin-left: 200px;  /* Shifts everything to the right of the sidebar */
    max-width: calc(100% - 200px); /* Ensures it doesn't overflow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers block elements */
}

.illus-page {
    width: 100%;
    height: 100vh; 
    margin: 0;
    text-align: center; 
    min-height: 100vh;
    background-color: black;
    background: url(IMG/JUSJUSBGcyan.jpg) 0 0 repeat;
    background-attachment: fixed;
    background-size: 400px 400px;
    
    
    margin-left: 200px;  
    max-width: calc(100% - 200px); 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sketch-page {
    width: 100%;
    height: 100vh; 
    margin: 0;
    text-align: center;
    min-height: 100vh;
    background-color: black;
    background: url(IMG/JUSJUSBGyell.jpg) 0 0 repeat;
    background-attachment: fixed;
    background-size: 400px 400px;
    
    margin-left: 200px; 
    max-width: calc(100% - 200px); 
    display: flex;
    flex-direction: column;
    align-items: center; 
}


.concept-page {
    width: 100%;
    height: 100vh;
    margin: 0;
    text-align: center; 
    min-height: 100vh;
    background-color: black;
    background: url(IMG/JUSJUSBGred.jpg) 0 0 repeat;
    background-attachment: fixed;
    background-size: 400px 400px;
    
    margin-left: 200px; 
    max-width: calc(100% - 200px); 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-page {
    width: 100%;
    height: 100vh; 
    margin: 0;
    text-align: center; 
    min-height: 100vh;
    background-color: black;
    background: url(IMG/JUSJUSBG.jpg) 0 0 repeat;  
    background-attachment: fixed;
    background-size: 400px 400px;  
    
    margin-left: 200px;  
    max-width: calc(100% - 200px); 
    display: flex;
    flex-direction: column;
    align-items: center; 
}




/*USE FOR THE CONCEPT PAGE WHEN PUTTING IMAGES IN AROUND THE WORDS :     z-index: -1;/* Places the pseudo-element behind everything else in .aboutbg *      transform:translate(-50%,-50%) rotate(45deg);     */






/*SIDEBARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR*****************************************/
        /* Sidebar styling */
        .sidebar {
            position: fixed;
            left: 0px; /* *NOT* Hidden off-screen */
            top: 0;
            width: 200px;
            height: 100vh;
            background-color: #000000;
            padding-top: 20px;
            transition: left 0.3s ease;
        }

        /*.sidebar a:hover { */
            /*background-color: #444; */
        /* } */

/*SIDEBARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR*****************************************/


/* BUTTONS ***********************************************************************************************************************************************/
/* Illustration-Main Button */
    .illm-button {
        transition: 0.3s;
        width: 200px;
    }
    .illm-button:hover {
        content: url('IMG/illm-button2.jpg');
    }


/* Animation-Main Button */
    .anim-button {
        transition: 0.3s;
        width: 200px;
    }
    .anim-button:hover {
        content: url('IMG/anim-button2.jpg'); 
    }


/* Sketches-Main Button */
    .sketgalm-button {
        transition: 0.3s;
        width: 200px;
    }
    .sketgalm-button:hover {
        content: url('IMG/sketgal-button2.jpg'); 
    }


/* Concepts-Main Button */
    .conceptm-button {
        transition: 0.3s;
        width: 200px;
    }
    .conceptm-button:hover {
        content: url('IMG/conceptm-button2.jpg'); 
    }


/* About-Main Button */
    .aboutm-button {
        transition: 0.3s;
        width: 200px;
    }
    .aboutm-button:hover {
        content: url('IMG/about-button2.jpg'); 
    }


/* Return home Button */
    .home-button {
        transition: 0.3s;
        content: url('IMG/home-button.jpg'); 
        width: 200px;
    }
    .home-button:hover {
        content: url('IMG/home-button2.gif'); 
    }




/* MAIN INTRO BUTTONS ***********************************************************************************************************************************************/
/* Illustration-Main Button */
    .hillm-button {
        transition: 0.3s;
        width: 200px;
    }
    .hillm-button:hover {
        content: url('IMG/illm-button2.jpg');
        transform: scale(1.1); 
    }


/* Animation-Main Button */
    .hanim-button {
        transition: 0.3s;
        width: 200px;
    }
    .hanim-button:hover {
        content: url('IMG/anim-button2.jpg'); 
        transform: scale(1.1); 
    }


/* Sketches-Main Button */
    .hsketgalm-button {
        transition: 0.3s;
        width: 200px;
    }
    .hsketgalm-button:hover {
        content: url('IMG/sketgal-button2.jpg'); 
        transform: scale(1.1); 
    }


/* Concepts-Main Button */
    .hconceptm-button {
        transition: 0.3s;
        width: 200px;
    }
    .hconceptm-button:hover {
        content: url('IMG/conceptm-button2.jpg'); 
        transform: scale(1.1); 
    }


/* About-Main Button */
    .haboutm-button {
        transition: 0.3s;
        width: 200px;
    }
    .haboutm-button:hover {
        content: url('IMG/about-button2.jpg'); 
        transform: scale(1.1); 
    }


/* BACKGROUNDS ANIMATED END oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/


.grid-anim {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.grid-anim img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out;
}

.grid-ill {
  width: 90%;
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
  gap: 10px;
}

.grid-ill img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  margin: auto; /* Centers the image inside its grid cell */
}


.grid-illalt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 90%;
  margin: auto;
}


.grid-illalt img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  margin: auto;
}


.grid-long {
  width: 90%;
  display: grid;
  max-width: 100%;
  justify-content: center;
  margin: auto;
  grid-template-columns: 1fr; /* Creates 1 column */
  gap: 10px;
}

.grid-long img {
  width: 100%;
  max-width: 80%;
  height: auto;
  border-radius: 15px;
  display: block;
  margin: auto; /* Centers the image inside its grid cell */
}


/*---------------------------------For the smucks that use phones only section----------------------------------------*/
.mobile-only {
  display: none; /* Hidden by default */
}

/* Show on small screens (max width 768px is common for tablets/phones) */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}



/*----------------------------------------------MOBILE ONLY-------------------------------------------------------*/

/*------------------------TO GET BUTTONS EVENLY SPACED IN NAVBAR------------------------------- */
@media (max-width: 768px) {
  .illm-button,
  .anim-button,
  .sketgalm-button,
  .conceptm-button,
  .aboutm-button,
  .home-button {
    width: 16.66vw; /* roughly 1/6th of the screen */
    padding: 0;
    margin: 0;
  }
}



@media (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
  }
  h1 {
    margin-top: 0;
    padding-top: 0;
  }
}


/*----hide the pesky 200px from desktop navbar---*/
@media (max-width: 768px) {
  .anim-page,
  .illus-page,
  .sketch-page,
  .concept-page,
  .about-page {
    margin-left: 0;
    max-width: 100%;
  }
}


/* Hide sidebar on mobile */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* Mobile navbar - horizontal*/
.mobile-navbar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: black;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 2px solid #333;
  }

  .mobile-navbar img {
    height: 30px;
    width: auto;
    transition: transform 0.2s ease;
  }

  .mobile-navbar img:hover {
    transform: scale(1.1);
  }

  body {
    padding-top: 80px; /* pushes page content below nav */
  }
}