body{

margin:0;
background:#020202;

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

min-height:100vh;

font-family:'VT323', monospace;
color:white;

padding-top:40px;
padding-bottom:40px;

}


/* TV exterior */

.tv-container{

margin-top:40px;
margin-bottom:40px;

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

background:#1b1b1b;

border:14px solid #2e2e2e;

border-radius:30px;

box-shadow:
0 0 120px rgba(0,0,0,0.9),
inset 0 0 60px rgba(0,0,0,0.8);

padding:25px;

}


/* pantalla */

.tv-screen{

background:#0b0b0b;

border-radius:20px;

padding:40px;

box-shadow:
inset 0 0 80px rgba(0,0,0,0.8);

text-align:center;

height:auto;
overflow:visible;

}


/* titulo */

.logo{

font-family:'VT323', monospace;
font-size:48px;

letter-spacing:4px;

color:#c9f048;

text-shadow:
0 0 10px #c9f048,
0 0 30px rgba(201,240,72,0.7);

/* evita que se rompa la palabra */
white-space: nowrap;

}


/* menu estilo videojuego */

.menu{

display:flex;
justify-content:center;
gap:25px;
margin-bottom:20px;

}

.menu-item{

text-decoration:none;
color:white;

padding:10px 14px;

border:2px solid #444;

background:#111;

transition:all .2s ease;

}


/* efecto videojuego */

.menu-item:hover{

color:#c9f048;

border-color:#c9f048;

box-shadow:
0 0 8px #c9f048,
0 0 20px rgba(201,240,72,0.6);

transform:scale(1.1);

}


/* separador */

.divider{

height:1px;
background:#333;
margin:30px 0;

}


/* single */

.single-title{

font-size:16px;
margin-bottom:30px;

color:#ffd9ec;

}


/* video */

.video-container{

position:relative;
width:100%;
padding-top:56.25%;

margin-bottom:25px;

}

.video-container iframe{

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

border-radius:10px;

}


/* spotify */

.spotify-container{

max-width:600px;
margin:0 auto 30px auto;

}


/* redes */

.socials{

margin-top:20px;

}

.social-links{

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

}

.social-links a{

text-decoration:none;

color:white;

border:2px solid #444;

padding:8px 12px;

font-size:10px;

transition:all .2s;

}

.social-links a:hover{

color:#ffb347;

border-color:#ffb347;

box-shadow:
0 0 10px rgba(255,179,71,0.7);

}

#promo-overlay{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.95);

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

z-index:9999;

font-family:'VT323', monospace;

}

.promo-box{

text-align:center;
color:white;

max-width:420px;

}

.promo-cover{

width:100%;
border-radius:10px;
margin-bottom:20px;

}

.promo-box h2{

font-size:28px;
color:#c9f048;

text-shadow:0 0 10px #c9f048;

}

.promo-button{

display:inline-block;

margin-top:15px;

padding:12px 18px;

border:2px solid #c9f048;

color:#c9f048;

text-decoration:none;

}

.promo-button:hover{

background:#c9f048;
color:black;

}

#close-promo{

position:absolute;
top:30px;
right:40px;

background:none;
border:none;

font-size:30px;
color:white;

cursor:pointer;

}