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

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

html{

    width:100%;

    min-height:100%;

}

body{

    min-height:100vh;

}
body{
    font-family:'Kanit',sans-serif;

    min-height:100vh;

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

    padding:20px 15px;

    overflow-x:hidden;

    background:url("background.png") center center no-repeat;
    background-size:cover;
}

/* ==========================
   BACKGROUND OVERLAY
========================== */

body::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at center,
        rgba(255,40,40,.08),
        rgba(0,0,0,.72));

    backdrop-filter:blur(2px);

    z-index:1;

}

body::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle,
        rgba(255,0,0,.10),
        transparent 70%);

    animation:pulse 5s infinite;

    pointer-events:none;

    z-index:2;

}

@keyframes pulse{

    0%{
        opacity:.4;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.4;
    }

}

/* ==========================
   CARD
========================== */

.card{

    position:relative;
    margin-top:20px;    
    width:min(760px,100%);
    max-width:760px;
    padding:40px 30px;
    text-align:center;
    border-radius:34px;
    overflow:hidden;
    z-index:5;

    backdrop-filter:blur(18px);

    background:
        linear-gradient(
        180deg,
        rgba(20,20,20,.65),
        rgba(10,10,10,.35));

    border:1px solid rgba(255,70,70,.30);

    box-shadow:
        0 0 25px rgba(255,0,0,.25),
        0 0 60px rgba(255,0,0,.10),
        inset 0 0 15px rgba(255,255,255,.05);

}

/* ==========================
   BORDER GLOW
========================== */

.card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:36px;

    border:2px solid rgba(255,70,70,.35);

    box-shadow:
        0 0 15px rgba(255,0,0,.55),
        0 0 40px rgba(255,0,0,.20);

    pointer-events:none;

}

/* ==========================
   RED LIGHT
========================== */

.card::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    left:-140px;
    top:-120px;

    border-radius:50%;

    background:red;

    filter:blur(160px);

    opacity:.12;

    z-index:-1;

}

/* ==========================
   LOGO
========================== */

.logo{

    width:120px;
    height:120px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    border:4px solid #ff3a3a;

    box-shadow:
        0 0 20px #ff0000,
        0 0 45px rgba(255,0,0,.45);

}

.logo img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* ==========================
   TEXT
========================== */

small{

    display:block;

    margin-top:20px;

    color:#ff8c8c;

    font-size:18px;

    letter-spacing:2px;

}

h1{

    margin-top:10px;

    font-size:70px;

    font-weight:700;

    color:#fff;

    text-shadow:
        0 0 15px red,
        0 0 40px rgba(255,0,0,.45);

}

h2{

    margin-top:18px;

    font-size:40px;

    color:#ff5555;

    font-weight:500;

}

.desc{

    max-width:560px;

    margin:24px auto 0;

    line-height:1.9;

    font-size:19px;

    color:#ddd;

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

.discord-btn{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    width:360px;
    height:72px;

    margin:40px auto 0;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    font-size:22px;
    font-weight:600;

    background:
        linear-gradient(
            180deg,
            #ff4a4a,
            #b30000
        );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 20px rgba(255,0,0,.45),
        inset 0 1px 2px rgba(255,255,255,.25);

    transition:.35s ease;

}

.discord-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 30px rgba(255,0,0,.75),
        0 0 60px rgba(255,0,0,.35);

}

.discord-btn:active{

    transform:scale(.98);

}

.discord-btn i{

    font-size:28px;

}

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

.social{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:22px;

}

.social a{

    width:52px;
    height:52px;

    border-radius:50%;

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

    color:#fff;

    font-size:22px;

    text-decoration:none;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.social a:hover{

    background:#ff2e2e;

    transform:translateY(-6px);

    box-shadow:
        0 0 25px rgba(255,0,0,.7);

}

/* ==========================
   FOOTER
========================== */

.footer{

    margin-top:35px;

    color:#999;

    font-size:14px;

    letter-spacing:1px;

}

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

.card{

    animation:floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.logo{

    animation:logoGlow 3s infinite alternate;

}

@keyframes logoGlow{

    from{

        box-shadow:
            0 0 15px #ff0000,
            0 0 35px rgba(255,0,0,.45);

    }

    to{

        box-shadow:
            0 0 25px #ff0000,
            0 0 70px rgba(255,0,0,.7);

    }

}

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

h1{

    animation:titleGlow 3s infinite alternate;

}

@keyframes titleGlow{

    from{

        text-shadow:
            0 0 10px red,
            0 0 25px rgba(255,0,0,.4);

    }

    to{

        text-shadow:
            0 0 18px red,
            0 0 55px rgba(255,0,0,.8);

    }

}
/* ==========================
   CARD REFLECTION
========================== */

.card .shine{

    position:absolute;

    top:-120px;
    left:-160px;

    width:260px;
    height:700px;

    transform:rotate(-30deg);

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    animation:shineMove 7s linear infinite;

    pointer-events:none;

}

@keyframes shineMove{

    0%{

        left:-300px;

    }

    100%{

        left:900px;

    }

}

/* ==========================
   BACKGROUND LIGHT
========================== */

.bg-light{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,0,0,.18),
        transparent 70%
    );

    filter:blur(120px);

    animation:bgLight 8s ease-in-out infinite;

    z-index:0;

}

@keyframes bgLight{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================
   HOVER EFFECT
========================== */

.card:hover{

    transform:translateY(-6px);

    transition:.35s;

    box-shadow:
        0 0 35px rgba(255,0,0,.35),
        0 0 80px rgba(255,0,0,.18);

}

/* ==========================
   CUSTOM SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#ff3030;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff5b5b;

}

/* ==========================
   RESPONSIVE
========================== */





/* ==========================
   SMOOTH
========================== */

.card,
.discord-btn,
.social a{

    transition:all .35s ease;

}
/* ==========================
   TABLET
========================== */
/* ==========================
   RESPONSIVE
========================== */

@media (max-width:992px){

    body{
        padding:20px;
    }

    .card{
        width:95%;
        padding:30px 25px;
    }

    h1{
        font-size:48px;
    }

    h2{
        font-size:28px;
    }

    .desc{
        font-size:16px;
    }

    .discord-btn{
        width:100%;
        max-width:420px;
    }

}

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

@media (max-width:768px){

    body{

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

        padding:15px;

    }

    .card{

        width:100%;
        max-width:100%;

        padding:25px 18px;

        border-radius:20px;

    }

    .card::after{

        width:220px;
        height:220px;

        filter:blur(120px);

        left:-100px;
        top:-80px;

    }

    .logo{

        width:80px;
        height:80px;

    }

    small{

        font-size:12px;
        letter-spacing:1px;

    }

    h1{

        font-size:32px;
        line-height:1.2;

    }

    h2{

        font-size:20px;

    }

    .desc{

        margin-top:18px;

        font-size:14px;
        line-height:1.7;

    }

    .discord-btn{

        width:100%;
        height:50px;

        font-size:16px;

        border-radius:12px;

        margin-top:25px;

    }

    .discord-btn i{

        font-size:20px;

    }

    .social{

        gap:12px;

        flex-wrap:wrap;

    }

    .social a{

        width:42px;
        height:42px;

        font-size:16px;

    }

    .footer{

        font-size:11px;

        line-height:1.6;

    }

    .bg-light{

        display:none;

    }

}

/* ==========================
   SMALL PHONE
========================== */

@media (max-width:480px){

    body{

        padding:10px;

    }

    .card{

        padding:20px 15px;

    }

    .logo{

        width:65px;
        height:65px;

    }

    h1{

        font-size:26px;

    }

    h2{

        font-size:17px;

    }

    .desc{

        font-size:13px;

    }

    .discord-btn{

        height:46px;

        font-size:15px;

    }

    .social a{

        width:38px;
        height:38px;

    }

}

/* ปิด Animation บนมือถือเพื่อให้ลื่น */

@media (max-width:768px){

    .card,
    .logo,
    h1,
    .card .shine{

        animation:none;

    }

}