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

:root{
  --pink:#f45c9b;
  --pink2:#ff9bc5;
  --pink3:#ffd8ea;
  --cream:#fffdf8;
  --ink:#4b4050;
  --line:#8ca4ba;
  --sky:#bcecff;
  --mint:#c9f8c5;
  --yellow:#fff1a9;
  --peach:#ffd2a5;
}

.niji-background {
  position: fixed;
  left: -100px;
  bottom: -30px;
  width: 650px;
  height: auto;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;

  background-image: url("background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.7) 19px 20px);
  mix-blend-mode:soft-light;
}

.sparkles::before{
  content:"✦  ☆  ♡  ✧  ★   🌈   ✦  ♡   ☆";
  position:fixed;
  left:3vw;
  top:3vh;
  width:94vw;
  font-size:28px;
  letter-spacing:18px;
  color:#fff;
  text-shadow:0 2px 8px #ff7eb8;
  pointer-events:none;
}

.browser{
  position: relative;
  z-index: 2;

  width: min(980px, calc(100% - 30px));
  margin: 58px auto;

  border: 3px solid #4c5c69;
  border-radius: 16px;
  padding: 13px;
  background:
    repeating-linear-gradient(135deg, #e6f9ff 0 8px, #fff 8px 16px, #ffe7f2 16px 24px);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.8),
    0 18px 45px rgba(104,66,105,.27);
}

.window-head{
  border:1px solid #9cb4c9;
  border-radius:10px 10px 4px 4px;
  background:#fff;
  overflow:hidden;
}

.titlebar{
  min-height:48px;
  padding:9px 13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  font-weight:900;
  text-shadow:0 1px 0 #b63369;
  background:
    linear-gradient(#ff9cc6 0 15%,#fa6ea9 20%,#e94787 65%,#f77db2 100%);
  border-bottom:2px solid #c73873;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.address-row{
  min-height:52px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  background:linear-gradient(#fff,#eff6f8);
  border-bottom:1px solid #d6e0e8;
  position:relative;
}
.address{font:24px "VT323",monospace;color:#515a65}
.address-row em{color:#a0a0a0}
.tiny-charms{margin-left:auto;font-size:20px;white-space:nowrap}

.utility-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 12px;
  color:#db75a6;
  font-size:12px;
  background:linear-gradient(#ffe6f2,#fbc3df);
  border-bottom:1px solid #ed99c1;
}

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:10px 0 0;
  background:#fff;
}
.tab{
  text-align:center;
  padding:12px 8px 10px;
  color:#fff;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(102,100,120,.25);
  border-radius:24px 24px 0 0;
  text-shadow:0 1px 1px rgba(74,74,90,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8);
  transition:.18s ease;
}
.tab:hover{transform:translateY(-4px);filter:saturate(1.15)}
.peach{background:linear-gradient(#fff1d5,#f1ad63)}
.yellow{background:linear-gradient(#fff9d4,#efd671)}
.green{background:linear-gradient(#ecffdc,#8ede71)}
.blue{background:linear-gradient(#e9f8ff,#79c7ef)}

.card,.mini-card{
  background:rgba(255,255,255,.92);
  border:1px solid #afbdca;
  box-shadow:inset 0 0 0 3px #f7fbfe;
}

.hero{margin-top:10px;padding:10px}
.hero-placeholder{
  min-height:330px;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:28px;
  color:#8e6f8f;
  font-weight:800;
  background:
    radial-gradient(circle at 50% 110%,#ffeef5 0 31%,transparent 32%),
    linear-gradient(135deg,#ffe6ed,#f6f3ff 48%,#fff4dd);
}
.eye{
  position:absolute;
  top:70px;
  width:145px;
  height:180px;
  background:#fff;
  border:7px solid #b998b5;
  border-radius:55% 50% 55% 50%;
  box-shadow:inset 0 -20px 30px #dffcff;
}
.eye-left{left:18%;transform:rotate(4deg)}
.eye-right{right:18%;transform:rotate(-4deg)}
.eye span{
  position:absolute;
  width:72px;height:125px;
  left:32px;top:30px;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 25%,#fff 0 7%,transparent 8%),
    radial-gradient(circle at 62% 36%,#fff 0 5%,transparent 6%),
    linear-gradient(#8ff2ff,#c66cff 48%,#ff83ca 75%,#7b54cf);
  border:5px solid #8e77aa;
}
.hero-stars{
  position:absolute;
  top:130px;left:0;right:0;
  text-align:center;
  font-size:42px;
  color:#ffe04d;
  text-shadow:-85px -35px 0 #8ef5ff,85px -34px 0 #ff8bd2;
}
.intro{margin:9px 4px 0;line-height:1.55}
.rainbow-text{
  color:#ff79a9;
  text-shadow:1px 0 #ffd54f,2px 0 #82d9ff;
}

.content-grid{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:12px;
  margin-top:12px;
}
.side-stack,.main-stack{display:grid;gap:12px;align-content:start}

.mini-card{padding:10px;border-radius:8px}
.sticker-panel{
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    repeating-linear-gradient(0deg,#ffd5e8 0 28px,#dff7ff 28px 56px);
}
.sticker-title{
  padding:6px;
  text-align:center;
  font-weight:900;
  color:#ec6da2;
  border-bottom:1px dashed #eda4c3;
  margin-bottom:8px;
}
.mini-banner{
  display:block;
  margin:8px 0;
  padding:10px 5px;
  border:2px dashed #fff;
  border-radius:8px;
  text-align:center;
  color:#fff;
  font-size:12px;
  text-decoration:none;
  font-weight:900;
  background:linear-gradient(90deg,#f6a2ca,#aacfff,#bff1c5);
  box-shadow:0 0 0 1px #e2a4c1;
}

.player{display:flex;gap:12px;align-items:center;background:#ffd9ee}
.disc{
  display:grid;place-items:center;
  width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 10%,#e4c9ff 11% 48%,#b5e5ff 49% 100%);
  font-size:22px;
}
.player strong{display:block;font-size:12px}

.card h2{
  margin:0;
  padding:8px 12px;
  color:#fff;
  font-size:18px;
  background:linear-gradient(#ff97c3,#e74f8b);
  text-shadow:0 1px #a33d69;
  border-radius:6px 6px 0 0;
}
.main-stack .card{border-radius:8px;overflow:hidden}
.main-stack .card p{padding:0 14px 12px;line-height:1.55}

.about-banner{
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  font-size:42px;
  background:
    radial-gradient(circle at 50% 95%,#fff 0 22%,transparent 23%),
    linear-gradient(165deg,#bff5ff 0 25%,#ffc9e6 25% 40%,#fff4ad 40% 55%,#c7f1ff 55% 70%,#f5d7ff 70%);
}

.stamp-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.stamp{
  min-height:84px;
  display:grid;
  place-items:center;
  padding:8px;
  font-size:34px;
  background:#fff;
  border:8px dotted #e8b6d0;
  outline:1px solid #b9cad7;
  text-align:center;
}
.stamp span{display:block;font-size:11px;font-weight:900;color:#dc73a5}

.now-playing p{margin:10px 0}
.status-open{color:#40b56a}
.tiny{font-size:12px;color:#7d7280}

.footer-stamps{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding:9px 12px;
  border:1px dashed #9fb4c7;
  background:rgba(255,255,255,.75);
  font-size:11px;
  color:#b35f8b;
}

@media (max-width:720px){
  .browser{width:min(100% - 12px,980px);margin:20px auto;padding:7px}
  .content-grid{grid-template-columns:1fr}
  .side-stack{grid-template-columns:1fr 1fr}
  .tabs{gap:3px}
  .tab{font-size:11px}
  .utility-row{font-size:9px}
  .tiny-charms{display:none}
  .address-row em{display:none}
  .hero-placeholder{min-height:260px}
  .eye{width:105px;height:140px;top:58px}
  .eye span{width:52px;height:96px;left:23px;top:23px}
  .eye-left{left:14%}.eye-right{right:14%}
  .stamp-row{grid-template-columns:1fr 1fr}
}
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.now-playing a {
  color: #ff65a3;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted #ff65a3;
}

.now-playing a:hover {
  color: #b96cff;
  text-shadow: 0 0 5px #ffc4df;
}
/* Niji floating mascot ♡ */
.floating-niji {
  position: fixed;
  right: 20px;
  bottom: 15px;

  width: 180px;
  height: auto;

  z-index: 9999;

  pointer-events: none;

  animation: niji-float 3s ease-in-out infinite;
}

@keyframes niji-float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.love-things {
  width: 100%;
  overflow: hidden;
  background: white;
}

.love-things img {
  display: block;
  width: 100%;
  height: auto;
}

/* MY ART gallery ♡ */

.art-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.art-gallery figure {
  margin: 0;
  padding: 8px;

  background: rgba(255, 255, 255, 0.92);

  border: 2px dashed #f2a4c8;
  border-radius: 10px;

  text-align: center;

  box-shadow:
    0 2px 6px rgba(227, 122, 169, 0.15);
}

.art-gallery a {
  display: block;
  text-decoration: none;
}

.art-gallery img {
  display: block;

  width: 100%;
  height: 260px;

  object-fit: cover;
  object-position: center;

  border-radius: 7px;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.art-gallery img:hover {
  transform: scale(1.025);
  filter: brightness(1.04);
}

.art-gallery figcaption {
  margin-top: 8px;

  font-size: 12px;
  font-weight: 800;

  color: #db72a3;
}

@media (max-width: 650px) {
  .art-gallery {
    grid-template-columns: 1fr;
  }

  .art-gallery img {
    height: auto;
  }
}

/* LINKS PAGE ♡ */

.links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.links-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 18px 16px;

  text-decoration: none;
  color: #55495a;

  border: 2px dashed #f1a7c7;
  border-radius: 12px;

  font-weight: 800;

  box-shadow:
    0 3px 8px rgba(220, 120, 170, 0.13);

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

/* Twitter / X */
.links-list a:nth-child(1) {
  background: linear-gradient(135deg, #ffd6e8, #f2d5ff);
}

/* VGen */
.links-list a:nth-child(2) {
  background: linear-gradient(135deg, #fff2b8, #ffd8d8);
}

/* DeviantArt */
.links-list a:nth-child(3) {
  background: linear-gradient(135deg, #d8ffd8, #d9f6ff);
}

/* YouTube */
.links-list a:nth-child(4) {
  background: linear-gradient(135deg, #d8efff, #e6d9ff);
}

.links-list a:hover {
  transform: translateY(-4px);
  filter: brightness(1.04);

  box-shadow:
    0 7px 14px rgba(220, 120, 170, 0.2);
}

.links-list span {
  font-size: 12px;
  font-weight: 600;
  color: #7f7282;
}

@media (max-width: 650px) {
  .links-list {
    grid-template-columns: 1fr;
  }
}

.charms-gif {
  height: 32px;
  width: auto;
  display: block;
}
.logo-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);

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

.site-logo {
  width: 500px;
  max-width: 90vw;
  height: auto;
  display: block;
}