/* --- Custom Font Implementation (TechnoBoard Example) --- */
/* NOTE: You must have this font file downloaded and placed at the correct path */


/* --- 1. Neon Glow Effect for the Title (Cyan Glow) --- */
.custom-glow-text {
    /* Subtle Cyan Shadow */
    text-shadow: 0 0 7px rgba(0, 255, 255, 0.7), 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.3);
}

/* --- 2. Blinking Cursor Animation --- */
.blinking-cursor {
    animation: blink-caret 0.75s step-end infinite;
    font-weight: 300;
    color: #a3e635; /* Lime green cursor */
}
@keyframes blink-caret {
    from, to { opacity: 0 }
    50% { opacity: 1; }
}

/* --- 3. Code-like Colors and Hover Styles (Fuchsia/Cyan Highlighting) --- */
.code-comment {
    color: #4b5563; /* Darker gray for comments */
    font-style: italic;
    font-family: monospace;
}
.code-prop-key {
    font-weight: 700;
}
.code-line {
    padding: 4px 8px;
    margin-left: -8px; 
    transition: background-color 0.3s ease;
}
.code-line:hover {
    background-color: rgba(232, 62, 140, 0.1); /* Subtle Fuchsia background on hover */
    border-left: 4px solid #d946ef; /* Striking Fuchsia/Magenta left border highlight */
    padding-left: 4px; 
}
.hover-line-highlight:hover {
    color: #fff; 
    transform: translateX(4px); 
    transition: all 0.2s ease-out;
}

/* Optional: Apply the custom font if available */
.font-mono, .code-line-value {
    font-family: 'TechnoBoard', monospace;
}
/* ------------------------------------------------------------------- */
/* 1. STYLING FOR CHROME, SAFARI, and EDGE (using WebKit prefixes) */
/* ------------------------------------------------------------------- */

/* The main scrollbar element */
::-webkit-scrollbar {
    width: 10px; /* Width of the vertical scrollbar */
    height: 10px; /* Height of the horizontal scrollbar */
    background-color: #0b1121; /* Dark background, matches your body/footer */
}

/* The scrollbar track (the area the thumb moves along) */
::-webkit-scrollbar-track {
    background-color: #0b1121;
    border: 1px solid #1e293b; /* Subtle border for separation */
    border-radius: 8px; /* Slightly rounded track */
}

/* The scrollbar thumb (the draggable handle) */
::-webkit-scrollbar-thumb {
    background-color: #0d9488; /* A vibrant color, e.g., Teal-600 */
    border-radius: 8px; /* Rounded handle */
    border: 2px solid #0f172a; /* Padding/border for floating effect */
}

/* Style when hovering over the thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: #2dd4bf; /* Lighter color on hover, e.g., Cyan-400 */
}


/* ------------------------------------------------------------------- */
/* 2. STYLING FOR FIREFOX */
/* ------------------------------------------------------------------- */

/* Applies to the whole document body */
html {
    scrollbar-color: #0d9488 #0f172a; /* thumb color | track color */
    scrollbar-width: thin; /* 'auto' or 'thin' */
}