:root {
    --background-color-dark: #0a0a0a;
    --text-color-dark: #e2e8f0;
    --background-color-light: #f3f4f6;
    --text-color-light: #1f2937;
    --sky-500: #0ea5e9;
    --slate-700: #334155;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

body.light-mode {
    background-color: var(--background-color-light);
    color: var(--text-color-light);
}

/* Define a altura total da seção do canvas */
#canvas-hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* O Canvas ficará no fundo */
#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* O conteúdo de texto ficará sobre o canvas */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Estilização da linha do tempo */
.timeline-item {
    position: relative;
    padding-left: 2.5rem; /* 40px */
    padding-bottom: 2rem; /* 32px */
    border-left: 2px solid #334155; /* slate-700 */
}
/* Círculo na linha do tempo */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -9px; /* Metade do seu tamanho para centralizar */
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #0ea5e9; /* sky-500 */
    border: 2px solid #0a0a0a;
}