* {

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;

}


html {

    scroll-behavior:smooth;

}



body {

    background:#000000;
    color:white;
    overflow-x:hidden;

}



/* =========================
        NAVIGATION
========================= */


.navbar {

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

    padding:20px 8%;

    background:

    linear-gradient(
    90deg,
    #000000,
    #150000
    );

    border-bottom:

    1px solid rgba(255,0,0,0.5);

    position:relative;
    z-index:10;

}



.logo img {

    width:75px;
    height:75px;

    object-fit:contain;

    filter:

    drop-shadow(0 0 10px red)
    drop-shadow(0 0 30px red);

}




.nav-links {

    display:flex;

    list-style:none;

    gap:25px;

}



.nav-links button {


    background:none;

    border:none;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}



.nav-links button:hover {


    color:red;

    text-shadow:

    0 0 15px red;

}




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


.hero {


    min-height:90vh;


    display:flex;

    justify-content:center;

    align-items:center;


    text-align:center;


    position:relative;


    background:


    radial-gradient(

    circle at center,

    #450000 0%,

    #150000 35%,

    #000000 80%

    );


    overflow:hidden;

}




.hero::before {


    content:"";


    position:absolute;


    width:600px;

    height:600px;


    background:


    radial-gradient(

    circle,

    rgba(255,0,0,.5),

    transparent 70%

    );


    filter:blur(90px);


    animation:pulse 4s infinite alternate;


}



.hero-content {


    position:relative;

    z-index:2;


}




.hero-logo {


    width:200px;

    height:200px;


    object-fit:contain;


    margin-bottom:25px;


    filter:

    drop-shadow(0 0 20px red)

    drop-shadow(0 0 50px red);


}




/* WHITE DE4ULT COIN TITLE */


.hero-content h2 {


    font-size:70px;


    color:white;


    letter-spacing:6px;


    text-transform:uppercase;


    text-shadow:


    0 0 10px white,

    0 0 30px rgba(255,255,255,.8);


}





.hero-content h3 {


    font-size:35px;

    margin:20px 0;

    color:white;


}





.hero-content p {


    max-width:650px;

    margin:auto;


    font-size:20px;


    color:#dddddd;


    line-height:1.7;


}





/* =========================
        BUTTONS
========================= */


button {


    margin-top:30px;


    padding:15px 40px;


    border-radius:30px;


    border:none;


    background:red;


    color:white;


    font-size:18px;


    cursor:pointer;


    box-shadow:


    0 0 25px red;


    transition:.3s;


}




button:hover {


    background:white;


    color:black;


    box-shadow:

    0 0 30px white;


}




/* =========================
        ANIMATION
========================= */


@keyframes pulse {


from {


opacity:.3;


transform:scale(1);


}



to {


opacity:.9;


transform:scale(1.3);


}


}




/* =========================
        SECTIONS
========================= */


.section {


    display:block;


    padding:90px 10%;


    text-align:center;


    background:


    linear-gradient(

    180deg,

    #000000,

    #120000

    );


}



.hidden-section {


    display:none;

}





.section h2 {


    font-size:45px;


    color:red;


    margin-bottom:35px;


    text-shadow:


    0 0 20px red;


}




.section p {


    max-width:850px;


    margin:15px auto;


    font-size:20px;


    color:#cccccc;


    line-height:1.7;


}




/* =========================
        TOKEN BOX
========================= */


.token-box {


    max-width:650px;


    margin:auto;


    padding:40px;


    border-radius:20px;


    background:


    linear-gradient(

    145deg,

    #000000,

    #200000

    );



    border:1px solid red;



    box-shadow:


    0 0 35px rgba(255,0,0,.5);


}




.token-box p {


    color:white;


    font-size:18px;


}





.contract-address {


    color:red;


    word-break:break-all;


    text-shadow:


    0 0 10px red;


}





/* =========================
 BUY BUTTONS
========================= */


.buy-button,

.explorer-button {


    display:inline-block;


    margin-top:25px;


    padding:15px 35px;


    border-radius:30px;


    background:red;


    color:white;


    text-decoration:none;


    box-shadow:


    0 0 25px red;


    transition:.3s;


}




.buy-button:hover,

.explorer-button:hover {


    background:white;


    color:black;


}





/* =========================
        ROADMAP
========================= */


.roadmap {


    max-width:800px;

    margin:auto;


}




.roadmap h3 {


    color:red;


    font-size:30px;


    margin-top:40px;


    text-shadow:


    0 0 10px red;


}





/* =========================
        SOCIAL
========================= */


.social-links {


    display:flex;


    justify-content:center;


    gap:25px;


    flex-wrap:wrap;


    margin-top:40px;


}




.social-links a {


    background:red;


    color:white;


    text-decoration:none;


    padding:15px 35px;


    border-radius:30px;


    box-shadow:


    0 0 20px red;


}



.social-links a:hover {


    background:white;


    color:black;


}





/* =========================
        GLOBAL RED EFFECT
========================= */


body::after {


    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;


    background:


    radial-gradient(

    circle at top,

    rgba(255,0,0,.15),

    transparent 40%

    );


    z-index:-1;


}





/* =========================
        MOBILE
========================= */


@media(max-width:768px){


.navbar {


    flex-direction:column;

    gap:20px;

}



.nav-links {


    flex-wrap:wrap;

    justify-content:center;


}



.hero-content h2 {


    font-size:45px;


}



.hero-content h3 {


    font-size:25px;


}



.hero-logo {


    width:140px;

    height:140px;


}



.section h2 {


    font-size:35px;


}



.section p {


    font-size:16px;


}



}