body {
    background-color: white;
    color: black;
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
    padding: 20px;
    text-align: center;
    line-height: 1.5;
}

    
.gc-menubar {
    /* background proprieties (the glass feel) */
    background: radial-gradient(ellipse at center, rgba(255,0,0,0.1) 50%, rgba(255, 0, 0, 0.3)); 

    /* this so it knows to display using the flex proprieties */
    display: flex;
    /* i have to set this otherwise it'll default to stacking the items in like columns instead of in a row */
    flex-direction: row;
 
    /* this is the like blur effect that makes it glass (don't judge me ok im still learning) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    /* ts the solid red border for the "glass" container */
    border: 2px solid red;
    border-radius: 15px;
    
    /* flex proprieties */
    flex-shrink: 0;

    /* aesthetic proprieties (padding, spacing, etc) */
    padding: 2vh 4vw;
    justify-content: center;
    align-items: center;
    gap: 20vw;

    /* it has to occupy ALL the width of the screen */
    width: 100%;

    /* the padding has to be included in the total screen width too */
    box-sizing: border-box;
}

.gc-projects-bio {
  /* Glass styles */
  background: radial-gradient(ellipse at center, rgba(255,0,0,0.1) 50%, rgba(255, 0, 0, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); 
  border: 2px solid red;
  border-radius: 15px;
  padding: 2rem;
  gap: 2rem;
  
  /* Flex proprieties (main proprieties) */
  display: flex;
  flex-grow: 1;
  flex: 1 1 auto; 
  align-self: flex-start; 
/* holy shit */
  height: auto;           
  min-height: 20vw;       
  
  width: 100%;
  box-sizing: border-box;
  padding: 20px;

  /* e */
  text-align: left;
  margin-top: 20px;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/p.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/h1.woff2') format('woff2');
}

p {
    font-weight: 300; 
}

h1 {
    font-weight: 700;
}

/* this makes it so the nav links appear like normal text (but bigger) instead of that blue text with an underline */
.nav-link {
    /* rem is like an measurement of like size but scalable so you can scale text and it scales normally, if scale is 1, 1rem=16px */
    font-size: 2rem;
    text-decoration: none;
    color: rgb(255, 130, 130);
    font-weight: bold;

    /* proprieties so the text glow/shadow displays properly */
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 5rem; 

    /* transition is here now fuck that im not making a seperate class cuz then it'll conflict with the menubar */
    transition: all 0.3s ease;
}

.nav-link:hover {
    box-shadow: 0px 0px 30px rgba(255, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.2); /* shhh very subtle highlighting trust */
}

.themed-text {
    /* rem is like an measurement of like size but scalable so you can scale text and it scales normally, if scale is 1, 1rem=16px */
    font-size: 2rem;
    text-decoration: none;
    color: rgb(255, 130, 130);
    font-weight: bold;

    /* proprieties so the text glow/shadow displays properly */
    padding: 0.5rem 1rem;
    border-radius: 5rem; 

    /* flex proprieties , yes AGAIN */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

}

.gc-profile-socials-container {
    /* background proprieties (the glass feel) */
    background: radial-gradient(ellipse at center, rgba(255,0,0,0.1) 50%, rgba(255, 0, 0, 0.3)); 
    
    /* this so it knows to display using the flex proprieties */
    display: flex;
    /* flex proprieties 4k hd reworked lo-fi version*/
    flex-shrink: 0;
    flex-direction: column;
 
    /* this is the like blur effect that makes it glass (don't judge me ok im still learning) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    /* ts the solid red border for the "glass" container */
    border: 2px solid red;
    border-radius: 15px;

    /* aesthetic proprieties (padding, spacing, etc) | i need to use the like rem thing cuz i need to use an internal measure so it stays its own space*/
    padding: 2rem;
    justify-content: center;
    align-items: center;
    /* WHY DID MY DUMBAHH SET THE GAP TO 20VW :sob: */
    gap: 2rem;

    /* the padding has to be included in the total screen width too */
    box-sizing: border-box;

    /* i need this to be like an fixed width cuz yeah */
    width: 20vw;
    /* i CAN set height: 20vh but most screens arent squared so this makes it a square, setting height would only fuck this up so */
    aspect-ratio: 1 / 1;
    
}


.profile-pic {
    width: 80%;       /* ts for the diameter */
    height: 80%;      /* ts the height */

    /* ts something extra so non-square images aren't warped (it probrably wont be needed anyways but */
    object-fit: cover;

    /* ts is what actually makes the profile picture a circle cuz it like forces.. uh i cba to explain tbh you understand*/
    border-radius: 50%;

    /* ts the glow that will apply to the profile pic thing too */
    border: 2px solid rgb(255, 130, 130);
}


/* i need to wrap all everything that isnt the menubar into a wrapper so there is a gap between elements so it looks ok */
.main-page-wrapper {
    display: flex;
    flex-direction: row; 
    gap: 20px;
    margin-top: 20px;        
    
    /* i need to set this as litterally ALL of the page except the menu, and the padding */
    flex-shrink: 1;
    flex-grow: 1; /* yes here too */
    min-width: 0; 
    min-height: 0; 
    /* the padding has to be included in the total screen width too */
    box-sizing: border-box;
    /* this forces the children elements to stay at their natural height */
    align-items: flex-start;

}


.gc-bio {
  /* Glass styles */
  background: radial-gradient(ellipse at center, rgba(255,0,0,0.1) 50%, rgba(255, 0, 0, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); 
  border: 2px solid red;
  border-radius: 15px;
  padding: 2rem;
  gap: 2rem;
  
  /* Flex proprieties (main proprieties) */
  display: flex;
  flex-grow: 1;
  flex: 1 1 auto; 
  align-self: flex-start; 
/* holy shit */
  height: auto;           
  min-height: 20vw;       
  
  width: auto;
  box-sizing: border-box;

  /* e */
  text-align: left;
}

.page-anchor {
    display: flex;
    flex-direction: column;
    height: 100vh; 
    padding: 5px; 
    box-sizing: border-box;
}

.socials-wrapper {
    display: flex; /* NOW you can use flex */
    gap: 15px;      /* spacing very important yes */
    justify-content: center; /* center */
    margin-top: 10px;
}

.social-link-icon {
    height: 32px;
    width: 32px;
    transition: transform 0.2 ease; /* for elements in an img tag, do NOT use flex to make it have equal height and width , do it normally */
}

.social-link-icon:hover {
    transform: scale(1.2);
}

.useless-heading-class {
    margin-top: 50px
}

/* for the damn key to be like you know */

.key-container {
  background-color: #f4d0d0; /* Matches your current light reddish background tone, change if needed */
  border: 1px solid #d8a0a0;
  border-radius: 8px;
  margin-top: 1.5rem;
  overflow: hidden;
}

.key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #d8a0a0;
}

.key-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: #333;
}

.copy-btn {
  background-color: transparent;
  color: #111;
  border: 1px solid #b57a7a;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background-color: #111;
  color: #fff;
  border-color: #111;
}

.key-container pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  max-height: 250px; /* Keeps the key box from taking up the whole page */
}

.key-container code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: #222;
  white-space: pre;
}

/* 27-06-2026 - fahh im so stupid in index html i accidentally wrapped the <a> tag with a div when i could just use multiple elements inside the a tag  
 so for future me, you CAN add multiple classes on an <a> , NOT ON A DIV THOUGH */
/* 28-06-2026 - im gonna make all the websites that are "glass containers" have the gc prefix */