
:root {
  /* Fluid Typography using clamp(MIN, PREFERRED, MAX) Generated from Gemini, it makes the text more readable on different displays, on top of that globabl variables are way easier to edit than manually doing it per line.*/
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.75rem, 0.95rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.2rem);
  --font-size-lg: clamp(1.5rem, 1vw + 1.2rem, 2.2rem);
  --font-size-xl: clamp(2rem, 2.5vw + 1.25rem, 3.5rem);

  /* Fluid Spacing Just means there is a good amount of spacing between text*/
  --space-md: clamp(1rem, 2.5vw, 1.5rem);
  --space-lg: clamp(1.5rem, 5vw, 3rem);
}

/* Basic Body Styles */
body {
    min-height: 100vh;
    background-repeat: no-repeat;
    background: linear-gradient(-45deg, #00a13e, #000000, #00a640, #000000);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    font-family: 'Chakra Petch', Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base); /* Use fluid base font size */
    margin: 0;
    padding: 0;
    color: #ccc; /* Default text color */
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header Styles */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%; /* Use percentage for horizontal padding */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
    font-family: 'Chakra Petch', sans-serif;
}

header.menu-open {
    background-color: rgba(0, 0, 0, 0.7);
}

header.scrolled {
    background-color: rgba(0, 0, 0, 0.9);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

h1 {
    color: rgb(0, 255, 0);
    font-size: 1.2em; /* Relative to parent header */
    margin: 0;
    font-family: 'Chakra Petch', sans-serif;
}

/* Navigation Bar Styles */
.navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.navbar li {
    margin-left: 15px;
}

.navbar a {
    color: rgb(0, 192, 0);
    font-size: var(--font-size-sm);
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all .40s ease;
    font-family: 'Chakra Petch', sans-serif;
}

.navbar a:hover {
    background: rgb(75, 75, 75);
    color: rgb(14, 223, 2);
}
.mobile-menu-button {
    display: none; /* hidden by default */
    color: #00ff00;
    font-size: 2rem;
    text-decoration: none;
    cursor: pointer;
}

main {
    padding-top: 80px;
}

#hero {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    margin: 0;
    border-radius: 0;
    background-color: transparent;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.18);
    padding: var(--space-md);
    border-radius: 8px;
}

.hero-content h1 {
    font-size: var(--font-size-xl);
    margin-bottom: 15px;
    color: #00ff00;
    font-family: 'Chakra Petch', sans-serif;
}

.hero-content p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: 25px;
    color: #ccc;
    font-family: 'IBM Plex Mono', cursive, sans-serif;
    letter-spacing: -1px;
}

.hero-content p a {
    color: #ccc;
}

.cta-button {
    display: inline-block;
    background-color: #00ff00;
    color: #000;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Chakra Petch', sans-serif;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #00b300;
    transform: translateY(-2px);
}

.content-section {
    display: flex;
    flex-direction: column;
    margin: 1rem  var(--space-md);
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.content-column-text {
    order: 2;
}

.content-column-visual {
    order: 1;
    margin-bottom: var(--space-md);
}

.content-column-text h2 {
    color: #00ff00;
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
    font-family: 'Chakra Petch', sans-serif;
    white-space: nowrap;
}

.content-column-text p {
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'IBM Plex Mono', cursive, sans-serif;
    letter-spacing: -1px;
}

.content-column-text a {
   color: #00ff00;
}

.content-column-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.terminal-box {
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    color: #00ff00;
    margin: var(--space-md);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.terminal-header {
    background-color: #575757;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
}

.github-image {
    width: 24px;
    height: 24px;
}

.title {
    color: #00ff08;
    font-size: 0.9em;
}

.terminal-body {
    padding: 15px;
}

.terminal-line {
    display: flex;
}

.prompt {
    color: #00ff00;
    margin-right: 5px;
}

.terminal-line-input {
    display: flex;
}

.terminal-input {
    background: none;
    border: none;
    outline: none;
    color: #00ff00;
    caret-color: #00ff00;
    flex-grow: 1;
    font-family: 'Courier New', monospace;
    font-size: 1em;
}

/* For tablets and larger screens */
@media (min-width: 768px) {
    .content-section {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }

    .content-column-text, .content-column-visual {
        flex: 1;
        order: initial;
    }

    .content-column-visual {
        margin-bottom: 0;
    }

    /* Alternating layout for visual interest */
    .content-section:nth-child(even) .content-column-text {
        order: 2;
    }
     .content-section:nth-child(even) .content-column-visual {
        order: 1;
    }
}

/* Force side-by-side for the first content section (Bookshelf) */
main > .content-section:first-of-type {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
}

main > .content-section:first-of-type .content-column-text,
main > .content-section:first-of-type .content-column-visual {
    flex: 1;
    order: initial;
}

main > .content-section:first-of-type .content-column-visual {
    margin-bottom: 0;
}

section.content-section:nth-of-type(3) .content-column-visual {
    text-align: right;
  }
  

/* Mobile Navigation Styles */
@media (max-width: 768px) {
    .navbar {
        position: absolute;
        top: 71px;
        left: 0;
        width: 100%;
        background-color: transparent;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease, background-color 0.3s ease;
    }

    .navbar a {
        color: white;
    }

    .navbar.open {
        max-height: 500px; /* A large enough value to show all menu items */
        background-color: rgba(0, 0, 0, 0.7);
    }

    .navbar.open ul {
        opacity: 1;
        transition: opacity 0.3s ease-in 0.1s; /* Fade in with a slight delay */
    }

    header.scrolled .navbar.open {
        background-color: rgba(0, 0, 0, 0.9);
    }

    header.scrolled .navbar.open a {
        color: rgb(0, 192, 0);
    }

    .navbar ul {
        flex-direction: column;
        width: 100%;
        opacity: 0;
        transition: opacity 0.2s ease-out; /* Fade out slightly faster */
    }

    .navbar li {
        text-align: center;
        margin: 10px 0;
    }

    .mobile-menu-button {
        display: block;
    }

    .content-column-text h2 {
        white-space: normal;
    }
}
