style.css

@font-face {
    font-family: myFont;
    src: url("Assets/fonts/MuseoModerno-VariableFont_wght.ttf");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #040405;
    color: #FEFEFE;
    font-family: "myFont";
}



/* Stile Scrollbar */
*::-webkit-scrollbar { /* Modifica scrollbar su Chrome, Edge, and Safari */
    width: 12px;
  }
  
*::-webkit-scrollbar-track {
    background: #040405;
  }
  
*::-webkit-scrollbar-thumb {
    background-color: #d52d08;
    border-radius: 20px;
    border: 3px solid #040405;
  }
/* Fine Stile Scrollbar */



/* Stile Navbar */
nav {
    padding: 10px 20px 15px 0;
    height: calc(45px + 1vw);
    justify-content: center;
    user-select: none; /* rende testo non selezionabile */
    -moz-user-select: none; /* firefox */
    -webkit-user-select: none; /* Chrome, Opera and Safari*/
    -ms-user-select: none; /* IE, ms-edge */
    flex-direction: column;
    align-items: end;
    background-color: #040405;
    position: relative;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: .3s ease;
    z-index: 1;
}

nav.light {
    background-color: #EDE8DD;
}

nav ul li {
    display: inline-block; /* allinea orizzontalmente i link della navbar */
    padding-left: calc(15px + 1vw); /* padding a sinistra di ogni link della navbar */
}

nav a {
    color: #A2A2A4 !important;
    text-decoration: none; /* elimina elementi decorativi dei link presenti di default */
    position: relative;
    transition: all .3s ease; /* transizione cambio colore onHover e colore sfondo */
    cursor: pointer;
    font-size: calc(10px + 0.8vw);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent; /* evita effetto pressione link */
}

nav.light a {
    color: #575758 !important;
}

nav a.active {
    color: #FEFEFE !important;
}

nav.light a.active {
    color: #040405 !important;
}

nav a.active::before { /* rende visibile striscia sotto link attivo */
    content: "";
    position: absolute;
    background-color: #d52d08;
    border-radius: 20px;
    height: 3px;
    width: 100%;
    left: 0;
    bottom: -5px;
    transition: .3s ease;
    pointer-events: none; /* evita bug che rende la striscia cliccabile */
}

@media (hover : hover) {
    nav a:hover::after { /* rende visibile striscia sotto link quando hover (dispositivi che lo permettono) */
        content: "";
        position: absolute;
        background-color: #d52d08;
        border-radius: 20px;
        height: 3px;
        width: 100%;
        left: 0;
        bottom: -5px;
        transition: .3s ease;
        pointer-events: none; /* evita bug che rende la striscia cliccabile */
    }
}
/* Fine Stile Navbar */



/* Prima Parte Homepage */
#homeSection {
    background-image: url(Assets/images/GraffitoViaDellaPace.svg);
    flex-grow: 1; /* per avere immagine della grandezza giusta */
    background-position: bottom right;
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-top: calc(45px + 1vw);
}

.citazioneHomePage {
    font-size: calc(10px + 0.8vw);
    font-weight: lighter;
    background-color: rgb(32, 34, 37, 0.95); /* colore con trasparenza del 95% */
    position: absolute;
    border-radius: 20px;
    padding: 0.5em 1em 0.5em 1em;
}

@media (min-height: 350px) { /* layout testo in devices medi (layout citazione su desktop, più 350px in altezza) */
    .testoHome{
        padding-top: 3vh;
    }
}

@media (min-width: 0px) { /* layout citazione in piccoli devices (tablets, 768px e superiori) */
    .citazioneHomePage{
        margin-top: 7vh;
    }
    .testoHome{ /* layout testo in devices medi (layout citazione su desktop, meno di 350px in altezza) */
        padding-top: 0;
    }
    .materiaEC .titolo_materiaEC { /* serve per sezione educazione civica */
        padding: 0 0 3vh 0;
    }
}

@media (min-width: 768px) {
    .materiaEC { /* serve per sezione educazione civica */
        display: flex;
    }
    .titolo_materiaEC.sinistra { /* serve per sezione educazione civica */
        padding: 0 5vw 0 0;
    }
    .titolo_materiaEC.destra { /* serve per sezione educazione civica */
        padding: 0 0 0 5vw;
        text-align: end;
    }
    @media (min-height: 0px) { /* layout citazione in devices medi (layout citazione su desktop, 992px e superiori in larghezza e meno di 400px in altezza) */
        .citazioneHomePage{
            bottom: calc(5px + 1vh);
        }
    }
    @media (min-height: 400px) { /* layout citazione in devices medi (layout citazione su desktop, 992px e superiori in larghezza e più 400px in altezza) */
        .citazioneHomePage{
            bottom: calc(20px + 3vh);
        }
    }
}
/* Fine Prima Parte Homepage */



/* Seconda parte Homepage */
#fotoRicordi {
    background-color: #EDE8DD;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
/* Fine seconda parte Homepage */



/* Educazione civica */
.materiaEC {
    margin-bottom: calc(45px + 2vw);
    padding: calc(10px + 4vh) calc(10px + 4vw) calc(10px + 4vh) calc(10px + 4vw);
    background-color: rgb(32, 34, 37, 0.95);
    border-radius: 20px;
}
/* Fina Educazione Civica */



/* PCTO */
@media (max-width: 900px) {
    #anniPCTO {
        flex-direction: column;
        align-items: center;
    }
}

#anniPCTO {
    row-gap: calc(10px + 2vh);
    column-gap: calc(10px + 2vw);
    padding: calc(45px + 1vw) 20px 0 20px;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.annoPCTO {
    padding: calc(10px + 2vh) calc(10px + 2vw) calc(10px + 2vh) calc(10px + 2vw);
    background-color: rgb(218, 214, 201, 0.80);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px; 
    font-weight: 500;
    min-width: 250px;
    max-width: 450px;
    width: 100%;
}

.annoPCTO.centrale {
    margin: calc(10px + 2vh) 0 calc(10px + 2vh);
}

#relazioneFinalePCTO {
    margin: calc(45px + 1vw) 20px calc(45px + 2vw) 20px;
    font-weight: 500;
    padding: calc(10px + 2vh) calc(10px + 2vw) calc(10px + 2vh) calc(10px + 2vw);
    background: rgba(237, 232, 221, 0.15);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.argomentoPCTO {
    padding: calc(10px + 2vh) calc(10px + 2vw) calc(10px + 2vh) calc(10px + 2vw);
    background-color: rgb(218, 214, 201, 0.80);
    border-radius: 20px;
}
/* Fine PCTO */



/* Testi di default */
.titoloSezione {
    font-size: calc(13px + 3.5vw);
    font-weight: bold;
    text-align: center;
}

.sottotitoloSezione {
    font-size: calc(11px + 1.5vw);
    font-weight: bold;
    text-align: center;
    margin-bottom: calc(11px + 1.5vw);
}
/* Fine testi di default */



/* Animazioni */
.fadeInH {
    opacity: 0;
    transform: translateY(calc(10px + 5vh));
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.fadeInH.mostrato {
    opacity: 1;
    transform: translateY(0vh);
}

.fadeInW {
    opacity: 0;
    transform: translateX(calc(-10px - 5vw));
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.fadeInW.mostrato {
    opacity: 1;
    transform: translateX(0vw);
}
/* Fine Animazioni */