/* Sfondo rosa a pieno schermo */
:root{
  --pink: #ff69b4; /* hot pink */
  --frame-radius: 14px;
  --frame-thickness: 10px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  background: var(--pink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
}

.page{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  padding: 24px;
}

.top-title{
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: clamp(28px, 5vw, 56px);
  text-align: center;
  line-height: 1.05;
}

/* Centro schermo */
.center-wrap{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding-bottom: 24px; /* un filo più su */
}

/* Cornice arcobaleno che si sfuma/ruota */
.rainbow-frame{
  position: relative;
  border-radius: var(--frame-radius);
  padding: var(--frame-thickness);
  /* conic-gradient = arcobaleno, animato tramite rotazione */
  background: conic-gradient(
    from 0deg,
    #ff004c,
    #ff8a00,
    #ffe600,
    #38ff00,
    #00d9ff,
    #6a00ff,
    #ff00e1,
    #ff004c
  );
  animation: spin 2.2s linear infinite, glow 2.2s ease-in-out infinite;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  width: min(92vw, 900px);
}

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

/* Effetto "sfuma" continuo */
@keyframes glow{
  0%, 100%{
    filter: saturate(140%) brightness(1.05);
  }
  50%{
    filter: saturate(240%) brightness(1.25);
  }
}

.inner{
  background: var(--pink);
  border-radius: calc(var(--frame-radius) - 4px);
  padding: clamp(28px, 6vw, 70px);
  display: grid;
  place-items: center;
}

/* Testo enorme al centro */
.big-text{
  font-weight: 1000;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1;
  font-size: clamp(72px, 14vw, 180px);
  text-transform: uppercase;
  /* un po' di stacco */
  text-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Migliore resa su schermi piccoli */
@media (max-width: 420px){
  :root{ --frame-thickness: 8px; }
  .top-title{ margin-top: 4px; }
}