/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
}

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

.hero{
    min-height:100vh;
    min-height:100svh;

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

    padding:60px 8%;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.20) 35%,
            rgba(0,0,0,.55) 70%,
            rgba(0,0,0,.75) 100%
        ),
        url("images/hero.jpg");

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

/* =========================
   CONTENT
========================= */

.content{
    width:100%;
    max-width:620px;
    text-align:right;
}

.content h1{
    font-size:clamp(3rem,6vw,5.5rem);
    font-weight:800;
    line-height:1;
    letter-spacing:2px;
    margin-bottom:24px;

    text-shadow:
        0 5px 25px rgba(0,0,0,.8);
}

.content p{
    font-size:clamp(1.15rem,2vw,1.5rem);
    line-height:1.7;
    color:#ececec;

    margin-bottom:40px;

    text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* =========================
   BUTTON
========================= */

.discord-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 42px;

    background:#5865F2;

    color:#fff;
    text-decoration:none;

    font-size:1.25rem;
    font-weight:700;

    border-radius:14px;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.discord-button:hover{
    transform:translateY(-3px);

    background:#6975f7;

    box-shadow:
        0 10px 35px rgba(88,101,242,.45);
}

.discord-button:active{
    transform:translateY(0);
}

/* =========================
   TABLETS
========================= */

@media (max-width:1000px){

    .hero{
        justify-content:center;
        padding:50px;
    }

    .content{
        text-align:center;
        max-width:650px;
    }

}

/* =========================
   PHONES
========================= */

@media (max-width:768px){

    .hero{
        padding:32px;
        background-position:45% center;
    }

    .content h1{
        margin-bottom:18px;
    }

    .content p{
        margin-bottom:30px;
    }

    .discord-button{
        width:100%;
        max-width:340px;
        font-size:1.1rem;
        padding:18px;
    }

}

/* =========================
   SMALL PHONES
========================= */

@media (max-width:480px){

    .hero{
        padding:24px;
    }

}