/* ========================================
   MEGADITTA.ORG - STILE ANNI 90
   ======================================== */

/* Reset base */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    margin: 0;
    padding: 0;
}

/* Link stile anni 90 */
a {
    color: #0000FF;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #FF0000;
    text-decoration: underline;
}

a:active {
    color: #FF0000;
}

/* Navigazione */
.nav-link {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    padding: 5px 10px;
}

.nav-link:hover {
    color: #FFFFFF;
    background-color: #003366;
    text-decoration: none;
}

/* Pulsanti stile anni 90 (effetto 3D) */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    border: 3px outset #FFFFFF;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.button:hover {
    background-color: #DDDDDD;
    border: 3px outset #EEEEEE;
    color: #000000;
    text-decoration: none;
}

.button:active {
    border: 3px inset #999999;
    background-color: #BBBBBB;
}

/* Tabelle */
table {
    border-collapse: collapse;
}

td {
    font-family: Arial, sans-serif;
}

/* Effetto separatore */
hr {
    border: 0;
    height: 2px;
    background-color: #003366;
    margin: 20px 0;
}

/* Blockquote */
blockquote {
    margin: 10px 20px;
    padding: 10px;
    border-left: 5px solid #003366;
    background-color: #F0F0F0;
    font-style: italic;
}

/* Liste */
ul {
    margin-left: 20px;
    line-height: 1.6;
}

li {
    margin-bottom: 5px;
}

/* Paragrafi */
p {
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Immagini */
img {
    max-width: 100%;
    height: auto;
}

/* Effetto blink (commentato perché deprecato, ma era tipico anni 90) */
/*
.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
*/

/* Contatori e badge stile anni 90 */
.counter {
    display: inline-block;
    padding: 5px 10px;
    background-color: #FF0000;
    color: #FFFFFF;
    font-weight: bold;
    border: 2px solid #000000;
}

/* Marquee (effetto scorrevole tipico anni 90 - deprecato ma iconico) */
marquee {
    font-weight: bold;
    color: #FF0000;
}

/* Scrollbar personalizzata (solo per browser compatibili) */
body::-webkit-scrollbar {
    width: 16px;
}

body::-webkit-scrollbar-track {
    background: #CCCCCC;
}

body::-webkit-scrollbar-thumb {
    background: #003366;
    border: 2px outset #FFFFFF;
}

body::-webkit-scrollbar-thumb:hover {
    background: #0055AA;
}

/* Font stile "Comic Sans" per titoli scherzosi (commentato per rispetto) */
/*
.comic {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
*/

/* Effetti speciali per testo */
.rainbow-text {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stile per contatori visite (tipici anni 90) */
.visitor-counter {
    font-family: "Courier New", monospace;
    font-weight: bold;
    color: #00FF00;
    background-color: #000000;
    padding: 5px 10px;
    border: 2px solid #00FF00;
    display: inline-block;
}

/* Badge "Nuvo!" e "Aggiornato!" */
.badge-new {
    display: inline-block;
    background-color: #FF0000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 10px;
    padding: 2px 5px;
    margin-left: 5px;
    border: 1px solid #FFFFFF;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Stile per GIF animate (placeholder) */
.gif-animation {
    border: 2px solid #FFCC00;
    box-shadow: 3px 3px 0px #000000;
}

/* Footer con sfondo sfumato anni 90 */
.footer-gradient {
    background: linear-gradient(to bottom, #003366, #000033);
}

/* Effetto ombra "drop shadow" esagerato */
.shadow-box {
    box-shadow: 5px 5px 0px #000000;
}

/* Stile per email */
a[href^="mailto:"] {
    font-weight: bold;
    color: #0000CC;
}

a[href^="mailto:"]:hover {
    color: #FF0000;
}

/* Centramento anni 90 */
center {
    display: block;
}

/* Barra di caricamento stile anni 90 */
.loading-bar {
    width: 100%;
    height: 20px;
    background-color: #CCCCCC;
    border: 2px inset #999999;
}

.loading-bar-fill {
    height: 100%;
    background-color: #0000FF;
    width: 75%;
}

/* Stile per avvisi lampeggianti */
.warning-box {
    border: 3px solid #FF0000;
    background-color: #FFFF00;
    padding: 15px;
    font-weight: bold;
    text-align: center;
}

/* Testo lampeggiante (alternativa al blink deprecato) */
.flashing {
    animation: flash 1.5s infinite;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.3;
    }
}

/* Under construction (iconico anni 90) */
.under-construction {
    background-color: #FFFF00;
    color: #000000;
    font-weight: bold;
    padding: 10px;
    border: 3px dashed #FF0000;
    text-align: center;
}

/* Sfondo pattern (tipico anni 90 - da usare con cautela) */
.pattern-background {
    background-image: repeating-linear-gradient(
        45deg,
        #CCCCCC,
        #CCCCCC 10px,
        #DDDDDD 10px,
        #DDDDDD 20px
    );
}

/* Stile per citazioni importanti */
.quote-box {
    border: 3px double #003366;
    background-color: #FFFFCC;
    padding: 15px;
    margin: 15px 0;
    font-style: italic;
}

/* Responsive basic (minimo, gli anni 90 non conoscevano il responsive) */
@media screen and (max-width: 768px) {
    table[width="900"] {
        width: 100% !important;
    }
    
    .button {
        display: block;
        margin: 5px 0;
    }
}

/* Effetto hover su immagini */
img:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* Stile per elementi "NEW!" */
.new-item::after {
    content: " NEW!";
    color: #FF0000;
    font-weight: bold;
    font-size: 10px;
    vertical-align: super;
}

/* Cursor personalizzato (commentato, troppo invasivo) */
/*
body {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABnSURBVCiRY/hPADCBaAYGBgYGYpQxkKKZFM0M1NJMjGZqaSZGM7U0E6OZWpqJ0UwtzaRoBgGq+ZoYzdTSTIxmamlmYGBgYGCglmZiNFNLMzGaqaWZGM3U0kyMZmppJkYzVTQDAM0ZBgWqTM+PAAAAAElFTkSuQmCC'), auto;
}
*/

/* Stile per sticker e badge */
.sticker {
    position: absolute;
    transform: rotate(-15deg);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

/* Glitter effect (commentato, troppo) */
/*
.glitter {
    background: url('data:image/png;base64,...') repeat;
    animation: glitter-animation 3s infinite;
}
*/

/* Neon text effect */
.neon-text {
    color: #FFFFFF;
    text-shadow: 
        0 0 5px #FFFFFF,
        0 0 10px #FFFFFF,
        0 0 20px #0000FF,
        0 0 30px #0000FF,
        0 0 40px #0000FF;
}