/* ---------- Global ---------- */

body{
    background:
        radial-gradient(
            circle at top,
            #13213d,
            #050816 40%
        );

    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    line-height:1.7;

    font-size:18px;

    margin:0;
}

.wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

a{
    transition:var(--transition);
}


/* ---------- Header ---------- */

header{
    position:sticky;
    top:0;
    z-index:1000;
    height:80px;
    background:
        rgba(5,8,22,.70);

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

header .wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
}

header .logo{
    margin:0;
}

header nav ul{
    display:flex;
    gap:40px;
    align-items:center;
    margin:0;
}

header nav ul li{
    margin:0;
}

header nav ul li a{
    color:#fff;
    font-weight:500;
    opacity:.85;
}



/* ---------- Hero ---------- */

.hero{
    min-height:80vh;

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

    position:relative;

    background:
        linear-gradient(
            rgba(0,0,0,.50),
            rgba(0,0,0,.70)
        ),
        url("../img/hero.jpg");

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

.hero::after{
    content:"";

    position:absolute;

    background:
        radial-gradient(
            circle at center,
            transparent,
            rgba(0,0,0,.6)
        );
}

.hero .caption{
    position:relative;
    z-index:2;

    text-align:center;

    max-width:850px;

    padding:20px;
}

.hero .caption h2{
    color:#fff;
    margin-bottom:20px;
}

.hero .caption h3{
    font-size:1.35rem;
    font-weight:400;
    margin:0;
}


/* ---------- Tables ---------- */

.table-text{
    color: white;
}

.th-text{
    color: white;
}

.td-text{
    color:white;
    padding:16px;
    
}

/* ---------- Audio ---------- */

audio{
    width:100%;
    border-radius:999px;
}