/* Sfondo animato */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(-45deg, #6a00f4, #ff00c8, #ff6a00, #00ffd5);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    font-family: 'Cinzel Decorative', cursive;
    color: #fff;
    text-align: center;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Titolo */
h1 {
    font-size: 2.5rem;
    margin-top: 80px;
    text-shadow: 0 0 10px #ff00c8;
}

/* Pulsanti */
button, .btn {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 6px 12px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.75rem; /* DIMENSIONE RIDOTTA */
    box-shadow: 0 0 10px #ff00c8;
    transition: all 0.3s ease;
    margin: 10px;
    letter-spacing: 0.5px;
    max-width: 220px; /* o qualsiasi valore che ti piace */
  white-space: normal; /* permette il ritorno a capo */
  word-wrap: break-word; /* spezza parole lunghe */
  text-align: center;
}

    button:hover, .btn:hover {
        background-color: #ff00c8;
        color: #000;
        box-shadow: 0 0 20px #ff00c8;
    }

/* Footer */
footer {
    margin-top: 50px;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 0.9em;
}