@font-face {
    font-family: "GT-Alpina-Condensed-Light";
    font-style: normal;
    font-stretch: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/GT-Alpina-Condensed-Light.woff2');
}

.fragment-mono-regular {
    font-family: "Fragment Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  

*{
    margin: 0;
    padding: 0;
}

:root{
    --sfondoChiaro: #FFF7E3;
    --footer: #A55D2D;
    --sl2: #80B4D6;
    --form: #511940;

    --panel1: #B2A844;
    --panel2: #EABC54;
    --panel3: #80B4D6;
}

body{
    background-color: var(--sfondoChiaro);
    font-family: "Fragment Mono", monospace;

    /*
    cursor: url('../img/cursor.png'), auto;
    */
    cursor: none;
}

input:focus, textarea:focus, select:focus{
    outline: none;
}


.grid{ 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: 1fr; 
    grid-column-gap: 30px;
    grid-row-gap: 0px; 
    padding: 0 30px;

    grid-column-gap: 1.875rem;
    padding: 0 1.875rem;
}


p,
.copy{
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    font-weight: normal;
    font-size: 0.83vw;
}

h1{
    font-family: "GT-Alpina-Condensed-Light";
    font-size: 30px;
    font-weight: normal;
    font-size: 2.08vw;
}

h2{
    font-family: "GT-Alpina-Condensed-Light";
    font-size: 38px;
    font-weight: normal;
    font-size: 2.64vw;
}

h3{
    font-family: "GT-Alpina-Condensed-Light";
    font-size: 30px;
    font-weight: normal;
    font-size: 2.08vw;
}

h5{ 
    font-size: 12px;
    font-weight: normal;
    font-size: 0.83vw;
}


.formTitle{
    font-size: 57px;
    line-height: 0.9;
    font-size: 3.96vw;
}
.formData,
.formDataMessage,
.ctaForm{
    font-size: 20px;
    font-family: "GT-Alpina-Condensed-Light";
    font-size: 1.39vw;
}

.notice{
    font-size: 6px;
    font-size: 0.42vw;
}

.checkbox label{
    font-size: 8px;
    font-size: 0.42vw;

    font-size: 10px;
    font-size: 0.69vw;
}

.cntButton{
    font-size: 16px;
    font-size: 1.11vw;
}

.ctaPortfolio{
    font-size: 12px;
    font-size: 0.83vw;
}

/*
.animatedText {
    display: block;
    width: 100%;
    position: relative;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}
.split-line {
display: block;
}
*/

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px; /* modifica la dimensione se necessario */
    height: 40px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}
.custom-cursor img {
    width: 100%;
    height: auto;
    display: block;
}


.headerElements{
    z-index: 200;
    width: 100%; 
    height: 100vh;
    /*border: 4px solid green;*/
    box-sizing: border-box;
    overflow: hidden;
}

.float{
    width:200px; 
    height: 200px; 
    width: 13.89vw;
    height: 13.89vw;
    position: absolute;
}

.floatElement1{
    /*background: red;*/
    top: 35%;
    left: 10%;
}

.floatElement2{
    /* background: green; */
    top: 25%;
    right: 12%;
}

.floatElement3{
    /* background: fuchsia; */
    top: 3%;
    right: 33%;
}

.floatElement4{
    /* background: blue; */
    top: 55%;
    right: 5%;
}


.floatElement5{
    /* background: pink; */
    top: 10%;
    left: 35%;
}

.floatElement6{
    /* background: orange; */
    bottom: 5%;
    left: 10%;
}

.floatElement7{
    /* background: purple; */
    top: -5%;
    right: 5%;
}

.floatElement8{
    /* background: coral; */
    bottom: 0%;
    left: 53%;
}

.floatElement9{
    /* background: brown; */
    top: 0%;
    left: 22%;
}

.floatElement10{
    /* background: aqua; */
    bottom: 10%;
    left: 30%;
}

.floatElement11{
    /* background: silver; */
    top: 40%;
    left: 5%;
}

.floatElement12{
    /* background: seagreen; */
    top: 7%;
    left: 5%;
}

.floatElement13{
    /* background: firebrick; */
    bottom: 15%;
    right: 10%;
}




header{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
header div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; 
}
header svg{
    width: 560px;
    width: 38.89vw;
}
header h1{
    text-align: center;
}



.cntButton{
    position: fixed;
    top: 10px;
    right: 18px;
    /*
    border-radius: 50%;
    border: 1px solid black;
    padding: 11px 13px;
    background-color: unset;
    */
    z-index: 300;
    color: black;
    border-style: none;


    font-family: "GT-Alpina-Condensed-Light";
    background: url('../img/scotch.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    padding: 30px;
    transform: rotate(4deg);

}
.cntButton:hover{
    /*
    background-color: #EABC54;
    */
    opacity: 0.8;
}




.sl1{
    width: 100%;
    background-color: var(--sfondoChiaro);

    box-sizing: border-box;
    padding-top: 245px;
    padding-bottom: 245px;
}


.prjCard {
    /* border: 1px solid red; */
    z-index: 20;
}

.prjCard:hover{
    cursor: pointer;
}

  
.prjImgCont{
    height: 300px;
    height: auto;
    overflow: hidden;
    /* border: 1px solid blue; */
}

.prjCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
  
.prjCard h3{
    margin-top: 20px;
    margin-bottom: 10px;
}


.prjCard h3,
.prjCard h5 {
  opacity: 0;
  transform: translateY(40px);
}

.prjCard1{
    grid-column: 5/7; 
}

.prjCard2{
    grid-column: 9/12; 
    transform: translateY(100%);
}

.prjCard3{
    grid-column: 3/6; 
}

.prjCard4{
    grid-column: 8/10; 
    transform: translateY(-100%);
}

.prjCard5{
    grid-column: 2/4; 
}

.prjCard6{
    grid-column: 9/12; 
}

.prjCard7{
    grid-column: 4/6; 
}

.prjCard8{
    grid-column: 9/12; 
}

.prjCard9{
    grid-column: 2/4; 
}

.prjCard10{
    grid-column: 6/8; 
}
.prjCard11{
    grid-column: 9/12; 
    transform: translateY(100%);
}

.prjCard12{
    grid-column: 3/6; 
}

.prjCard13{
    grid-column: 9/11; 
    transform: translateY(-100%);
}

.prjCard14{
    grid-column: 3/6; 
}

.prjCard15{
    grid-column: 8/11; 
}


.sl2{
    background-color: var(--sl2);
    box-sizing: border-box;
    padding-top: 100px;
    padding-bottom: 136px;
}

.sl2 h2{
    margin-bottom: 50px;
}




.biopic{
    grid-column: 1/4;
    height: auto;

    display: flex;
    align-items: flex-start;
    justify-content: center; 
    position: relative;
}

.biopic img{
    max-width: 160px;
    height: auto;
}

.biopic .float{
    position: absolute;
    max-width: 150px;
}
.floatbio1{
    top: 160px;
    left: 10%;
}
.floatbio2{
    top: 160px;
    right: 10%;
}
.floatbio3{
    top: 200px;
    right: 20%;
}



.bio{
    grid-column: 10/13;
}
.indent{
    text-indent: 50px;
}
.publications{
    grid-column: 2/5;
}
.portfolio{
    grid-column: 8/11;
    margin-top: 400px;
    /*display: none;*/
}
.portfolio{
    line-height: 1;
}

.ctaPortfolio{
    background: url('../img/ctaFolio.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-style: none;
    font-family: "Fragment Mono", monospace;


    box-sizing: border-box;
    padding: 38px 18px;
    padding: 40px;
    padding: 2.78vw;
    margin-top: -30px;

    text-align: center;
    color: black;
    text-decoration: none;
    z-index: 300;
}

.ctaPortfolio:hover{
    background: url('../img/ctaFolioHover.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


footer{
    background-color: var(--footer);
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    gap: 40px;
}

.ftrSocial{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.ftrLinks{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ftrLinks div{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

footer a{
    color: black;
    text-decoration: none;
}
footer a:hover{
    color: #EABC54;
}

/*******************/
/*PANNELLO CONTATTO*/
/*******************/

.side-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 470px;
    height: 100vh;
    background: var(--form);
    box-sizing: border-box;
    padding: 20px;
    z-index: 999;
    transform: translateX(-100%);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.close-formPanel {
    position: absolute;
    top: 30px;
    right: 25px;

    cursor: pointer;

    width: 40px;
    height: 40px;
    border: 1px solid #EABC54;
    background-color: unset;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.close-formPanel:hover{
    background-color: #EABC54;
}

.close-formPanel svg path {
    stroke: #EABC54; 
    transition: stroke 0.3s ease;
}

.close-formPanel:hover svg path {
    stroke: var(--form);
}

.formTitle{
    color: #EABC54;
}

.grecaptcha-badge{
    visibility: hidden;
}

form{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.formData,
.formDataMessage{
    width: 100%;
    background-color: unset;
    border-style: unset;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #EABC54;
    color: #EABC54;
    border-radius: 0;
}

.formData::placeholder,
.formDataMessage::placeholder{
    color: #EABC54;
    opacity: 0.7;
}

.formDataMessage{
    height: 200px;
    height: 26.667vh;
    max-height: 200px;
}

.ctaForm{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #80B4D6;
    color: #511940;
    border-style: unset;
    border: 0;
}
.ctaForm:hover{
    color: #511940;
    background-color: #EABC54;
}
.notice{
    color: #EABC54;
    text-align: center;
}

.checkbox label{
    padding-left: 25px;
    padding-top: 2px;
    color: #EABC54;
}

.checkbox a, 
.notice a{
    color: #EABC54;
    text-decoration: underline;
}
.checkbox a:hover,
.notice a:hover{
    opacity: 0.8;
    text-decoration: underline;
}
.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    border: 1px solid #EABC54;
    background-color: unset;
}
.checkboxContainer input:checked ~ .checkmark {
    background-color: #EABC54;
    height: 14px;
    width: 14px;
    border: 1px solid #EABC54;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkboxContainer input:checked ~ .checkmark:after {
    display: block;
}
.checkboxContainer .checkmark:after {
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #511940;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* end checkbox */





/*******************/
/*PANNELLO PROGETTI*/
/*******************/

.prjPanel{
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow: auto;
    z-index: 400;
    box-sizing: border-box;
}

.panelColor1 { background-color: var(--panel1); }
.panelColor2 { background-color: var(--panel2); }
.panelColor3 { background-color: var(--panel3); }

.closeBtn{
    position: absolute;
    top: 45px; 
    right: 45px;
    top: 2.813rem;
    right: 2.813rem;
    cursor: pointer;
    background-color: unset;
    border: 0;
    border-style: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    z-index: 1000;
}

.closeprjIcon{
    width: 15px;
    height: 15px;
    background: url('../img/closeprjIcon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.closeBtn:hover{
    opacity: 0.5;
}

.prjTitle{
    position: absolute;
    top: 45px; 
    left: 45px;
    top: 2.813rem;
    left: 2.813rem;
    line-height: 1;
}

.prjInfo{
    position: absolute;
    bottom: 45px; 
    left: 45px;
    bottom: 2.813rem;
    left: 2.813rem;
}

.prjLogo{
    width: 28px;
    height: 28px;
    background: url('../img/prjLogo.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    bottom: 45px; 
    right: 45px;
    bottom: 2.813rem;
    right: 2.813rem;
}
  

.splideProject{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);   

    max-width: 345px;
    height: auto;
}

.splideProject .splide__slide{
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splideProject .splide__slide img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}


.splide__arrow{
    cursor: pointer;
    width: 64px;
    height: 18px;
    border-radius: 0;
}
.splide__arrow--prev{
    left: 25%;
    transform: translateX(-50%);
    background: url('../img/arrowLeft.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.splide__arrow--next{
    right: 25%;
    transform: translateX(-50%);
    background: url('../img/arrowRight.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.splide__arrow:hover:not(:disabled){
    opacity: 1;
}
.splide__arrow:hover,
.splide__arrow--prev:hover,
.splide__arrow--next:hover{
    opacity: 0.5;
}

.slideCounter {
    text-align: center;
    margin-top: 20px;
}

.sentCont{
    display: flex;
    flex-direction: column;
    pointer-events: all;
    cursor: auto;
}

.sentButton{
    border-radius: 50%;
    border: 1px solid black;
    padding: 20px 20px;
    background-color: unset;
    z-index: 300;
    color: black;
    text-decoration: none;
    margin-top: 30px;
    transform: translateZ(100);
}
.sentButton:hover{
    background-color: #EABC54;
}

@media only screen and (max-width: 768px) {

    h1{
        font-size: 20px;
        font-size: 5.09vw;
    }
    h2{
        font-size: 48px;
        text-align: center;
        font-size: 12.21vw;
    }

    h3{
        font-size: 30px;
        font-size: 7.63vw;
    }
    h5{
        font-size: 12px;
        font-size: 3.05vw;
    }

    .indent{
        text-indent: 40px;
        text-indent: 10.18vw;
    }

    p, .copy{
        font-size: 11px;
        font-size: 2.8vw;
    }

    .cntButton{
        font-size: 16px;
        font-size: 4.07vw;
    }

    .ctaPortfolio{
        font-size: 11px;
        font-size: 2.8vw;
    }

    .formData, .formDataMessage, .ctaForm{
        font-size: 20px;
        font-size: 5.09vw;
    }
    

    .notice{
        font-size: 6px;
        font-size: 1.53vw;
    }
    
    .checkbox label{
        font-size: 8px;
        font-size: 2.04vw;

        font-size: 9px;
        line-height: 2.29vw;
    }

    .formTitle{
        font-size: 57px;
        text-align: left;
        font-size: 14.5vw;
    }

    .grid{ 
        grid-template-columns: repeat(4, 1fr); 
        grid-column-gap: 30px;
        padding: 0 30px;
    }

    footer a{
        font-size: 11px;
        font-size: 2.8vw;
    }
    .ftrLinks div p{
        font-size: 11px;
        font-size: 2.8vw;
    }
    .ftrLinks div{
        gap: 10px;
    }

    .custom-cursor {
        display: none;
    }

    header div{
        gap: 0px;
    }
    header svg{
        width: 281px;
        width: 71.5vw;
    }
    .float{
        width: 100px;
        height: 100px;
    }

    .sl1{
        padding-top: 96px;
        padding-bottom: 70px;
    }

    .floatElement1{
        top: 60%
    }
    .floatElement11{
        top: 63%;
    }
    .floatElement6{
        left: 3%;
        bottom: 3%;
    }
    .floatElement4{
        top: 60%;
    }
    .floatElement13{
        bottom: 23%;
    }
    .floatElement8{
        bottom: 3%;
        left: 65%;
    }
    .floatElement10 {
        bottom: 16%;
        left: 37%;
    }
    .floatElement12{
        top: 4%;
        left: 7%;
    }
    
    .floatElement5{
        top: 27%;
        left: 35%;
    }
    .floatElement3{
        top: 10%;
        right: 23%;
    }
    .floatElement9{
        top: 20%;
        left: 6%;
    }
    
    .floatElement7{
        top: 0%;
        right: 35%;
    }
    .floatElement2{
        top: 25%;
        right: 5%;
    }

    .prjCard{
        grid-column: span 4;
        width: 204px;
        margin: auto;
        margin-bottom: 130px;
    }

    .prjCard h3{
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .biopic, .publications, .portfolio, .bio{
        grid-column: span 4;
    }

    .biopic{
        height: auto;
        margin-bottom: 0;
    }
    .biopic .float{
        max-width: 200px;
    }

    .sl2{
        padding-bottom: 200px;
        padding-top: 40px;
    }

    .bio{
        margin-bottom: 135px;
    }

    .sl2 .bio h2{
        text-align: center;

        margin-top: 70px;
        margin-bottom: 50px;
    }

    .publications{
        margin-bottom: 0px;
    }

    .sl2 .publications h2{
        margin-bottom: 50px;
    }

    .portfolio{
        margin-top: 135px;
        margin-bottom: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ctaPortfolio{
        margin: auto;
        width: fit-content;
        padding: 38px 18px;
        padding: 9.67vw 4.58vw;
        padding: 10.18vw;
    }

    footer{
        padding: 30px;
        gap: 40px;
    }

    .prjLogo{
        display: none;
    }
    .prjInfo{
        bottom: 70px;
        left: 0px;
        width: 100%;
        text-align: center;
    }
    .prjTitle{
        top: 30px;
        left: 50%;
        transform: translateX(-50%);

        font-size: 32px;
        text-align: center;
    }
    .closeBtn{
        top: unset;
        bottom: 30px;
        left: 0;
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .splideProject{
        max-width: 190px;
    }
    .slideCounter{
        margin-top: 15px;
    }

    .splide__arrow{
        width: 30px;
        height: 8px;
    }

    .splide__arrow--prev{
        left: 8%;
        transform: translateX(0%);
    }

    .splide__arrow--next{
        right: 8%;
        transform: translateX(0%);
    }

    .side-panel{
        width: 100%;
        padding: 20px;

    }

    .close-formPanel{
        top: 20px;
        right: 20px;
    }

    .ftrSocial{
        gap: 20px;
    }
    .ftrLinks{
        gap: 5px;
    }
    

}