/* =====================================
   DJ TOM-S HUB V3
===================================== */

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

:root{

    --red:#ff2b2b;
    --red2:#ff5b2b;

    --bg:#080808;

    --card:#121212;

    --text:#ffffff;

    --text2:#bbbbbb;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:
    radial-gradient(circle at top,
    rgba(255,0,0,.18),
    transparent 45%),

    radial-gradient(circle at bottom,
    rgba(255,60,0,.10),
    transparent 40%),

    #080808;

    min-height:100vh;

    overflow-x:hidden;

}

/* subtiele spikkel */

body:before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.06;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:5px 5px;

}

/* ===================================== */

.hub{

max-width:560px;

margin:auto;

padding:30px 20px 60px;

}

/* ===================================== */

.hero{

text-align:center;

margin-bottom:35px;

}

.logo{

display:block;

width:100%;

max-width:520px;

margin:auto;

filter:

drop-shadow(0 0 25px rgba(255,60,0,.75))

drop-shadow(0 0 55px rgba(255,0,0,.35));

animation:

glow 4s infinite ease-in-out;

}

@keyframes glow{

0%{

filter:

drop-shadow(0 0 18px rgba(255,60,0,.45));

}

50%{

filter:

drop-shadow(0 0 35px rgba(255,60,0,.95));

}

100%{

filter:

drop-shadow(0 0 18px rgba(255,60,0,.45));

}

}

.welcome{

margin-top:12px;

font-size:20px;

font-weight:600;

color:#ddd;

}

/* ===================================== */

.status-card{

display:flex;

gap:18px;

align-items:center;

padding:22px;

background:rgba(15,15,15,.92);

border-radius:20px;

border:1px solid rgba(255,60,0,.65);

box-shadow:

0 0 25px rgba(255,0,0,.18);

margin-bottom:25px;

}

.status-dot{

width:18px;

height:18px;

border-radius:50%;

background:#888;

}

.offline .status-dot{

background:#999;

}

.live .status-dot{

background:#00ff6e;

box-shadow:

0 0 15px #00ff6e;

}

.status-label{

display:inline-block;

margin-bottom:6px;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#ff5b2b;

}

.status-card h1{

font-size:26px;

margin-bottom:6px;

}

.status-card p{

line-height:1.5;

color:#ccc;

}

/* ===================================== */

.menu{

display:flex;

flex-direction:column;

gap:14px;

}

.menu-item{

display:flex;

align-items:center;

gap:18px;

padding:18px;

text-decoration:none;

color:white;

background:

linear-gradient(180deg,#181818,#101010);

border-radius:18px;

border:1px solid rgba(255,50,0,.45);

transition:.25s;

box-shadow:

0 0 15px rgba(255,0,0,.12);

}

.menu-item:hover{

transform:

translateY(-4px);

border-color:#ff3a3a;

box-shadow:

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

}

.menu-icon{

width:55px;

font-size:28px;

text-align:center;

color:var(--red);

}

.menu-text{

flex:1;

}

.menu-text strong{

display:block;

font-size:21px;

}

.menu-text span{

display:block;

margin-top:4px;

font-size:13px;

color:#bfbfbf;

}

.arrow{

font-size:22px;

color:#666;

transition:.25s;

}

.menu-item:hover .arrow{

transform:

translateX(6px);

color:var(--red);

}

/* ===================================== */

.gig-section{

margin-top:45px;

}

.section-title{

display:flex;

align-items:center;

gap:15px;

margin-bottom:18px;

}

.section-title span{

height:1px;

flex:1;

background:#ff3a3a;

}

.section-title h2{

font-size:24px;

text-transform:uppercase;

}

.gig-card{

display:flex;

gap:20px;

padding:20px;

border-radius:20px;

background:#121212;

border:1px solid rgba(255,60,0,.55);

box-shadow:

0 0 20px rgba(255,0,0,.12);

}

.date-box{

width:90px;

text-align:center;

border-radius:15px;

padding:12px;

background:#181818;

}

.date-box small{

display:block;

font-size:12px;

text-transform:uppercase;

color:#ff5b2b;

}

.day{

display:block;

font-size:44px;

font-weight:bold;

margin:8px 0;

}

.month{

display:block;

font-style:normal;

font-weight:bold;

color:#ff5b2b;

}

.gig-info h3{

font-size:23px;

margin-bottom:8px;

}

.gig-info p{

color:#ccc;

line-height:1.5;

}

.gig-info small{

display:block;

margin-top:10px;

color:#888;

}

/* ===================================== */

.footer-line{

height:1px;

background:#ff3a3a;

margin:40px 0 20px;

opacity:.5;

}

footer{

text-align:center;

color:#888;

font-size:13px;

line-height:1.8;

}

/* ===================================== */

@media(max-width:600px){

.logo{

max-width:430px;

}

.status-card{

flex-direction:column;

text-align:center;

}

.gig-card{

flex-direction:column;

text-align:center;

}

.date-box{

width:100%;

}

}
.route-button{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:18px;

padding:12px 18px;

background:#ff2b2b;

color:white;

text-decoration:none;

border-radius:12px;

font-weight:bold;

transition:.25s;

}

.route-button:hover{

background:#ff4545;

transform:translateY(-2px);

}