/* Stili generali */
body {
    font-family: Arial, sans-serif;
    background-color: #333;
    color: white;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    padding: 20px;
    text-align: center;
    background-color: #222;
}

header .logo img {
    width: 150px; /* Adatta la dimensione del logo come desideri */
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    max-width: 1200px; /* La pagina sarà larga al massimo 1200px */
    margin: 0 auto; /* Centra il contenuto nella pagina */
}

.content {
    text-align: center;
}

h1 {
    color: #f7c08a;
    font-size: 2rem;
    margin-bottom: 20px;
}

.links {
    display: flex;
    flex-wrap: wrap; /* Consente ai link di andare a capo se necessario */
    justify-content: center; /* Centra i link nella riga */
    gap: 20px;
    width: 100%; /* Si adatta allo spazio disponibile */
}

.link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #444;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 1.2rem;
    max-width: 300px; /* Limita la larghezza massima dei link */
    text-align: center;
    height: auto;
    box-sizing: border-box;
}

.link:hover {
    background-color: #f7c08a;
}

.icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    transition: transform 0.3s;
}

.icon:hover {
    transform: scale(1.1); /* Aggiunge un effetto di ingrandimento sull'icona al passaggio del mouse */
}

footer {
    background-color: #222;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

footer .foot p {
    margin: 0;
}

/* Responsività per schermi più piccoli (telefono) */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    .links {
        justify-content: center; /* Centra i link sui dispositivi più piccoli */
        gap: 15px;
    }

    .link {
        width: 45%; /* Ogni link occupa il 45% della larghezza disponibile (due per riga) */
        max-width: 100%;
        padding: 15px;
        font-size: 1.1rem;
        text-align: center;
    }

    .icon {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.2rem;
    }

    .links {
            justify-content: center; /* Distribuisce i link in modo uniforme */
    }

    .link {
        width: 70%; /* Ogni link occupa il 48% della larghezza disponibile (due per riga) */
        max-width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    .icon {
        width: 40px;
        height: 40px;
    }
}

/* Layout per schermi più grandi (desktop) */
@media (min-width: 1024px) {
    .links {
        display: flex;
        flex-wrap: wrap; /* Consente ai link di andare a capo se necessario */
        justify-content: center; /* Centra i link su desktop */
        gap: 30px;
    }

    .link {
        font-size: 1.3rem; /* Aumenta la dimensione del testo sui dispositivi grandi */
        padding: 25px;
        /*max-width: 350px; /* Aumenta la larghezza massima dei link su desktop */
        width: 50vw;
    }

    .icon {
        width: 60px;
        height: 60px;
    }
}