@import url('https://fonts.googleapis.com/css2?family=VT323&family=Nunito:wght@300;700;900&display=swap');

:root{
  --bg:#0c0714;
  --bg2:#160d24;
  --pink:#ff4fd8;
  --purple:#9b6dff;
  --cyan:#7df9ff;
  --text:#f4dfff;
  --border:#ff8be6;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:
    radial-gradient(circle at top, rgba(255,0,170,.18), transparent 30%),
    url("https://i.imgur.com/L8b4M8L.gif");
  background-size:cover;
  background-attachment:fixed;
  color:var(--text);
  font-family:'Nunito', sans-serif;
  overflow-x:hidden;
}

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

/* SPARKLES */
.sparkles{
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(#fff 1px, transparent 1px);
  background-size:50px 50px;
  opacity:.15;
  animation:moveBg 20s linear infinite;
  pointer-events:none;
}

@keyframes moveBg{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(50px);
  }
}

.topbar{
  background:#000;
  border-bottom:2px solid var(--pink);
  padding:8px;
  font-family:'VT323', monospace;
  color:var(--cyan);
  text-shadow:0 0 10px var(--cyan);
}

.hero{
  display:grid;
  grid-template-columns:250px 1fr 220px;
  gap:20px;
  padding:30px;
  align-items:center;
}

.hero-left,
.hero-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

.avatar{
  width:180px;
  border:4px solid var(--pink);
  box-shadow:
    0 0 20px rgba(255,0,170,.5);
}

.pet{
  width:140px;
}

.pet-label{
  font-family:'VT323', monospace;
  font-size:28px;
  color:var(--cyan);
}

.status-box{
  width:100%;
  background:rgba(0,0,0,.6);
  border:2px dashed var(--pink);
  padding:12px;
}

.online{
  color:#7dff7d;
  font-weight:bold;
}

.hero-center{
  text-align:center;
}

.hero-center h1{
  font-size:92px;
  margin:0;
  font-family:'VT323', monospace;
  color:#fff;
  text-shadow:
    0 0 15px var(--pink),
    0 0 30px var(--purple);
}

.subtitle{
  font-size:20px;
  color:#ffd8f8;
}

.hero-buttons{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:15px;
}

button{
  background:
    linear-gradient(to bottom,#ff69d1,#7a38ff);
  border:none;
  padding:12px 18px;
  color:white;
  font-weight:900;
  cursor:pointer;
  border-radius:14px;
  box-shadow:
    0 0 15px rgba(255,0,170,.5);
  transition:.2s;
}

button:hover{
  transform:scale(1.06);
}

.nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding:16px;
  background:rgba(0,0,0,.6);
  border-top:2px solid var(--pink);
  border-bottom:2px solid var(--pink);
}

.nav a{
  color:white;
  text-decoration:none;
  background:#1b1026;
  border:2px solid var(--pink);
  padding:10px 18px;
  font-family:'VT323', monospace;
  font-size:24px;
}

.nav a:hover{
  background:var(--pink);
}

.layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:20px;
  padding:20px;
}

.card{
  background:
    linear-gradient(
      180deg,
      rgba(25,15,40,.95),
      rgba(10,10,20,.95)
    );

  border:2px solid var(--border);
  padding:18px;
  margin-bottom:20px;

  box-shadow:
    0 0 20px rgba(255,0,170,.2);
}

.card h2{
  margin-top:0;
  font-family:'VT323', monospace;
  font-size:40px;
  color:var(--pink);
}

.banner{
  width:100%;
  border:2px solid white;
}

.pets,
.stamps,
.friends-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pets img,
.stamps img,
.friends-grid img{
  width:70px;
  height:70px;
  object-fit:cover;
  border:2px solid var(--pink);
}

.blink-box{
  margin-top:15px;
  padding:12px;
  text-align:center;
  font-family:'VT323', monospace;
  font-size:28px;
  color:#fff;
  background:#ff008c;
  animation:blink 1s infinite alternate;
}

@keyframes blink{
  from{
    opacity:.6;
  }
  to{
    opacity:1;
  }
}

.blog-post{
  background:#12091f;
  padding:15px;
  border-left:4px solid var(--cyan);
}

.date{
  color:#aaa;
  font-size:14px;
}

.music-player{
  display:flex;
  align-items:center;
  gap:20px;
}

.disc{
  width:80px;
  height:80px;
  border-radius:50%;
  background:
    radial-gradient(circle,#111 20%,#ff4fd8 21%,#111 60%);
  animation:spin 4s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

.song{
  font-size:28px;
  margin:0;
  font-family:'VT323', monospace;
}

.artist{
  margin:0;
  color:#ccc;
}

textarea{
  width:100%;
  min-height:120px;
  background:#0a0612;
  border:2px solid var(--pink);
  color:white;
  padding:12px;
  resize:vertical;
}

.submit-btn{
  margin-top:12px;
}

.footer{
  text-align:center;
  padding:40px 20px;
  background:#000;
  border-top:2px solid var(--pink);
  font-family:'VT323', monospace;
  font-size:24px;
}

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.popup-inner{
  background:#1b1026;
  border:3px solid var(--pink);
  padding:30px;
  text-align:center;
  max-width:420px;
}

.popup img{
  width:180px;
}

.hidden{
  display:none;
}

@media(max-width:900px){

  .hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .hero-center h1{
    font-size:64px;
  }

}