/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* INDEX */
body {
    font-family: Arial, sans-serif;
    background-color: #390f61;
    color: #fff;
    text-align: center;  /* Center text globally */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #8120db;
    border-bottom: 2px solid #ffffff;
}

header .logo img {
    max-height: 60px;
}

header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
}

header nav ul li a:hover {
    color: #cc00ff;
    text-shadow: 0 0 3px #ac25b1, /* Effetto neon - primo strato */
                0 0 6px #922d8a, /* Effetto neon - secondo strato */
                0 0 9px #7e3071, /* Effetto neon - terzo strato */
                0 0 12px #682b60; /* Effetto neon - quarto strato */
    font-weight: bolder;
}

#banner {
    padding: 50px 20px;
    background: url('banner.jpg') no-repeat center center/cover;
}

#banner h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

#banner p {
    font-size: 1.5em;
    margin-bottom: 40px;
}

#banner button, .item button, #login form button {
    padding: 10px 20px;
    font-size: 1.2em;
    color: #fff;
    background-color: #e100ff;
    border: none;
    cursor: pointer;
    border-radius: 15px;  /* Round corners */
    transition: background-color 0.3s, transform 0.3s; /* Aggiunta di transizione */
}

#banner button:hover, .item button:hover, #login form button:hover {
    box-shadow: 0 0 15px #c529ca, /* Effetto neon - primo strato */
                0 0 20px #b336a9, /* Effetto neon - secondo strato */
                0 0 25px #9b3a8b, /* Effetto neon - terzo strato */
                0 0 30px #85387b; /* Effetto neon - quarto strato */
    transform: scale(1.1); /* Effetto di scaling */
}

/* Sezione di benvenuto INDEX */
#welcome {
    margin-top: 40px;
}

#welcome h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

#welcome p {
    font-size: 1.2em;
    margin-bottom: 10px;
}

#welcome video {
    width: 50% auto;
    border: 3px solid #c529ca;
    box-shadow: 0 0 4px #c529ca, /* Effetto neon - primo strato */
                0 0 8px #b336a9, /* Effetto neon - secondo strato */
                0 0 12px #9b3a8b, /* Effetto neon - terzo strato */
                0 0 16px #85387b; /* Effetto neon - quarto strato */
    border-radius: 10px;
}




/* FORUM */
#ftitle {
    font-family: Arial, sans-serif;
    background-color: #390f61;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

#ftitle p {
    font-family: Arial, sans-serif;
    background-color: #390f61;
    color: #fff;
    text-align: center;
    margin-top: 10px;
}




/* LOGIN SITO */

#login {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 2em;
    padding: 10px 20px;
}

#box {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 1.1em;
    margin-top: 30px;
    margin-bottom: 10px;
}

#box label {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 5px;
}

#box p {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}

#box button {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 1.1em;
    margin-top: 5px;
    background-color: #390f61;
}

/* box login */
.login-container {
    width: 300px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    background-color: #333;
    border: 2px solid #e100ff;
    box-shadow: 0 0 4px #9a25b1, /* Effetto neon - primo strato */
                0 0 8px #7e2d92, /* Effetto neon - secondo strato */
                0 0 12px #75307e, /* Effetto neon - terzo strato */
                0 0 16px #612b68; /* Effetto neon - quarto strato */
    border-radius: 8px;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.login-form button {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.login-form button:hover {
    background-color: #0056b3;
}




/* STORE */
#store {
    flex: 2;
    padding: 50px 20px;
}

#store h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

#store p {
    font-size: 1.2em;
    margin-bottom: 40px;
}

/* menù a tendina store */
.dropdown {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.dropdown .dropbtn {
    padding: 10px 20px;
    font-size: 1.2em;
    color: #fff;
    background-color: #e100ff;
    border: none;
    cursor: pointer;
    border-radius: 15px; /* Round corners */
    transition: background-color 0.3s, transform 0.3s; /* Aggiunta di transizione */
}

.dropdown .dropbtn:hover {
    box-shadow: 0 0 15px #c529ca, /* Effetto neon - primo strato */
                0 0 20px #b336a9, /* Effetto neon - secondo strato */
                0 0 25px #9b3a8b, /* Effetto neon - terzo strato */
                0 0 30px #85387b; /* Effetto neon - quarto strato */
    transform: scale(1.1); /* Effetto di scaling */
}

.dropdown .dropbtn:active {
    transform: scale(0.9); /* Effetto di clic */
}

.dropdown-content {
    display: none;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    position: relative; /* Posizione relativa per non sovrapporsi */
    text-align: left;
}

.dropdown-content .item {
    padding: 12px 16px;
    text-align: left;
}

.dropdown-content .item:hover {
    background-color: #575757;
}

.dropdown.show .dropdown-content {
    display: block;
}

/* login store */
#mclogin {
    flex: 1;
    padding: 50px 20px;
    text-align: left; /* Allineamento del testo a sinistra */
    margin-left: auto; /* Spostamento a destra */
}

#mclogin h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

#mclogin p {
    font-size: 1.2em;
    margin-bottom: 40px;
}

#mclogin form {
    background-color: #333;
    padding: 20px;
    border: 2px solid #e100ff;
    box-shadow: 0 0 4px #9a25b1, /* Effetto neon - primo strato */
                0 0 8px #7e2d92, /* Effetto neon - secondo strato */
                0 0 12px #75307e, /* Effetto neon - terzo strato */
                0 0 16px #612b68; /* Effetto neon - quarto strato */
    border-radius: 10px;
}

#mclogin form label,
#mclogin form input,
#mclogin form button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

#mclogin form input {
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
}

#mclogin form button {
    padding: 10px 20px;
    font-size: 1.2em;
    color: #fff;
    background-color: #e100ff;
    border: none;
    cursor: pointer;
    border-radius: 15px; /* Round corners */
    transition: background-color 0.3s, transform 0.3s; /* Aggiunta di transizione */
}

#mclogin form button:hover {
    box-shadow: 0 0 15px #c529ca, /* Effetto neon - primo strato */
                0 0 20px #b336a9, /* Effetto neon - secondo strato */
                0 0 25px #9b3a8b, /* Effetto neon - terzo strato */
                0 0 30px #85387b; /* Effetto neon - quarto strato */
    transform: scale(1.1); /* Effetto di scaling */
}

#mclogin form button:active {
    transform: scale(0.9); /* Effetto di clic */
}




/* STAFF LIST */
/* contenuto principale */
#slmain {
    max-width: 800px; /* Larghezza massima del contenuto */
    margin: 0 auto; /* Centra il contenuto rispetto al body */
    padding: 20px; /* Spazio intorno al contenuto */
}

/* box staff list */
#staff {
    text-align: center; /* Centra il contenuto all'interno della sezione */
    font-size: xx-large;
    margin-bottom: 30px; /* Spazio sotto la sezione */
    background-color: #5e0083; /* Colore di sfondo */
    border: 2px solid #af00e4;
    border-radius: 8px;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px; /* Spazio interno */
    border-radius: 8px; /* Bordi arrotondati */
    box-shadow: 0 0 4px #9a25b1, /* Effetto neon - primo strato */
                0 0 8px #7e2d92, /* Effetto neon - secondo strato */
                0 0 12px #75307e, /* Effetto neon - terzo strato */
                0 0 16px #612b68; /* Effetto neon - quarto strato */
}

.staff-category {
    margin-bottom: 30px; /* Spazio tra le categorie */
}

.staff-category h3 {
    font-size: 1.8rem;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center; /* Centra il titolo della categoria */
}

.staff-category ul {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Centra il contenuto della lista */
}

.staff-category ul li {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra orizzontalmente il contenuto */
    margin-bottom: 10px; /* Spazio tra gli elementi della lista */
}

.staff-category ul li img {
    width: 50px; /* Dimensioni dell'immagine */
    height: 50px;
    border-radius: 50%; /* Per fare un cerchio */
    margin-right: 10px; /* Spazio tra l'immagine e il testo */
}

.staff-category ul li span {
    font-size: 1.1rem; /* Dimensione del testo */
}




/* ALTRO */

/* Effetto di clic sui bottoni */
#banner button:active, .item button:active, #login form button:active {
    transform: scale(0.9); /* Effetto di clic */
}

/* Definizione dell'animazione fadeIn */
@keyframes fadeIn {
    from {
        opacity: 0; /* Partenza con opacità a 0 */
    }
    to {
        opacity: 1; /* Arrivo con opacità a 1 */
    }
}

/* Stili per tutte le pagine */
.page {
    opacity: 0; /* Parti con opacità a 0 */
    animation: fadeIn 0.5s ease-in-out forwards; /* Animazione fadeIn di 0.5 secondi */
}

/* footer per tutte le pagine */
footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Applicazione dell'animazione alle sezioni */
#store, #login, #welcome, #banner {
    animation: fadeIn 1s ease-in-out;
}

/* Applicazione dell'animazione agli elementi individuali */
.store-section, .item, #login form, #banner h1, #banner p, #welcome h2, #welcome p {
    animation: fadeIn 2s ease-in-out;
}

/* main content per tutte le pagine */
.main-content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}