/* --- Variabili per la Taratura Manuale --- */
:root {
    /* -- Distanze per Desktop -- */
    --desktop-header-top: 20vh; /* NUOVA: Distanza del logo dall'alto */
    --desktop-content-top: 50%; /* Posizione verticale del titolo (50% = centro perfetto) */
    --desktop-footer-bottom: 3vh; /* Distanza del footer dal fondo */

    /* -- Distanze per Mobile -- */
    --mobile-header-top: 10vh; /* NUOVA: Distanza del logo dall'alto su mobile */
    --mobile-content-top: 50%;
    --mobile-footer-bottom: 2vh;
}
/* -------------------------------------- */


body {
    background-color: #363b40;
    font-family: 'Raleway', sans-serif;
    color: white;
}

.uk-text-footer {
	color: #ccc !important;
}

.main-container {
    position: relative; /* Necessario per posizionare gli elementi figli */
    height: 100dvh;
    width: 100%;
    text-align: center;
}

/* Regole di posizionamento per le 3 sezioni */
#header-section,
#content-section,
#footer-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centra orizzontalmente */
    width: 90%; /* Larghezza massima del contenuto */
    max-width: 550px; /* Larghezza massima per leggibilità */
}

/* MODIFICA: La posizione dell'header ora è controllata da 'top' */
#header-section {
    top: var(--desktop-header-top);
}

#content-section {
    /* Posiziona il blocco del titolo verticalmente */
    top: var(--desktop-content-top);
    transform: translate(-50%, -50%); /* Lo centra rispetto al suo punto 'top' */
}

#footer-section {
    /* Ancora il footer in basso */
    bottom: var(--desktop-footer-bottom);
}

/* Media Query per applicare le variabili mobile */
@media (max-width: 640px) {
    #header-section {
        top: var(--mobile-header-top);
    }
    #content-section {
        top: var(--mobile-content-top);
    }
    #footer-section {
        bottom: var(--mobile-footer-bottom);
    }
}