<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* style.css */

/* Generale */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Header */
header {
    background: #000;
    color: white;
    padding: 10px 0;
    position: fixed; /* Rende la navbar fissa in alto */
    top: 0;
    width: 100%; /* Assicura che la navbar copra tutta la larghezza */
    z-index: 1000; /* Mantiene la navbar sopra altri elementi */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px; /* Aumenta l'area cliccabile */
    display: inline-block;
}

nav ul li a:hover {
    background: #555;
}

/* Main */
main {
    padding: 80px 20px 20px; /* Spazio aggiuntivo per il contenuto sotto la navbar fissa */
    text-align: center;
}

main img {
; /* Limita la larghezza massima dell'immagine al 100% del contenitore */

    height: auto; /* Mantiene le proporzioni dell'immagine */
    margin: 20px auto; /* Margini superiori e inferiori */
    display: block; /* Centra le immagini */
}

/* Footer */
footer {
    background: #880808;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Contenitore dei video */
.video-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Due colonne su schermi grandi */
    gap: 10px; /* Spaziatura tra i video */
    margin: 20px 0; /* Spaziatura sopra e sotto il contenitore */
}

/* Stili per i video */
.video-container iframe {
    width: 100%; /* Adatta il video alla larghezza del contenitore */
    height: 202px; /* Altezza fissa per i video */
}

iframe {
  width: 100%; /* Occupa tutta la larghezza disponibile */
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr; /* Layout a colonna per impostazione predefinita (per telefoni) */
  grid-gap: 20px;
  padding: 20px;
}

figure {
  margin: 0;
  text-align: center;
}

.image-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}


/* Media Query per schermi piccoli (mobile) */
@media (max-width: 600px) {
    body {
    font-size: 16px; /* Base per mobile */
    }
    img{
        width:100%;
    }
    .video-container {
        grid-template-columns: 1fr; /* Una colonna su schermi piccoli */
    }
    .video-container iframe {
        height: 200px; /* Altezza adattata per schermi piccoli */
    }
}


/* Media Query per schermi medi (tablet) */
@media (min-width: 601px) and (max-width: 1200px) {
    body {
        font-size: 18px; /* Aumenta la dimensione del font per tablet */
    }
    img{
        width:100%;
    }


}

/* Layout per schermi grandi (desktop) */
@media (min-width: 1200px) {
    body {
        font-size: 20px; /* Aumenta ulteriormente la dimensione del font per desktop */
    }
    img{
        width:60%;
    }


}</pre></body></html>