/*=========================================
                HERO
=========================================*/


.hero{

    position:relative;

    width:100%;

    height:90vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        var(--background-dark),
        var(--bg-primary)
    );

    color:var(--text-primary);

}



.hero-content{

    position:relative;

    z-index:2;

    width:min(900px,90%);

    text-align:center;

}



.hero-content h2{

    font-size:70px;

    margin-bottom:25px;

    line-height:1.1;

}



.hero-content p{

    font-size:24px;

    color:var(--text-secondary);

    line-height:1.7;

}



/*=========================================
            NETWORK CANVAS
=========================================*/


#network{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}