/* Coding-Style Typography */
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Fira+Code:wght@400;700&family=Source+Code+Pro:wght@400;700&display=swap');

:root {
    --black: #000;
    --beige: #f5f5dc;
    --red: #ee3224;
    --gensler-red: #da291c;

    --primary-color: var(--beige);
    --secondary-color: var(--red);
    --bg-color: var(--black);
    --header-bg: rgba(0, 0, 0, 0.85);
    --footer-bg: var(--black);
    --border-color: rgba(245, 245, 220, 0.3);
    /* Slightly more transparent for glass effect */
    --card-bg: rgba(255, 255, 255, 0.15);
    --icon-color: var(--black);
    --nav-pill-bg: var(--beige);
    --loader-color: var(--beige);
    --neon-color: #39ff14;
}

body, input, textarea, button, select, optgroup {
    font-family:
            'Anonymous Pro',
            'Fira Code',
            'Source Code Pro',
            'Courier New',
            'Courier',
            'Lucida Console',
            'Monaco',
            monospace;
    font-variant-ligatures: contextual;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    transition: color 0.3s ease;
}

/* Code-like headings */
h1, h2, h3, h4, h5, h6 {
    font-family:
            'Anonymous Pro',
            'Fira Code',
            'Source Code Pro',
            monospace;
    font-weight: 700;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

/* Monospaced code blocks */
pre, code, kbd, samp {
    font-family:
            'Anonymous Pro',
            'Fira Code',
            'Source Code Pro',
            'Courier New',
            monospace;
    font-size: 0.95em;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 0.2em 0.4em;
    transition: color 0.3s ease;
}

pre {
    background-color: rgba(0,0,0,0.1);
    padding: 1em;
    overflow-x: auto;
    border-radius: 8px;
    line-height: 1.4;
}

/* Syntax highlighting-inspired text decorations */
.code-line {
    display: inline-block;
    font-family:
            'Anonymous Pro',
            'Fira Code',
            'Source Code Pro',
            monospace;
    background-color: rgba(0,0,0,0.05);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    margin: 0 0.2em;
    transition: color 0.3s ease;
}

/* Add styles for regular text */
p, span, div, a:not(.btn), label, li {
    transition: color 0.3s ease;
}

/* Add styles for form elements */
.form-control, .form-control:focus {
    background-color: var(--card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--border-color);
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Optional: Terminal-like selection style */
::selection {
    background-color: rgba(33, 150, 243, 0.3);
    color: inherit;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    body, input, textarea, button, select, optgroup, pre, code, kbd, samp {
        font-size: 14px;
    }
}

/* Generic section layout for clear separation */
.section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-color);
}

/* Card wrapper for each section */
.section-card {
    background-color: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.section-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
}

/* Neon style button */
.neon-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    color: var(--primary-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 700;
}

.neon-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* Smooth section-by-section scrolling */
html {
    scroll-behavior: smooth;
}

body {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

.section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
}