*{
    font-family: Helvetica, sans-serif;
    --accent-color: #ff6b02;
    --secondary-color: #d3d3d3;
}

.accent{
    color: var(--accent-color);
}

.inactive{
    opacity: 0;
    display: none;
}

a{
    color: inherit;
    transition: color 0.3s ease;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
a:hover, a:focus{
    color: var(--accent-color);
}

.grid{
    /*variabile per definire numero colonne*/
    /* --num-columns: 24; */

    display: grid;
    grid-template-columns: repeat(var(--num-columns), 1fr);
    /* 1. Diciamo al browser di monitorare la larghezza di questo div */
    container-type: inline-size;
     /* 2. Forziamo l'altezza delle righe a copiare la larghezza di una colonna.
    Se abbiamo 12 colonne, ogni colonna è larga 100/12 = 8.33cqw */

    --lineheight: calc(100cqw / var(--num-columns));
    grid-auto-rows: var(--lineheight);
}

/* Posiziona gli elementi nella griglia */
.grid > div {
    grid-column-start: var(--col);
    grid-column-end: calc(var(--col) + var(--width));
    grid-row-start: var(--row);
    grid-row-end: calc(var(--row) + var(--height));
    display: flex;
    overflow: hidden;
    /* outline: 1px solid rgba(0, 0, 0, 0.05); */
}

/* Stili per i tipi di elementi */
.grid h1 {
    margin: 0;
    line-height: 1;
}
.grid h2 {
    margin: 0;
    flex-direction: column;
    justify-content: flex-end;
    /* line-height: calc(var(--lineheight));
    font-size: calc(var(--lineheight) * 0.99); */
}
.grid p {
    line-height: calc(var(--lineheight)/2);
    margin: 0;
}
.numero{
    line-height: calc(var(--lineheight)*var(--height));
    font-size: calc(var(--lineheight)*var(--height)*1.1);
    font-weight: bold;
}

/* Stili per i singoli elementi nella griglia */
.logo {
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nome{
    flex-direction: column;
    justify-content: flex-end;
}

/* sezione are riservata */
.private{
    text-decoration: none;
    color: var(--secondary-color);
    letter-spacing: 0.05rem;
    flex-direction: column;
    justify-content: flex-end;
    transition: color 0.3s ease;
}
.private.active {
    color: initial;
}
.private-menu{
    transition: opacity 0.3s ease;
}
.private-menu a{
    text-decoration: none;
}
/* ------- */

.autore{
    color: var(--accent-color);
    flex-direction: column;
    justify-content: flex-end;
}

.email a{
    text-decoration: none;
}

.copyright, .dati{
    color: var(--secondary-color);
    flex-direction: column;
    justify-content: flex-end;
}