html,
body{
margin:0;
padding:0;
overflow:hidden;
width:100%;
height:100%;
font-family:sans-serif;
}

body{
background:#07111f;
transition:2s;
}

#stage{
width:100%;
height:100%;
position:relative;
}

/* LED */

#led-stage{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

#led-name,
#led-text{

font-size:clamp(24px,7vw,72px);

font-weight:800;

letter-spacing:4px;

color:#6ff;

text-shadow:
0 0 5px #6ff,
0 0 10px #6ff,
0 0 20px #6ff,
0 0 40px #6ff,
0 0 80px #6ff;
}

#led-name{
margin-bottom:20px;
}

.scanline{
position:absolute;
width:100%;
height:6px;

background:
linear-gradient(
90deg,
transparent,
white,
transparent
);

filter:blur(5px);
}

/* cake */

#cake-scene{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

opacity:0;
}

#cake-svg{
width:min(90vw,450px);
height:auto;
}

#platform rect{
fill:#d6b07d;
}

#layer1 rect,
#layer2 rect{
fill:#ffcad4;
}

#cream1 path,
#cream2 path{
fill:#fff;
}

#berries circle{
fill:#ff2f5e;
}

#candles rect{
fill:#ffe66d;
}

#flag path{
fill:#ffd166;
}

#message-card{

position:absolute;

bottom:8%;

width:85%;

max-width:500px;

padding:20px;

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

backdrop-filter:blur(20px);

border-radius:20px;

text-align:center;

opacity:0;
}

#particles{

position:fixed;
inset:0;
pointer-events:none;
}