/* Reset */

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}



li {
    list-style-type: none;
}



/* Utility */

.res {
    width: 100%;
    max-width: 1200px;
}


.clippy {
    clip-path: circle();
}

/* tipografia */

/* animazioni */
@keyframes openPanel {
    0% {
        transform: scale(0.8);
    }


    100% {
        transform: scale(1);
    }
}

/* Container */



/* colore */


/* grid mobile first */

/* grid system */
.grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    padding: 10px 20px;
}


.grid_1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 10px 20px;
}


.grid_2 {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 20px;
    padding: 10px 20px;
}

/* navigazione  */
.site-nav {
    background-color: #000000;
}

.site-nav h1 {
    grid-column: 1/5;

    z-index: 1;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #ffffff;
}

.site-nav__menu {
    position: fixed;
    top: 0;
    left: 0;
    max-height: 0;
    overflow: hidden;
    z-index: 0;
}



.open .site-nav__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    width: 100%;
    height: 100%;


    animation: openPanel 0.6s;
    z-index: 1;
    font-family: "Prompt", sans-serif;
    font-weight: 800;

    font-size: 5em;
    background-color: #ff0000;

}



.open .site-nav__hamburger {
    cursor: pointer;
    grid-column: 8/9;
    justify-self: end;
    font-size: 2em;
    z-index: 2;
    color: #000000;
    position: fixed;


}


.site-nav__hamburger {
    cursor: pointer;
    grid-column: 8/9;
    justify-self: end;
    font-size: 2em;
    z-index: 1;
    color: #ffffff;
}

/* benvenuto  */



.cover {
    padding-top: 50px;
    grid-column: 1 / 9;
    z-index: 0;
    background-image: url(../img/amore\ copia.jpg);
    opacity: 0.7;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
    /* border: 1px solid rgb(0, 0, 0); */
    position: relative;
}

.welcome1__img {
    grid-column: 2/5;
}

.welcome2__img {
    grid-column: 5/8;
}

.welcome2__img img {
    /* border: 1px solid black; */
    max-height: 200px;
    max-width: 200px;
}

.welcome1__img img {
    /* border: 1px solid black; */
    max-height: 200px;
    max-width: 200px;
}

.welcome1__img img:hover {
    filter: grayscale(100%);
}



/* book */


.book__text h1 {
    grid-column: 6/9;

}




.portfolio__project img {

    clip-path: circle();

}

/* portoflio  */
#portfolio {
    position: relative;
    background: rgb(167, 0, 28) url(../img/Paper-Texture-3.jpg);
}

#portfolio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.8;
}

#portfolio h2 {
    position: relative;
    z-index: 1;
    color: beige;
    text-align: center;

}

.portfolio__project a {
    grid-column: 1/9;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.portfolio__project a * {
    max-width: 50%;
    position: relative;
    z-index: 1;
}

.portfolio__project h3 {

    background: red;
    border-radius: 50px;
    padding: 12px;
    margin-top: 13px;

}


/* skills */

#Skill h2 {
    text-align: center;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 5em;
    padding-top: 30px;
}

#Skill img {
    width: 80px;
}

#Skill li {
    grid-column: span 4;
    text-align: center;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
    padding: 12px;

}

/* metto tutto ciò che è medium */

@media (min-width: 768px) {
    .Welcome__text {
        grid-column: 1/6;
    }

    .Welcome__img {
        grid-column: 6/9;
    }

    .Welcome__img img {
        object-fit: contain;
    }

    /* book */

    .book__text {
        grid-column: 1/6;
    }

    .book__img {
        grid-column: 6/9;

    }

    /* portofolio */
    .portfolio__project {
        margin-top: 50px;
    }


    .portfolio__project a {
        grid-column: span 4;
    }

    .portfolio__project a * {
        max-width: 60%;
    }

    .portfolio__project a:nth-child(3) {
        grid-column: 3/7;
    }




}

/* qui vado a mettere istruzioni per large  */

@media (min-width: 992px) {
    .grid {

        margin: auto;
    }

    .portfolio__project a * {
        max-width: 100%;
    }

    .portfolio__project a:nth-child(1) {
        grid-column: 2/4;
    }

    .portfolio__project a:nth-child(2) {
        grid-column: 4/6;

    }

    .portfolio__project a:nth-child(3) {
        grid-column: 6/8;
    }

    /* skills */
    #Skill li {
        grid-column: span 2;
    }



}







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

a {
    color: inherit;
}



/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {

    padding-bottom: 50px;

}

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 50px;
    background: #ff0000;
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
    z-index: 1;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 15px;
    border: 4px solid rgb(234, 0, 0);
}



.timeline ul li:nth-child(odd) div {
    left: 45px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}



.timeline ul li:nth-child(even) div {
    left: -439px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}



time {
    display: block;
    font-size: 1.2rem;

    margin-bottom: 8px;
    font-family: "Prompt", sans-serif;
    font-weight: 600;
    font-style: bold;
}

/* .back {
    background-image: url(../img/sl_072622_51930_13.jpg);
    z-index: 0;
    background-size: cover;

} */

/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: #ff0000;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}



/* OTHER PROJECT */


.fotografa {
    grid-column: 1/5;

    background-color: var(--light);
    border: 4px solid black;

}

.video {
    grid-column: 5/9;
    background-color: var(--light);
    border: 4px solid black;

}

/* Effetto hover */
.fotografa:hover {
    background-color: rgb(216, 2, 2);
}

.video:hover {
    background-color: rgb(216, 2, 2);
}


.event__testo p {
    text-align: center;
    margin-top: 15px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

p.leading {
    font-size: 1.4em;
    line-height: 1.4em;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}



.numero {
    font-size: 4.8em;
    grid-column: 1/4;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.tema {

    grid-column: 9/13;
    font-size: 4.3em;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}



.testo_tesi h1 {
    grid-column: 1/10;
    padding-top: 40px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}





/* .presentazione {
    border-bottom: 2px solid rgb(203, 6, 6);
    border-top: 1px solid rgb(203, 6, 6);
} */

.testo_presentazione p {
    grid-column: 1/10;
    text-align: left;
    font-size: 4.0em;

    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;



}

.testo_presentazione h1 {
    grid-column: 5/11;
    font-size: 5.1em;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;

}


@media (max-width: 768px) {
    .testo_presentazione p {
        grid-column: 1/12;
        font-size: 1.6em;
        padding-top: 0;
        /* Riduci la dimensione del testo */

    }



    .testo_presentazione h1 {
        grid-column: 3/11;
        /* Usa l'intera larghezza della griglia */
        font-size: 2.5em;
        font-weight: 800;
        /* Riduci la dimensione del testo */
    }


}

.button_port a {
    grid-column: 1/3;
    color: rgb(234, 4, 4);
    background-color: transparent;
    padding: 10px;
    font-size: 1.1em;
    text-align: center;
    border: 4px solid rgb(234, 4, 4);
    transition: background-color 0.3s ease;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;



}

.button_port :hover {
    background-color: red;
    /* Cambia lo sfondo a verde */
    color: white;
    /* Cambia il colore del testo per contrastare con il nuovo sfondo */
}

.img_libro img {
    grid-column: 5/8;
    width: 130%;


}

.titolo_libro h1 {
    font-size: 7em;
    grid-column: 4/13;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;
}


.testo_libro p {
    font-size: 1.4em;
    grid-column: 4/10;

    padding: 10px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;

}


#articoli {
    padding-top: 80px;
    padding-bottom: 100px;
    border-top: 4px soli black;
    margin-top: -40px;
}



@media (max-width: 380px) {

    .fotografa {
        grid-column: 1/9;

    }

    .site-nav h1 {
        grid-column: 1/8;
        padding-top: 20px;


    }






    .testo_libro p {
        font-size: 1.4em;
        grid-column: 1/16;

        padding: 10px;


    }

    .site-nav__hamburger {
        padding-top: 20px;
    }


    .testo_tesi h1 {
        grid-column: 1/13;
        padding-top: 20px;
        font-size: 1em;
    }

    .titolo_libro h1 {
        font-size: 2.4em;
        grid-column: 3/13;

    }

    .video {
        grid-column: 1/9;

    }

    .numero {
        font-size: 0.9em;
        grid-column: 1/2;
    }

    .tema {

        font-size: 0.9em;
        grid-column: 2/13;

    }

    .testo_3 p {
        grid-column: 1/9;
        text-align: center;
        text-decoration: linen;
        font-family: "Prompt", sans-serif;
        font-weight: 500;
        font-style: normal;

    }

    .button_port a {
        grid-column: 1/13;
        color: #ffffff;
        background-color: rgb(239, 0, 0);
        padding: 10px;
        font-size: 1.1em;
        text-align: center;
        border-radius: 10px;
        font-family: "Prompt", sans-serif;
        font-weight: 500;
        font-style: normal;


    }

    .button_port {
        padding-bottom: 70px;
    }







}



@media (max-width: 900px) {

    .numero {
        font-size: 1.5em;
        grid-column: 1/2;
    }

    .tema {

        font-size: 1.5em;
        grid-column: 10/13;

    }

}


@media (max-width: 700px) {

    .numero {
        font-size: 1.5em;
        grid-column: 1/2;
    }

    .tema {

        font-size: 1.5em;
        grid-column: 7/12;

    }

    .testo_libro p {

        grid-column: 2/10;


    }
}


@media (max-width: 800px) {

    .testo_libro p {

        grid-column: 1/16;


    }
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
    }

    .timeline ul li:nth-child(even) div {
        left: -289px;
        /*250+45-6*/
    }
}

@media screen and (max-width: 600px) {
    .timeline ul li {
        margin-left: 20px;
    }

    .timeline ul li div {
        width: calc(100vw - 91px);
    }

    .timeline ul li:nth-child(even) div {
        left: 45px;
    }

    .timeline ul li:nth-child(even) div::before {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #f45b69 transparent transparent;
    }
}


/* EXTRA/CLIP PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline-clippy ul li::after {
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.timeline-rhombus ul li::after {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
    bottom: 12px;
}

.timeline-star ul li::after {
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
}

.timeline-heptagon ul li::after {
    clip-path: polygon(50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            0% 60%,
            10% 20%);
}

.timeline-infinite ul li::after {
    animation: scaleAnimation 2s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.25);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.other__2about {
    grid-column: 5/9;
}

.other__3about {
    grid-column: 9/13;
}





.other__1 {
    grid-column: 1/5;
}

.other__2 {
    grid-column: 5/9;
}

.other__3 {
    grid-column: 9/13;
}

.other__4 {
    grid-column: 13/17;
}

.other__5 {
    grid-column: 1/5;
}

.other__6 {
    grid-column: 5/9;
}

.other__7 {
    grid-column: 9/13;
}

.other__8 {
    grid-column: 13/17;
}

@media only screen and (max-width: 750px) {
    .other__1 {
        grid-column: 1/9;
    }

    .other__2 {
        grid-column: 9/17;
    }

    .other__3 {
        grid-column: 1/9;
    }

    .other__4 {
        grid-column: 9/17;
    }

    .other__5 {
        grid-column: 1/9;
    }

    .other__6 {
        grid-column: 9/17;
    }

    .other__7 {
        grid-column: 1/9;
    }

    .other__8 {
        grid-column: 9/17;
    }

    .other__2about {
        grid-column: 1/9;
    }

    .other__3about {
        grid-column: 9/17;
    }


}

/* sezione titolo  */

.titolo_lavori_numero {

    grid-column: 16/17;

    font-size: 6em;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;
}


.titolo_lavori {
    font-size: 6em;
    grid-column: 1/4;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;
}

@media (max-width: 380px) {
    .titolo_lavori_numero {
        font-size: 2em;
        grid-column: 15/16;

        /* Adjust font size for smaller screens */
    }

    .titolo_lavori {
        font-size: 2em;
        /* Adjust font size for smaller screens */
    }

    .footer {

        flex-direction: column;

    }


}

@media (max-width: 877px) {
    .titolo_lavori_numero {
        font-size: 2em;


        /* Adjust font size for smaller screens */
    }

    .titolo_lavori {
        font-size: 2em;
        /* Adjust font size for smaller screens */
    }

    .footer {

        flex-direction: column;

    }

    .titolo_libro h1 {
        font-size: 2.1em;
        grid-column: 4/13;

    }

}




.trail {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s;
}

.event__img img {
    filter: grayscale(100%);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.event__img img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.testino_ h1 {

    grid-column: 4/8;
    font-size: 3.6em;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;


}


.slider {
    display: flex;
    flex-direction: row;
    position: relative;
    aspect-ratio: 3/5;
    width: 50%;
    max-width: 350px;
    margin: 50px auto;
    perspective: 1400px;
    transform-style: preserve-3d;


}

input[type=radio] {
    display: none;
}

.slider label,
.slider label img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 400ms ease;
}

/* Slider Functionality */

/* Active Slide */
#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
    transform: translate3d(0%, 0, 0px);
    opacity: 100%;
    transition: all 0.5s ease-in-out;
}

/* Next Slide */
#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
    transform: translate3d(27%, 0, -100px);
    opacity: 90%;
    transition: all 0.5s ease-in-out;
}


/* Next to Next Slide */
#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
    transform: translate3d(54%, 0, -250px);
    opacity: 90%;
    transition: all 0.5s ease-in-out;
}

/* Previous to Previous Slide */
#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
    transform: translate3d(-54%, 0, -250px);
    opacity: 90%;
    transition: all 0.5s ease-in-out;
}

/* Previous Slide */
#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
    transform: translate3d(-27%, 0, -100px);
    opacity: 90%;
    transition: all 0.5s ease-in-out;
}


.main-section {
    width: 100%;
    text-align: center;
    padding: 5rem 0;
}

.footer {
    display: flex;
    color: #fffefe;
    padding: 40px;
    height: auto;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #000000;

}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.footer h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: "Prompt", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.links li {
    list-style: none;
    line-height: 30px;
    text-align: center;
    font-weight: 100;
}

.links li a {
    text-decoration: none;
    color: #fff;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.registration {
    display: flex;
    flex-direction: column;
}

.registration input {
    padding: 15px;

    border: none;
    outline: none;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;

    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}


button {
    border: none;
    padding: 12px 0;
    border-radius: 30px;
    cursor: pointer;
    color: #ffffff;
    background-color: #ff0000;
}

button:hover {
    background-color: #ffffff;
    /* Colore di sfondo bianco quando si passa sopra */
    color: #000000;
    /* Colore del testo nero quando si passa sopra */
}




.address {
    text-align: center;
    margin-bottom: 10px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.social {
    display: flex;
    list-style: none;
}

.social li {
    margin: 0 8px;
    cursor: pointer;
    font-size: 18px;
}


.testina p {
    font-family: "Prompt", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 1em;
    grid-column: 4/10;
    padding: 10px;
}

@media (max-width: 380px) {
    .testina p {
        font-size: 1em;
        /* Mantiene la stessa dimensione del font */
        grid-column: 1/16;
        /* Adatta la griglia per schermi più piccoli */
        padding: 10px;
        /* Mantiene lo stesso padding */

    }

    .checkbox-container {
        font-family: "Prompt", sans-serif;
        font-weight: 200;
        font-size: 0.5em;
        font-style: normal;
        padding-bottom: 25px;
        padding-top: 20px;

    }

    .registration input {
        padding: 5px;

        border: none;
        outline: none;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;

        font-family: "Prompt", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

}

.checkbox-container {
    font-family: "Prompt", sans-serif;
    font-weight: 200;
    font-size: 0.7em;
    font-style: normal;
    padding-bottom: 25px;
    padding-top: 20px;

}



.footer-content {
    position: absolute;
    width: 100%;
    background-color: #f8f8f8;
    padding: 10px;
    text-align: center;
    font-family: "Prompt", sans-serif;
    font-weight: 200;
    font-size: 0.8em;
}


.catalogodef_ {
    font-family: "Prompt", sans-serif;
    font-weight: 200;
    font-size: 1.5em;


}

.Catalogo {
    grid-column: 3/10;
}

.progetti__video {
    grid-column: 3/11;
    padding-bottom: 20px;


}

.progetti2__video {
    grid-column: 5/13;

}


.freccia {
    font-size: 3em;
}



.social a {
    color: inherit;
    /* Mantiene il colore originale delle icone */
    text-decoration: none;
}

.social a:hover i {
    color: red;
    /* Colore rosso quando si passa sopra con il mouse */
}




@media (max-width: 767px) {
    .social {
        padding: 30px;
    }

    .social i {
        font-size: 2em;
        padding: 10px;
        /* Dimensione ingrandita delle icone */
    }

    .progetti__video {
        grid-column: 1/13;
        padding-bottom: 20px;
        border-radius: 20px;

    }

    .progetti2__video {
        grid-column: 3/15;
        border-radius: 20px;
    }


}







input[type="checkbox"] {
    width: 15px;
    height: 15px;
}




.links a:hover {
    color: red;
    /* Colore di sfondo quando si passa il mouse sopra */
}