@font-face {
          font-family: 'Audiowide';
           src: url('Audiowide-Regular.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
      }

      
      :root {
            --firstFont: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif,
                            system-ui, -apple-system, BlinkMacSystemFont;
            --secondFont: 'Audiowide', var(--firstFont);
        }



    html, body {
        height: 100%;
    }

  body { 
    padding: 6px; 
    font-family: var(--firstFont);
    display: flex;
    flex-direction: column;

  }


  

  .secondFont { font-family: var(--secondFont); }


  .container { max-width: 600px; }
  /* H3: dorato con glow lampeggiante */
.textEffectLight {
    font-size: clamp(20px, 4vw, 60px);
    background: linear-gradient(45deg, #ffba00, #ff6f00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(255, 186, 0, 0.7);
    animation: glowingGold 2s ease-in-out infinite;
}

@keyframes glowingGold {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 186, 0, 0.5); }
    50% { text-shadow: 0 0 25px rgba(255, 186, 0, 1); }
}

/* P: colore normale, solo glow lampeggiante */
.textGlow {
    color: #007bff; /* o qualsiasi colore tu voglia */
    text-shadow: 0 0 0 rgba(0,0,0,0);
    animation: glowingNormal 2s ease-in-out infinite;
}

@keyframes glowingNormal {
    0%, 100% { text-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { text-shadow: 0 0 15px rgba(0,123,255,0.7); } /* glow colore del testo */
}


#infoDatetime {
    width: 160px; /* adatta in base al formato hh:mm:ss */
    display: inline-block; /* necessario per la larghezza */
    text-align: right; /* mantiene allineato a destra */
}


details[open] pre {
  animation: fadeInExpand 0.3s ease-out;
}

@keyframes fadeInExpand {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}



.flag-icon svg {
  display: inline-block;
  vertical-align: middle;
}


.badge-sm {
  font-size: 0.55em;
  padding: 0.35em 0.5em;
  min-width: 46px;
  text-align: center;
}

.glow-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.35);
}


esp-web-install-button slot[name="activate"] button {
    background-color: var(--bs-primary) !important;
    color: var(--bs-btn-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 0.35rem 0.75rem !important;
    font-weight: 600 !important;
}



    .footer { margin-top: auto; }