/* =====================================
   DJ LUCY & RISI
   GENERATION3000
   PART 1
===================================== */

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

:root{

    --green:#39ff14;
    --blue:#00e5ff;
    --yellow:#ffee00;
    --pink:#ff0088;
    --dark:rgb(0, 38, 255);

}

body{

    background:#0022ff;

    color:#39ff14;

    font-family:Segoe UI,Arial,sans-serif;

    overflow-x:hidden;

}

/* ===========================
   VIDEO BACKGROUND
=========================== */

.bg-video{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-20;

}

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

.overlay{

    position:fixed;

    inset:0;

    background:rgba(5, 5, 5, 0.219);

    z-index:-19;

}

/* ===========================
   STARS
=========================== */

.stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.45;

    background-image:

    radial-gradient(rgb(255, 0, 0) 1px,transparent 1px),

    radial-gradient(#39ff14 1px,transparent 1px),

    radial-gradient(#00e5ff 1px,transparent 1px);

    background-size:

    180px 180px,

    260px 260px,

    320px 320px;

    animation:starsMove 120s linear infinite;

}

/* ===========================
   NEBULA
=========================== */

.nebula{

    position:fixed;

    inset:0;

    pointer-events:none;

    filter:blur(80px);

    background:

    radial-gradient(circle at 20% 30%,rgba(57,255,20,.12),transparent 30%),

    radial-gradient(circle at 80% 70%,rgba(0,229,255,.10),transparent 35%),

    radial-gradient(circle at 50% 50%,rgba(0,76,255,.08),transparent 40%);

    animation:nebulaMove 25s ease-in-out infinite alternate;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-500px);

}

}

@keyframes nebulaMove{

from{

transform:translateX(-60px);

}

to{

transform:translateX(60px);

}

}/* =====================================
   HEADER
===================================== */

.topbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    background:rgb(55, 0, 255);

    backdrop-filter:blur(15px);

    border-bottom:2px solid #39ff14;

    z-index:9999;

}

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

.logo{

    text-decoration:yes;

    font-size:36px;

    font-weight:900;

    color:#73ff00;

    text-shadow:

        0 0 10px #ddff00,

        0 0 25px #39ff14,

        0 0 45px #0066ff;

}

.logo span{

    color:#0084ff;

}

/* =====================================
   MENU
===================================== */

.menu{

    display:flex;

    gap:10px;

    align-items:center;

}

.menu a{

    text-decoration:none;

    color:#39ff14;

    font-weight:700;

    padding:10px 16px;

    border-radius:12px;

    transition:.35s;

}

.menu a:hover{

    color:#ff00aa;

    transform:translateY(-2px);

    box-shadow:

        0 0 10px #00ff26,

        0 0 30px #00e5ff,

        0 0 60px #fc0075;

}

.menu .active{

    color:#00c8ff;

}

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

.hero{

    height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero h1{

    font-size:70px;

    color:#39ff14;

    text-shadow:

        0 0 20px #39ff14,

        0 0 45px #00e5ff,

        0 0 80px #ffee00;

}

.hero h2{

    margin-top:20px;

    font-size:34px;

    color:#00e5ff;

}

.hero p{

    margin-top:25px;

    font-size:22px;

    color:#15ff00;

}

/* =====================================
   ENTER RADIO
===================================== */

.enter-btn{

    margin-top:40px;

    display:inline-block;

    text-decoration:none;

    color:#39ff14;

    font-size:22px;

    font-weight:bold;

    padding:18px 45px;

    border:2px solid #39ff14;

    border-radius:14px;

    transition:.35s;

    box-shadow:

        0 0 20px #39ff14,

        0 0 40px #00e5ff;

}

.enter-btn:hover{

    background:#39ff14;

    color:#0040ff;

    transform:scale(1.05);

    box-shadow:

        0 0 30px #39ff14,

        0 0 70px #00e5ff,

        0 0 120px #ffee00;

}/* =====================================
   NOW PLAYING
===================================== */

.now-playing{

    width:90%;

    max-width:950px;

    margin:80px auto;

    display:flex;

    align-items:center;

    gap:40px;

    padding:35px;

    border-radius:25px;

    background:rgb(255, 0, 119);

    backdrop-filter:blur(12px);

    border:2px solid #ff00fb;

    box-shadow:

        0 0 25px #48ff00,

        0 0 60px #fbff00;

}

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

.album{

    width:150px;

    height:150px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:58px;

    font-weight:bold;

    color:#ff0000;

    border:2px solid #39ff14;

    background:rgb(208, 255, 0);

    transition:.35s;

    box-shadow:

        0 0 20px #39ff14,

        0 0 45px #00e5ff;

}

.album:hover{

    transform:scale(1.08);

    box-shadow:

        0 0 35px #39ff14,

        0 0 70px #00e5ff,

        0 0 100px #ffee00;

}

.album.active{

    animation:g3Pulse 1.5s infinite;

}

@keyframes g3Pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

        box-shadow:

            0 0 35px #39ff14,

            0 0 80px #00e5ff,

            0 0 120px #ffee00;

    }

    100%{

        transform:scale(1);

    }

}

/* =====================================
   TRACK INFO
===================================== */

.track{

    flex:1;

}

.track h3{

    color:#39ff14;

    font-size:20px;

    margin-bottom:10px;

}

.track h2{

    color:#ffee00;

    font-size:34px;

    margin-bottom:10px;

}

.track p{

    color:#4dff00;

    font-size:20px;

    margin-bottom:20px;

}

/* =====================================
   PROGRESS BAR
===================================== */

.progress{

    width:100%;

    height:10px;

    background:#000000;

    border-radius:20px;

    overflow:hidden;

}

.bar{

    width:55%;

    height:100%;

    background:linear-gradient(90deg,#39ff14,#00e5ff);

    animation:musicBar 3s ease-in-out infinite;

}

@keyframes musicBar{

    0%{

        width:20%;

    }

    50%{

        width:85%;

    }

    100%{

        width:20%;

    }

}

.times{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

    color:#39ff14;

    font-size:15px;

}

/* =====================================
   AUDIO
===================================== */

#radioPlayer{

    display:none;

}/* =====================================
   STORY PAGE
===================================== */

.story-page{

    width:90%;

    max-width:1200px;

    margin:150px auto 80px auto;

    padding:50px;

    text-align:center;

    background:transparent;
    
backdrop-filter: blur(12px);

    border:2px solid #39ff14;

    border-radius:25px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 25px #39ff14,
        0 0 70px #00e5ff;

}

.story-page h1{

    color:#39ff14;

    font-size:60px;

    margin-bottom:25px;

    text-shadow:
        0 0 20px #39ff14,
        0 0 50px #00e5ff;

}

.story-page h2{

    color:#ffee00;

    margin-bottom:30px;

    font-size:34px;

}

.story-text{

    color:#39ff14;

    font-size:22px;

    line-height:1.9;

}

.story-text p{

    margin:15px 0;

}

.story-text h3{

    color:#00e5ff;

    margin-top:20px;

}

.story-image{

    display:block;
    width:90%;
    max-width:1200px;
    height:auto;

    margin:40px auto;

}
/* =====================================
   OFFICIAL STATEMENT
===================================== */

.official-statement{

    width:90%;

    max-width:1400px;

    margin:80px auto;

    padding:50px;

    text-align:center;

    background:transparent;

    border:2px solid #39ff14;

    border-radius:25px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px #39ff14,
        0 0 70px #00e5ff;

}

.official-statement h1{

    color:#39ff14;

    font-size:54px;

    margin-bottom:25px;

    text-shadow:
        0 0 20px #39ff14,
        0 0 45px #00e5ff;

}

.official-statement h2{

    color:#ffee00;

    font-size:30px;

    margin:35px 0 20px;

}

.official-statement p{

    color:#39ff14;

    font-size:22px;

    line-height:1.8;

    margin:12px 0;

}

.official-statement strong{

    color:#ff008c;

    font-size:24px;

}

.official-statement a{

    color:#39ff14;

    text-decoration:none;

    font-weight:bold;

}

.official-statement a:hover{

    color:#ffee00;

}

/* =====================================
   GALLERY
===================================== */
.gallery-info{

    width:100%;

    text-align:center;

    font-size:28px;

    color:#39ff14;

    margin:30px auto 60px auto;

    text-shadow:
        0 0 10px #39ff14,
        0 0 30px #00e5ff;

}

.gallery-sub{

    font-size:26px;

    color:#00e5ff;

    text-align:center;

    margin-bottom:70px;

    letter-spacing:3px;

    text-shadow:
        0 0 10px #00e5ff;

}
.gallery-page{

    width:95%;

    max-width:1600px;

    margin:140px auto 80px auto;

    text-align:center;

}

.gallery-page h1{

    margin-top:40px;

    margin-bottom:15px;

}

.gallery-page h2{

    font-size:54px;

    color:#ffee00;

    margin-bottom:20px;

    text-shadow:
        0 0 15px #ffee00,
        0 0 40px #39ff14;

}

.gallery-subtitle{

    font-size:30px;

    color:#00e5ff;

    letter-spacing:6px;

    margin-bottom:35px;

    text-align:center;

    text-shadow:
        0 0 15px #00e5ff;

}

.gallery-intro{

    font-size:24px;

    color:#39ff14;

    margin-bottom:70px;

    text-align:center;

    text-shadow:
        0 0 15px #39ff14;

}

.gallery-grid{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:45px;

}

.gallery-image{

    width:90%;

    max-width:1200px;

    border-radius:20px;

    border:2px solid #39ff14;

    cursor:pointer;

    transition:.35s;

    box-shadow:
        0 0 20px #39ff14,
        0 0 45px #00e5ff;

}

.gallery-image:hover{

    transform:scale(1.03);

    box-shadow:
        0 0 35px #39ff14,
        0 0 80px #00e5ff,
        0 0 120px #ffee00;

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

footer{

    width:100%;

    margin-top:80px;

    padding:40px 20px;

    text-align:center;

    background:transparent;

    border-top:2px solid #39ff14;

    color:#39ff14;

    box-shadow:
        0 0 20px #39ff14;

}

footer h2{

    color:#ffee00;

    margin-bottom:15px;

}

footer p{

    color:#39ff14;

    line-height:1.8;

    font-size:18px;

}

footer a{

    color:#39ff14;

    text-decoration:none;

    transition:.3s;

}

footer a:hover{

    color:#04ff00;

}

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

.fade{

    animation:fadeIn 1.2s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1000px){

.topbar{

    flex-direction:column;

    height:auto;

    padding:20px;

}

.logo{

    font-size:28px;

    margin-bottom:15px;

}

.menu{

    flex-wrap:wrap;

    justify-content:center;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:26px;

}

.hero p{

    font-size:18px;

}

.now-playing{

    flex-direction:column;

    text-align:center;

}

.album{

    width:130px;

    height:130px;

    font-size:48px;

}

.track h2{

    font-size:28px;

}

.story-page{

    padding:30px;

}

.story-page h1{

    font-size:42px;

}

.story-text{

    font-size:18px;

}

.official-statement{

    padding:30px;

}

.official-statement h1{

    font-size:38px;

}

.official-statement h2{

    font-size:24px;

}

.official-statement p{

    font-size:18px;

}

.gallery-image{

    width:96%;

}

}
/* ==========================
   CONTACT CARD
========================== */

.contact-card{

    width:90%;
    max-width:900px;

    margin:60px auto;

    padding:50px;

    border:2px solid #39ff14;

    border-radius:35px;

    background:transparent;

    backdrop-filter:blur(15px);

    text-align:center;

    animation:contactPulse 4s ease-in-out infinite;

}@keyframes contactPulse{

0%{

    transform:scale(1);

    box-shadow:
        0 0 20px #39ff14,
        0 0 40px #00e5ff;

}

50%{

    transform:scale(1.015);

    box-shadow:
        0 0 40px #39ff14,
        0 0 80px #00e5ff,
        0 0 120px #ffee00;

}

100%{

    transform:scale(1);

    box-shadow:
        0 0 20px #39ff14,
        0 0 40px #00e5ff;

}
.contact-box{

    max-width:1000px;

    margin:170px auto 80px auto;

    padding:60px;

    text-align:center;

    background:transparent;

    backdrop-filter:blur(12px);

    border:2px solid #39ff14;

    border-radius:35px;

    box-shadow:
        0 0 25px #39ff14,
        0 0 60px #00e5ff;

    animation:g3Pulse 4s infinite;

}.contact-box h1{

    font-size:64px;

    color:#39ff14;

    margin-bottom:20px;

}.contact-qr{

    width:280px;

    max-width:80%;

    border-radius:30px;

    margin:30px auto;

    display:block;

    box-shadow:
        0 0 20px #39ff14,
        0 0 45px #00e5ff;

}
.contact-box a{

    color:#00e5ff;

    text-decoration:none;

    font-size:24px;

}
.contact-box a:hover{

    color:#ffee00;

}
}/* ==========================================
              CONTACT PAGE
========================================== */

.contact-page{

    width:100%;

    display:flex;

    justify-content:center;

    padding:170px 20px 80px;

    box-sizing:border-box;

}

.contact-card{

    width:100%;

    max-width:1100px;

    padding:60px;

    text-align:center;

    color:#39ff14;

    background:transparent;

    backdrop-filter:blur(12px);

    border:2px solid #39ff14;

    border-radius:40px;

    box-shadow:
        0 0 25px #39ff14,
        0 0 70px #00e5ff;

    animation:contactPulse 4s ease-in-out infinite;

}

.contact-card h1{

    font-size:68px;

    color:#ffee00;

    margin-bottom:10px;

    text-shadow:
        0 0 20px #ffee00,
        0 0 45px #ffee00;

}

.contact-card h2{

    font-size:36px;

    color:#39ff14;

    margin-bottom:15px;

}

.contact-card h3{

    font-size:28px;

    color:#ffee00;

    margin:35px 0 15px;

}

.contact-card p{

    font-size:24px;

    line-height:1.8;

    margin:8px 0;

}

.contact-subtitle{

    font-size:24px;

    color:#00e5ff;

    margin-bottom:35px;

}

.contact-card hr{

    margin:35px auto;

    width:90%;

    border:0;

    border-top:2px solid rgba(57,255,20,.5);

}

.contact-card a{

    color:#00e5ff;

    text-decoration:none;

    transition:.3s;

}

.contact-card a:hover{

    color:#ffee00;

    text-shadow:0 0 15px #ffee00;
    text-shadow:0 0 20px #ffee00,
                0 0 40px #ffee00,
                0 0 80px #ffcc00;

}

.contact-qr{

    width:260px;

    max-width:90%;

    display:block;

    margin:35px auto;

    border-radius:25px;

    border:4px solid #39ff14;

    box-shadow:
        0 0 25px #39ff14,
        0 0 60px #00e5ff;

}

@keyframes contactPulse{

0%{

transform:scale(1);

box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;

}

50%{

transform:scale(1.01);

box-shadow:
0 0 40px #39ff14,
0 0 90px #00e5ff,
0 0 120px #ffee00;

}

100%{

transform:scale(1);

box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;

}

}.contact-logo{
    text-align:center;
    margin-bottom:30px;
}

.contact-logo img{
    width:320px;
    max-width:320%;
    height:auto;

    filter:
        drop-shadow(0 0 10px #39ff14)
        drop-shadow(0 0 20px #00e5ff)
        drop-shadow(0 0 35px #ffe600);

    transition:0.4s;
}

.contact-logo img:hover{
    transform:scale(1.05);
    filter:
        drop-shadow(0 0 15px #39ff14)
        drop-shadow(0 0 30px #00e5ff)
        drop-shadow(0 0 45px #ffe600);
}@keyframes glow{

0%{
transform:scale(1);
filter:drop-shadow(0 0 15px #39ff14);
}

50%{
transform:scale(1.03);
filter:
drop-shadow(0 0 30px #39ff14)
drop-shadow(0 0 35px #00e5ff)
drop-shadow(0 0 45px #62ff00);
}

100%{
transform:scale(1);
filter:drop-shadow(0 0 15px #39ff14);
}

}

.contact-logo img{
animation:glow 4s ease-in-out infinite;

}.founder-name{
    font-size:40px;
    color:#39ff14;
    font-weight:bold;
    text-align:center;
    margin:20px 0;
    text-shadow:
        0 0 10px #39ff14,
        0 0 30px #00eaff,
        0 0 50px #39ff14;
}
/*==========================
      GENERATION3000 BREATH
==========================*/

@keyframes universeBreath{

0%{
transform:scale(1);
box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;
}

50%{
transform:scale(1.006);
box-shadow:
0 0 40px #39ff14,
0 0 100px #00e5ff,
0 0 140px #ffee00;
}

100%{
transform:scale(1);
box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;
}

}

.story-page{

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

}

/* =====================================
   END
===================================== */

/* =====================================
      GENERATION3000 BREATH
===================================== */

@keyframes universeBreath{

0%{

transform:scale(1);

box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;

filter:brightness(1);

}

50%{

transform:scale(1.006);

box-shadow:
0 0 40px #39ff14,
0 0 100px #00e5ff,
0 0 150px #ffee00;

filter:brightness(1.08);

}

100%{

transform:scale(1);

box-shadow:
0 0 25px #39ff14,
0 0 60px #00e5ff;

filter:brightness(1);

}

}

.story-page{

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

}/* =====================================
      DOWNLOAD BUTTONS
===================================== */

.download-grid{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin-top:40px;

}

.download-grid .enter-btn{

min-width:220px;
text-align:center;

animation:g3Pulse 4s ease-in-out infinite;

}.video-bg{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-3;

opacity:.35;

pointer-events:none;

}


body::before{

    content:"";

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:transparent;

    z-index:-2;

    pointer-events:none;

}

/* ****************************************
   ESHOP SYSTEM
**************************************** */
/* SHOP */

.shop-page{

padding:170px 30px 80px;

text-align:center;

}

.shop-page h1{

font-size:72px;

color:#39ff14;

text-shadow:0 0 30px #39ff14;

margin-bottom:20px;

}

.shop-page h2{

font-size:38px;

color:#ffee00;

margin-bottom:20px;

}

.shop-subtitle{

font-size:24px;

color:#00e5ff;

margin-bottom:60px;

}

.shop-grid{
display:flex;
}


/* ===========================
   SHOP PAGE
=========================== */

.shop-page{
    max-width:1400px;
    margin:140px auto 80px;
    padding:40px;
    text-align:center;
}

.shop-page h1{
    font-size:72px;
    color:#39ff14;
    text-shadow:
        0 0 15px #39ff14,
        0 0 35px #00e5ff;
    margin-bottom:20px;
}

.shop-page h2{
    font-size:42px;
    color:#ffee00;
    margin-bottom:20px;
}

.shop-subtitle{
    font-size:24px;
    color:#00e5ff;
    margin-bottom:60px;
}

.shop-grid{
    display:flex;
    justify-content:center;
}

.shop-card{
    width:900px;
    background:rgba(0,30,120,.55);
    border:2px solid #39ff14;
    border-radius:35px;
    padding:35px;
    box-shadow:
        0 0 25px #39ff14,
        0 0 80px rgba(0,229,255,.4);
}

.shop-image{
    width:100%;
    border-radius:25px;
    margin-bottom:30px;
}

.shop-card h3{
    font-size:42px;
    color:#39ff14;
    margin:20px 0;
}

.shop-category{
    font-size:24px;
    color:#ffee00;
}

.shop-description{
    font-size:22px;
    color:rgb(255, 0, 0);
    margin:25px 0;
    line-height:1.7;
}

.shop-specs{
    text-align:left;
    width:70%;
    margin:35px auto;
}

.shop-specs p{
    font-size:22px;
    color:rgb(255, 234, 0);
    margin:12px 0;
}

.shop-price{
    font-size:48px;
    color:#39ff14;
    font-weight:bold;
    margin:35px 0;
    text-shadow:0 0 20px #39ff14;
}

.shop-button{
    background:#39ff14;
    color:#80ff00;
    border:none;
    border-radius:50px;
    padding:18px 55px;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.shop-button:hover{
    transform:scale(1.08);
    box-shadow:0 0 35px #39ff14;
}
/*=========================================
SHOP GRID
=========================================*/

.shop-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));

    gap:40px;

    max-width:1600px;

    margin:60px auto;

    padding:20px;

}

.shop-card{

    background:rgba(10, 38, 255, 0.45);

    border:2px solid #39ff14;

    border-radius:30px;

    overflow:hidden;

    text-align:center;

    box-shadow:0 0 25px #39ff14;

    transition:.35s;

    backdrop-filter:blur(12px);

}

.shop-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 0 30px #39ff14,

        0 0 60px #00e5ff;

}

.shop-image{

    width:90%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    border-radius:22px;

}


.shop-card h3{

    font-size:34px;

    color:#39ff14;

    margin:25px 20px 10px;

}

.shop-category{

    color:#ffee00;

    font-size:24px;

    font-weight:bold;

}

.shop-description{

    width:85%;

    margin:auto;

    color:rgb(55, 255, 0);

    line-height:1.8;

    font-size:20px;

}

.shop-specs{

    width:80%;

    margin:25px auto;

    text-align:left;

    color:white;

    font-size:20px;

}

.shop-price{

    font-size:52px;

    font-weight:bold;

    color:#39ff14;

    text-shadow:0 0 25px #39ff14;

    margin:30px 0;

}

.shop-button{

    background:#39ff14;

    color:#001b4d;

    font-size:24px;

    font-weight:bold;

    border:none;

    border-radius:50px;

    padding:18px 60px;

    margin-bottom:35px;

    cursor:pointer;

    transition:.3s;

}

.shop-button:hover{

    background:#00e5ff;

    box-shadow:0 0 35px #00e5ff;

    transform:scale(1.05);

}
/* =======================================================
   G3 UNIVERSE CLOCK
======================================================= */

.g3-clock{

width:520px;

margin:70px auto;

padding:35px;

text-align:center;

background:rgba(5,20,80,.45);

border:2px solid #00d9ff;

border-radius:25px;

backdrop-filter:blur(12px);

box-shadow:

0 0 25px #00d9ff,

0 0 60px #39ff14,

0 0 120px rgb(38, 255, 0);

animation:g3Glow 4s infinite;

}

.g3-title{

font-family:Orbitron,sans-serif;

font-size:34px;

color:#39ff14;

letter-spacing:3px;

text-shadow:

0 0 15px #39ff14,

0 0 40px #39ff14;

}

.g3-subtitle{

margin-top:10px;

font-size:16px;

color:#00d9ff;

letter-spacing:5px;

}

.g3-time{

margin-top:25px;

font-family:Orbitron,sans-serif;

font-size:74px;

font-weight:bold;

color:#39ff14;

text-shadow:

0 0 20px #39ff14,

0 0 40px #39ff14,

0 0 80px #39ff14;

}

.g3-date{

margin-top:15px;

font-family:Orbitron,sans-serif;

font-size:32px;

color:#00d9ff;

text-shadow:

0 0 20px #00d9ff;

}

.g3-status{

margin-top:20px;

font-size:16px;

color:#39ff14;

letter-spacing:4px;

animation:g3Blink 1.5s infinite;

}

@keyframes g3Glow{

50%{

box-shadow:

0 0 40px #39ff14,

0 0 80px #00d9ff,

0 0 150px rgba(0,255,120,.6);

}

}

@keyframes g3Blink{

50%{

opacity:.35;

}

}.vote-box{

max-width:700px;
margin:auto;
padding:40px;

border:2px solid #00d8ff;
border-radius:25px;

background:rgba(0,20,70,.55);

box-shadow:
0 0 20px #00d8ff,
0 0 50px #39ff14;

text-align:center;

font-family:Orbitron,sans-serif;

}

.vote-box h2{

color:#39ff14;
font-size:42px;
text-shadow:0 0 20px #39ff14;

}

.vote-box p{

color:#00d8ff;
letter-spacing:3px;

}

.vote-buttons{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:30px;

}

.vote-buttons button{

    padding:18px;
    font-size:20px;
    font-family:Orbitron,sans-serif;
    border:none;
    border-radius:15px;
    cursor:pointer;
    transition:.35s;
    font-weight:bold;

}


.love-btn{
    background:#ff0055;
    color:#ffffff;
}

.amazing-btn{
    background:#39ff14;
    color:#002244;
}

.future-btn{
    background:#00c8ff;
    color:#001133;
}

.improve-btn{
    background:#ffe600;
    color:#222222;
}

.vote-buttons button:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:
        0 0 20px #39ff14,
        0 0 40px #00d8ff,
        0 0 60px #ff00ff;

}