body {
  margin: 0; /* Add this to kill default browser scrollbars */
  font-family: 'Arial', sans-serif;
  background-color: #1c1c1c;
  background-attachment: fixed; 
  color: #fff;
  min-height: 100vh;
}

a {
  color: #58a6ff;
  text-decoration: none;
}
a:hover {
  color: #bebebe;
  text-decoration: underline;
}

:root {
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 2rem; */
  text-align: center;
  

  
  /* Spacing Scale */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 4rem;     /* 64px */
  --space-xl: 12rem;     /* 256px */
  
  /* Layout Widths */
  --container-width: 1200px;

   /* Text Sizes */
  --text-xs: 12px;   
  --text-sm: 16px;     
  --text-md: 20px;  
  --text-lg: 4vw;   
  --text-xl: 6vw;     
  --text-xler: 8vw;     
  --text-gargantuan: 14vw; 

}

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

/* Navigation Bar Container */
.top-nav {
  position: absolute; /* Keeps it at the top of the page */
  top: 1vw;
  right: .5vw;
  width: 100vw;
  padding: 20px 40px;
  display: flex;
  justify-content: flex-end; /* Pushes the buttons to the right side */
  box-sizing: border-box;
  z-index: 1000; /* Ensures it sits on top of your stars/background */
}

/* Button Group Spacing */
.nav-links {
  display: flex;
  gap: 1vw;
}

/* The Sleek Button Style */
.nav-btn {
  color: #e0e0e0;
  text-decoration: none;
  font-family: 'JetBrainsMonoNL NFM', monospace;
  font-size: var(--text-sm, 14px);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background-color: rgba(10, 10, 15, 0.6); /* Semi-transparent dark background */
  backdrop-filter: blur(8px); /* The frosted glass effect */
  transition: all 0.3s ease;
}

/* The Hover Glow Effect */
.nav-btn:hover {
  border-color: #58a6ff; /* Hacker blue border */
  color: #58a6ff;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.4); /* Soft blue glow */
  transform: translateY(-2px); /* Moves the button up slightly */
}

.galaxy-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3; /* Puts it behind your content */
  
}

.scroll-container {
  height: 100vh; /* Full viewport height */
  width: 100vw;
  overflow-y: scroll; /* Allow scrolling */
  overflow-x: hidden;
  scroll-snap-type: y mandatory; /* Snap on vertical scroll */
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* For Firefox */
  scrollbar-width: thin; /* For Firefox */
  z-index: 5;
}

.scroll-area {
  height: 100vh; /* Each section takes full screen */
  scroll-margin-top: 0; /* Adds spacing at the top of each scroll area */
  scroll-snap-align: start; /* Snap to the top of the section */
  /* background-color: #ffffff; */
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  justify-content: center; 
  align-items: center;
  scroll-snap-align: start; 
  scroll-margin-top: 0; 
  height: 100vh; /* Changed from 120vh so scroll-snapping works properly */
}

.hero i {
  font-family:'JetBrainsMonoNL NFM', 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-size: var(--text-md);
  opacity: .6;
  /* margin-bottom: var(--space-xs); */
  margin-right: var(--space-md);
  

}



.hero-title {
  font-family: 'JetBrainsMonoNL NFM', 'Arial Narrow', Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  margin-top: var(--space-xs);
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
  margin-right: var(--space-md);
  line-height: .85;
  color: rgb(255, 255, 255)
  
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
  text-align: right;
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  max-width: 50vw;
  align-self: end;
}

.hero-left {
  /* font-size: var(--text-gargantuan); */
  position: absolute;
  left: var(--space-md); 
  top: 50%; 
  transform: translateY(-50%);
  max-width: 50vw; /* Prevents long text from stretching too far into the middle */
  text-align: left; 
  opacity: .1;
  font-family: 'Gunterz';
}

.aiml {
  font-size: var(--text-gargantuan);
  margin-top: 0;
  margin-bottom: 0;
  line-height: .75;
}

.fs {
  font-size: var(--text-xl);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
}
.dev {
  font-size: var(--text-xler);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
}

  .scroll-prompt {
  position: absolute;
  transform: translateX(-50%); 
  bottom: 5vh;
  left: 50%;
  /* Centers it perfectly and prepares it for the bounce animation */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0; /* Starts completely invisible */
  
  /* 1. fadeIn animation starts after a 3s delay and takes 1.5s to complete */
  /* 2. bounce animation starts after 4.5s (once the fade is done) and loops forever */
  animation: 
    fadeIn 1.5s ease-in forwards 3s, 
    bounce 2s infinite 4.5s;
  z-index: 20;
}

/* Creating the arrow using CSS borders */
.scroll-prompt .chevron {
  width: 1.5vw;
  height: 1.5vw;
  min-width: 15px; /* Keeps it from getting too small on mobile */
  min-height: 15px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  margin-top: -8px; /* Pulls them tightly together */
  transition: all 0.3s ease;
}

/* Optional: Add a nice blue glow when they hover over it */
.scroll-prompt:hover .chevron {
  border-color: #58a6ff;
  box-shadow: 2px 2px 5px rgba(88, 166, 255, 0.3);
}


/* Container for the Title and Tags */
.project-header {
  align-self: flex-start;
  margin-left: var(--space-md);
  margin-top: 5vh; /* Pushes the header down a bit from the top edge */
  display: flex;
  flex-direction: column;

  text-align: left;
  align-self: flex-start;

  gap: var(--space-sm);
}

.project-header p {
  font-family: 'JetBrainsMonoNL NFM', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--text-md);
  line-height: .75;
  color: #000; 
  margin: 0; 
  margin-bottom: var(--space-xs);
}


/* Updated Title Styling */
.black-project-title {
  font-family: 'Gunterz';
  font-size: var(--text-lg);
  line-height: .75;
  color: #000; 
  margin: 0; 
}

.white-project-header {
  align-self: flex-end;
  margin-right: var(--space-md);

  text-align: right;
  align-self: flex-end;

}

.project-header .white-project-intro {
  color: #ffffff; 
  text-transform: uppercase;
}

.project-header .black-project-intro {
  color: #000; 
  text-transform: uppercase;
}

/* .project-header .white-project-intro span, .project-header .black-project-intro span{
  text-decoration: underline;
} */

.white-project-header .tech-tags {
  justify-content: flex-end; /* Align tags to the right */
}

.white-project-header .tag {
  background-color: #fff; /* White background for contrast */
  color: #000; /* Black text for contrast */
}

.white-project-title {
  font-family: 'Gunterz';
  font-size: var(--text-lg);
  line-height: .75;
  color: #fff; 
  margin: 0; 
}


/* Container for the individual tags */
.tech-tags {
  display: flex;
  flex-wrap: wrap; /* Allows tags to wrap to a new line on smaller screens */
  gap: 0.5rem; /* Space between each tag */
  margin-top: var(--space-xs);
}

/* The Individual Tag Pill */
.tag {
  font-family: 'JetBrainsMonoNL NFM', monospace;
  font-size: var(--text-xs);
  font-weight: bolder;
  background-color: #000; /* Pure black to contrast the inverted background */
  color: #fff; /* White text */
  padding: 0.4rem 1rem; /* Top/Bottom and Left/Right padding */
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: transform 0.2s ease;
}

/* Optional: Slight lift when hovering over a tag */
.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); 
}

.description-holder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  margin: auto auto;

  width: 100%;
  max-width: 100vw; /* Keeps it from stretching too far on huge monitors */
  padding: 0 var(--space-sm); /* Keeps it from touching the screen edges */
  box-sizing: border-box; /* Ensures padding doesn't break the width */
  overflow-y: hidden;
}

.project-images {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.project-images .project-image {
  width: 100%; /* Forces your images to size themselves nicely inside their column */
  height: auto;
  border-radius: 8px; /* Optional: gives the images slightly rounded, polished corners */
}

.project-images.philippines {
  width: 45%;
  display: flex;
  flex-direction: row; /* THIS puts them side by side! */
  gap: var(--space-sm);
}
.project-images.philippines .project-image {
  flex: 1; /* This tells flexbox to make both images exactly equal widths */
  min-width: 0;
  width: 100%; 
  height: auto;
  border-radius: 8px;
  object-fit: cover; /* Pro-tip: This prevents the images from stretching if one is taller than the other */
}

.project-image.mipspicture {
  border: 2px solid rgb(255, 255, 255);
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.description-holder .project-description-white{
  text-align: left;
  width: 55%;
  font-family: 'JetBrainsMonoNL NFM', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #ffffff; 
}

.description-holder .project-description-black{
  text-align: left;
  width: 55%;
  font-family: 'JetBrainsMonoNL NFM', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #000; 
}
.description-holder .project-description-black a {
  color: #58a6ff;
}
.description-holder .project-description-black a:hover {
  color: #000000;
}

.project2-video{
  width: 100%;
  height: auto;
  border-radius: 8px; /* Optional: gives the video slightly rounded corners to match the images */
}

/* Terminal Container */
.terminal-wrapper {
  width: 100%;
  max-width: 80vw;
  height: 90vh;
  margin: 2rem auto;
  background-color: rgba(10, 10, 15, 0.85); /* Deep dark background */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  font-family: 'JetBrainsMonoNL NFM', monospace;
  font-size: 14px;
  color: #e0e0e0;
  overflow: hidden;
  cursor: text; /* Makes the whole box feel clickable */
}

/* Mac-style Window Header */
.terminal-header {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 8px 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-header .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27c93f; }
.terminal-header .title {
  margin: 0 auto;
  color: #888;
  font-size: 12px;
  transform: translateX(-20px); /* Centers text accounting for dots */
}

/* Terminal Body and Outputs */
.terminal-body {
  padding: 20px;
  height: 100%;
  overflow-y: auto; /* Adds a scrollbar if they type a lot */
}

.terminal-body p {
  margin: 5px 0;
  line-height: 1.5;
}

.prompt {
  color: #4af626; /* Classic terminal green */
  margin-right: 10px;
}

.highlight {
  color: #58a6ff; /* A nice tech blue for command hints */
}
.highlight.rit {
  color: #F76902; /* RIT red for anything related to your school */
}
.highlight.python {
  color: #306998; /* Python blue */
}
.highlight.java {
  color: #b07219; /* Java brown */
}
.highlight.angular {
  color: #B52E31; /* Angular red */
}
.highlight.green {
  color: #4af626; /* Bright green for emphasis */
}
.highlight.red {
  color: #ff4c4c; /* Bright red for emphasis */
}

/* The actual input field */
.input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

#term-input {
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'JetBrainsMonoNL NFM', monospace;
  font-size: 14px;
  flex-grow: 1;
  outline: none; /* Removes the ugly blue focus ring */
}

#term-input a {
  color: #58a6ff;
  text-decoration: underline;
}
.terminal-line {
  text-align: left;
}

/* Container to hold the stars fixed */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Behind content, in front of galaxy background */
  pointer-events: none;
}

/* Base style for a single star */
.stars-small, .stars-medium, .stars-large, .stars-unmoving{
  background: transparent;
  border-radius: 50%;
}

/* LAYER 1: Small Stars (The background dust) 
  SIZE: 1px
  ANIMATION: Slow rise
*/
.stars-small {
  width: 1px;
  height: 1px;
  animation: animStar1 200s ease-in-out infinite;
  
  /* The "Cloning" Trick: Randomly generated coordinates */
  box-shadow: 
    10vw 10vh #fff, 20vw 80vh #fff, 50vw 40vh #fff, 80vw 10vh #fff, 
    90vw 90vh #fff, 5vw 60vh #fff, 60vw 20vh #fff, 30vw 30vh #fff,
    45vw 85vh #fff, 15vw 55vh #fff, 75vw 75vh #fff, 25vw 95vh #fff,
    85vw 25vh #fff, 95vw 5vh #fff, 35vw 45vh #fff, 65vw 15vh #fff,
    55vw 65vh #fff, 5vw 5vh #fff, 95vw 95vh #fff, 12vw 82vh #fff;
}

/* LAYER 2: Medium Stars 
  SIZE: 2px
  ANIMATION: Medium speed
*/
.stars-medium {
  width: 2px;
  height: 2px;
  animation: animStar2 150s ease-in-out infinite;
  
  box-shadow: 
    15vw 25vh #ffffffaa, 60vw 15vh #ffffffaa, 80vw 60vh #ffffffaa,
    30vw 90vh #ffffffaa, 10vw 70vh #ffffffaa, 90vw 40vh #ffffffaa,
    50vw 50vh #ffffffaa, 5vw 30vh #ffffffaa, 70vw 80vh #ffffffaa;
}

/* LAYER 3: Large Stars (Occasional bright ones) 
  SIZE: 3px + Glow
  ANIMATION: Fast (appears closer)
*/
.stars-large {
  width: 3px;
  height: 3px;
  animation: animStar3 100s ease-in-out infinite;
  
  box-shadow: 
    10vw 80vh #ffffff, 85vw 20vh #ffffff, 40vw 50vh #ffffff;
}

.stars-unmoving {
  width: 2px;
  height: 2px;
  
  box-shadow: 
    22vw 70vh #ffffff, 55vw 20vh #ffffff, 49vw 25vh #ffffff, 75vw 90vh #ffffff;
}



.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .05;
  pointer-events: none; /* Allows clicks to pass through */
  z-index: -2; /* In front of stars and galaxy background */
}

/* 
   =================
   PROJECTS SECTION 
   =================
*/

.project1, .project3, .project5{
  /* background-color: rgba(255, 255, 255, .8); */
  backdrop-filter: invert(80%);  
  scroll-snap-align: start;
}




/* 
   ============================================
   MOBILE RESPONSIVENESS (Screens under 768px)
   ============================================
*/


/* ============================================
   MOBILE RESPONSIVENESS (Screens under 768px)
   ============================================
*/

/* ============================================
   MOBILE RESPONSIVENESS (Screens under 768px)
   ============================================
*/

@media (max-width: 768px) {
  
  /* 1. Adjust global spacing and scale up the text for narrow screens */
  :root {
    --text-gargantuan: 18vw; 
    --text-xler: 14vw;
    --text-xl: 10vw;
    --text-lg: 8vw; /* Scales project titles up so they are readable */
    --text-md: 16px; /* Slightly smaller for mobile readability */
    --text-sm: 14px;
    --text-xs: 10px; 
    
    --space-md: 1.5rem; 
    --space-lg: 2rem; 
  }

  /* --- NAV BAR --- */
  .top-nav {
    justify-content: center; /* Centers the buttons on mobile */
    padding: 15px 10px;
  }
  .nav-links {
    gap: 10px;
    flex-wrap: wrap; /* Allows buttons to wrap if the screen is super thin */
    justify-content: center;
  }
  .nav-btn {
    font-size: 12px;
    padding: 6px 12px; /* Smaller padding to fit nicer */
  }

  /* --- HERO SECTION --- */
  .hero-left {
    max-width: 100vw;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    text-align: center; 
    opacity: 0.15; 
  }

  .hero-right {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    max-width: 100vw;
    align-items: center; 
    text-align: center;
    width: 100%;
    z-index: 10; 
  }

  .hero-title {
    font-size: 12vw; 
    margin-right: 0;
    margin-bottom: var(--space-md);
  }

  .hero i {
    margin-right: 0;
    margin-bottom: var(--space-xs);
  }

  /* --- PROJECT HEADERS --- */
  .project-header {
    margin-top: 12vh; /* Extra breathing room from the top edge */
    width: calc(100% - 3rem); 
  }
  
  .black-project-title, .white-project-title {
    line-height: 1; /* Better line height for wrapping text */
  }
  
  .project1 .project-header h2 {
    font-size: calc(var(--text-lg) - 2px); 
  }

  .white-project-header {
    align-self: flex-start;
    text-align: left;
    margin-left: var(--space-md);
    margin-right: 0;
  }

  .white-project-header .tech-tags {
    justify-content: flex-start; 
  }
  
  .tag {
    font-size: var(--text-xs);
    padding: 0.3rem 0.8rem; 
    letter-spacing: 0.5px; 
  }

  /* --- PROJECT DESCRIPTIONS & IMAGES --- */
  .description-holder {
    flex-direction: column; /* Stacks the text and images */
    margin: auto 0; 
    gap: var(--space-md); /* Ensures space between stacked elements */
    padding: 0 1.5rem; /* Better side padding on mobile */
  }

  .project-images,
  .description-holder .project-description-white, 
  .description-holder .project-description-black {
    width: 100%; /* Full width when stacked */
    font-size: 14px; /* Crisp, readable paragraph font size */
  }

  /* Force the Philippines images to stack vertically on mobile */
  .project-images.philippines {
    flex-direction: column; 
    width: 100%;
  }
  
  .project-images.philippines .project-image {
    width: 100%;
  }

  /* --- TERMINAL --- */
  .terminal-wrapper {
    max-width: 90vw; /* Wider on mobile to maximize space */
    height: 70vh; /* Shorter so the mobile keyboard doesn't hide it all */
    margin: 1rem auto;
  }
  
  .terminal-body p, #term-input {
    font-size: 12px; /* Slightly smaller text for the narrow screen */
  }

  /* --- FIX OVERFLOWING SECTIONS --- */
  
  /* 1. Turn off snap-scrolling for mobile devices */
  .scroll-container {
    scroll-snap-type: none; 
  }

  /* 2. Allow sections to grow naturally beyond 100% height */
  .scroll-area {
    height: auto; 
    min-height: 100vh; /* Still guarantees it takes up at least one full screen */
    padding-bottom: 15vh; /* Adds a nice gap before the next project begins */
  }

  /* 3. Keep the Hero & Terminal sections strictly 100vh so they don't break */
  .hero, .project-terminal {
    height: 100vh;
    padding-bottom: 0;
  }
}


/* ANIMATION
  Moves the shadow box up. When it goes off screen, 
  it seamlessly loops if you duplicate the shadow string 
  (simple version just moves them slowly upward) 
*/
@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-10px) translateX(-50%);
  }
  60% {
    transform:  translateY(-5px) translateX(-50%);
  }
}

@keyframes animStar1 {
  0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }
  33% { transform: translateY(0px) translateX(120px) scale(1.2); opacity: 0.8; } 
  67% { transform: translateY(100px) translateX(-30px) scale(1.3); opacity: 0.6; }
  100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }

}
@keyframes animStar2 {
  0% { transform: translateY(0px) translateX(0px) scale(1); opacity: .8; }
  33% { transform: translateY(-40px) translateX(-100px) scale(1.2); opacity: 1; }
  67% { transform: translateY(60px) translateX(-200px) scale(1.5); opacity: 0.6; } 
  100% { transform: translateY(0px) translateX(0px) scale(1); opacity: .8; }

}
@keyframes animStar3 {
  0% { transform: translateY(0px) translateX(0px) scale(1); opacity: .1; }
  33% { transform: translateY(-200px) translateX(-120px) scale(1.2); opacity: 1; }
  67% { transform: translateY(-100px) translateX(-90px) scale(.9); opacity: 0.6; } 
  100% { transform: translateY(0px) translateX(0px) scale(1); opacity: .1; }
}

@font-face {
    font-family: 'Gunterz';
    src: url('public/fonts/Gunterz-Medium.woff2') format('woff2'),
        url('public/fonts/Gunterz-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gunterz';
    src: url('public/fonts/Gunterz-MediumItalic.woff2') format('woff2'),
        url('public/fonts/Gunterz-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-Bold.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-BoldItalic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-ExtraBold.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-ExtraBoldItalic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-Italic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-Light.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-LightItalic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-Medium.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-MediumItalic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-Regular.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-SemiBoldItalic.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Code';
    src: url('public/fonts/GoogleSansCode-SemiBold.woff2') format('woff2'),
        url('public/fonts/GoogleSansCode-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-Medium.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-ExtraLightItalic.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-MediumItalic.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-Regular.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-SemiBold.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-SemiBoldItalic.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-Thin.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-BoldItalic.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-ExtraBoldItalic.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL NFM';
    src: url('public/fonts/JetBrainsMonoNLNFM-ExtraLight.woff2') format('woff2'),
        url('public/fonts/JetBrainsMonoNLNFM-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}