<style>

*{ box-sizing:border-box; }

body{
    margin:0;
    color:#fff3e8;
    font-family:'VT323', monospace;
    background:
        radial-gradient(circle at top, #3a421a 0%, #252d13 55%, #0f1208 100%);
    overflow-x:hidden;
}

/* animated stars */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
      radial-gradient(#fff1d6 1px, transparent 1px);
    background-size:40px 40px;
    opacity:.10;
    animation:starsMove 120s linear infinite;
    pointer-events:none;
}

@keyframes starsMove{
    from{transform:translateY(0);}
    to{transform:translateY(200px);}
}

/* scanlines */
body::after{
    content:"";
    position:fixed;
    inset:0;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 1px,
        transparent 3px
      );
    pointer-events:none;
}

/* layout */
.wrapper{
    width:1200px;
    margin:auto;
    padding:40px 20px;
}

.header{
    position:relative;
    margin-bottom:30px;
    border:2px solid #f6c177;
    background:
      linear-gradient(180deg,#3a2a2f,#1c1613);
    padding:30px;
    box-shadow:
      0 0 30px rgba(246,193,119,.25),
      inset 0 0 20px rgba(255,255,255,.05);
}

.logo{
    font-family:'Press Start 2P', cursive;
    font-size:28px;
    line-height:1.6;
    color:#ffd1dc;
    text-shadow:
      0 0 8px #ff7aa2,
      0 0 20px #f6c177;
}

.subtitle{
    margin-top:12px;
    color:#f6c177;
    font-size:20px;
}

.nav{
    margin-top:25px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.nav a{
    color:#fff3e8;
    text-decoration:none;
    border:1px solid #b7f36b;
    background:#2a241f;
    padding:8px 14px;
    transition:.2s;
    box-shadow:0 0 10px rgba(183,243,107,.15);
}

.nav a:hover{
    background:#b7f36b;
    color:#14110f;
    transform:translateY(-2px);
}

/* grid */
.grid{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px;
}

/* panels */
.panel{
    background:
      linear-gradient(180deg,
      rgba(58,42,47,.95),
      rgba(20,17,15,.96));
    border:1px solid #f6c177;
    padding:18px;
    position:relative;
    overflow:hidden;

    box-shadow:
      0 0 20px rgba(246,193,119,.15),
      inset 0 0 20px rgba(255,255,255,.03);
}

.panel-title{
    color:#b7f36b;
    font-size:24px;
    margin-bottom:14px;
    border-bottom:1px solid #6b8f3a;
    padding-bottom:8px;
}

/* sidebar */
.sidebar{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.avatar{
    width:100%;
    border:2px solid #f6c177;
    image-rendering:pixelated;
}

.status{
    color:#ffd1dc;
}

.music-player{
    background:#1a1512;
    padding:10px;
    border:1px solid #6b8f3a;
}

.blinkies{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.blink{
    background:#2a241f;
    border:1px solid #b7f36b;
    padding:4px 8px;
    color:#f6c177;
    font-size:14px;
}

/* main */
.hero{
    min-height:300px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.hero h1{
    font-size:72px;
    margin:0;
    color:#ffd1dc;
    text-shadow:
      0 0 10px #f6c177,
      0 0 30px #b7f36b;
}

.hero p{
    max-width:700px;
    font-size:24px;
    color:#fff3e8;
}

.floating-box{
    position:absolute;
    right:20px;
    bottom:20px;
    width:180px;
    background:#1a1512;
    border:1px solid #b7f36b;
    padding:10px;
    font-size:14px;
    color:#f6c177;
}

/* cards */
.cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:20px;
}

.card{
    background:#1a1512;
    border:1px solid #6b8f3a;
    padding:16px;
}

.card h3{
    margin-top:0;
    color:#b7f36b;
}

/* footer */
.footer{
    margin-top:40px;
    text-align:center;
    color:#f6c177;
    padding:20px;
    font-size:14px;
}

/* responsive */
@media(max-width:1100px){
    .wrapper{width:100%;}
    .grid{grid-template-columns:1fr;}
    .hero h1{font-size:30px;}
    .cards{grid-template-columns:1fr;}
}

</style>
