body{
    margin:0;
    background:black;
    color:white;
    font-family:sans-serif;
    overflow-x:hidden;
}

.background{
    position:fixed;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.9)
    ),
    url("/assets/fond.jpg");

    background-size:cover;
    background-position:center;

    z-index:-1;
}

/* NAVBAR */

.navbar{
    width:90%;
    margin:auto;
    margin-top:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#090909;

    border:1px solid #1f1f1f;

    border-radius:50px;

    padding:20px 30px;
}

.links{
    display:flex;
    gap:40px;
}

.links a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.links a:hover{
    color:#ff4b4b;
}

.white{
    color:white;
}

.red{
    color:#ff4b4b;
}

.avatar{
    width:55px;
    height:55px;

    border-radius:50%;

    object-fit:cover;
}

/* HERO */

.hero{
    height:calc(100vh - 100px);

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;
}

.hero h1{
    font-size:90px;
    margin:0;
    font-weight:800;
}

.hero p{
    color:#d0d0d0;

    font-size:24px;

    line-height:40px;

    margin-top:25px;
}

.buttons{
    margin-top:50px;

    display:flex;

    gap:25px;
}

.join{
    background:#ff4b4b;

    color:white;

    padding:18px 35px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;
}

.join:hover{
    transform:translateY(-3px);
}

.team{
    border:2px solid white;

    color:white;

    padding:18px 35px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;
}

.team:hover{
    background:white;
    color:black;
}