:root {
    /* CSS HEX */
    --eerie-black: #191818;
    --eerie-black-2: #252525ff;
    --jet: #373638ff;
    --davys-gray: #4F4F51ff;
    --night: #121212ff;
    --foreground: #f8f8ff;
    /* CSS HSL */
    --eerie-black-hsl: hsla(0, 0%, 9%, 1);
    --eerie-black-2-hsl: hsla(0, 0%, 15%, 1);
    --jet-hsl: hsla(270, 2%, 22%, 1);
    --davys-gray-hsl: hsla(240, 1%, 31%, 1);
    --night-hsl: hsla(0, 0%, 7%, 1);

    /* CSS RGB */
    --eerie-black-rgb: rgba(24, 24, 24, 1);
    --eerie-black-2-rgb: rgba(37, 37, 37, 1);
    --jet-rgb: rgba(55, 54, 56, 1);
    --davys-gray-rgb: rgba(79, 79, 81, 1);
    --night-rgb: rgba(18, 18, 18, 1);

    /* CSS Gradients */
    --gradient-top: linear-gradient(0deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-right: linear-gradient(90deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-bottom: linear-gradient(180deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-left: linear-gradient(270deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-top-right: linear-gradient(45deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-bottom-right: linear-gradient(135deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-top-left: linear-gradient(225deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-bottom-left: linear-gradient(315deg, #181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);
    --gradient-radial: radial-gradient(#181818ff, #252525ff, #373638ff, #4F4F51ff, #121212ff);

    /* Accent & Utility Colors */
    --accent: #ff7300;
    --accent-hover: #ff8c1a;
    --white: #f8f8ff;

    /* Font */
    --font-main: 'Poppins', Arial, sans-serif;

    /* Layout & Spacing (tweak these to change spacing across cards/rows) */
    --content-gap: 1.25rem;       /* general container gap (used for grid/flex gaps) */
    --card-padding: 1.25rem;      /* inner padding for cards */
    --card-row-gap: 0.85rem;      /* vertical spacing between rows inside a card (title/desc/etc) */
    --card-line-height: 1.6;      /* comfortable line-height for card descriptions */
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
    background: var(--eerie-black);
    color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light dark;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a:visited {
    color: gray;
}

li {
    list-style: none;
}
section {
    scroll-margin-top: 7rem;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.8s ease;
}