/* Reset di base */
body {
    margin: 0;
    padding: 20px;
    font-family: 'Roboto Mono', monospace;
    line-height: 1.6;
    color: #FFF;
    background-color: #292929;
    text-align: left;
    font-size: 0.8rem;
}

h1 {
    font-size: 1.1rem !important; 
    margin-bottom: 20px;
}

/* Immagine Responsive */
.hero-img {
    max-width: 100%;    /* Non supera mai la larghezza dello schermo */
    height: auto;       /* Mantiene le proporzioni */
    border-radius: 1px; /* Opzionale: un tocco di stile */
}

.htext {
    color: #292929 !important;
}
.privacy {
    color: #FFF;
    text-align: left;
    font-size: 0.6rem !important;
}

/* Testo principale */
.main {
    max-width: 800px;   /* Non diventa troppo largo su desktop per facilitare la lettura */
    padding: 0 10px 10px 0;
    text-align: left;
}

/* Footer e Liste */
ul.social-links {
    list-style: none;
    padding: 0;
    display: flex;      /* Usa Flexbox per allineare i link */
    flex-wrap: wrap;    /* Se non ci stanno, vanno a capo da soli */
    justify-content: left;
    gap: 15px;          /* Spazio tra i link */
    margin-top: 40px;
}

ul.social-links a {
    text-decoration: none;
    color: #fff;
    transition-duration: 2s; 
    transition-timing-function: ease; 
}
ul.social-links a:hover {
    text-decoration: underline;
    color: #999;
}

.privacy a {
    text-decoration: none;
    color: #fff;
    transition-duration: 2s; 
    transition-timing-function: ease; 
}
.privacy a:hover {
    text-decoration: underline;
    color: #999;
}


/* Media Query per schermi più grandi (Tablet/PC) */
@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    body {
        padding: 40px;
    }
}