:root{
    /* Primary Colors */
    --primary: #1c1c1c;   

    /* Surface Colors */

    --surface: #f3f3f3;

    /* Red Accent Colors */
    --red-accent: #c82626;

    /* Primary Colors */
    --green-accent: #8cbf26;

    /* Fonts */
    --title: "Press Start 2P", system-ui;
    --text: "Exo", sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--title);
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 1px;
}
h1{font-size: 24px;}/*30*/
h2{font-size: 22px;}
h3{font-size: 17px;}
h4{font-size: 14px;}
h5{font-size: 12px;}
h6{font-size: 12px;}
p{font-family: var(--text); font-size: 16px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

.container-mm{padding: 0 1.25rem;} /*0 20px*/

.space-s{margin-top: 2.5rem;} /*40px*/
.space-m{margin-top: 5rem;} /*80px*/
.space-l{margin-top: 7.5rem;} /*120px*/
.space-img{margin-top: 2.5rem;} /*40*/

.p-s{margin-top: 1.25rem;} /*20px*/
.p-m{margin-top: 2.5rem;} /*40px*/
.p-l{margin-top: 2.5rem;} /*40px*/
.p-t{margin-top: 1.25rem;} /*20px*/

.icon-size-xs{font-size: 1.75rem;} /*28px*/
.icon-size-s{font-size: 2.12rem;} /*34px*/
.icon-size-l{font-size: 2.9rem;} /*48px*/
.xs-icon-size{width: 1rem;} /*16px*/
.small-icon-size{width: 1.375rem;}/*24px*/
.big-icon-size{width: 3.5rem;}/*56px*/

.lowr{text-transform: lowercase; text-decoration: none;}
.cap{text-transform: capitalize; text-decoration: none;}
.a-hover:hover{text-decoration: underline;}
.a-inverse:hover{text-decoration: none; color: var(--red-accent);}
.btn-anim:hover{border-color: var(--green-accent);}

.btn-border{
    display: inline-block;
    width: auto;
    height: auto;
    border: 0.18rem solid var(--primary); /*3px*/
    padding: 0.18rem; /*3px*/
}
.btn-mm{
    background-color: var(--primary);
    color: var(--surface);
    font-family: var(--title);
    font-size: 13px;
    padding: 0.5rem 1.12rem; /*8px 18px*/
    border: none;
}

.img-border{
    display: inline-block;
    width: auto;
    height: auto;
    border: 0.18rem solid var(--primary); /*3px*/
    padding: 0.25rem; /*3px*/
}

body{
    background-color: var(--surface);
    color: var(--primary);
    font-family: var(--text);
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(28,28,28, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(28,28,28, 0.12) 1px, transparent 1px);
    background-size: 80px 80px;
    cursor: default;
}

#back-to-top{
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    
    width: 2rem;
    height: 2rem;
    font-size: 16px;

    background-color: var(--primary);
    border: 3px solid var(--surface);
    outline: 3px solid var(--primary);

    z-index: 9997;
}
#back-to-top a{
    text-decoration: none;
    color: var(--surface);
}

/*-- @note HEADER --*/

#header-mm{
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem; /*24px 20px*/
}
.header-mm-clone {
    width: 100%;
    background-color: var(--surface);
    padding: 1.25rem; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6px);

    z-index: 9998;
}
/* adjusting the scroll */
#skills-mm,
#projects-mm{
    scroll-margin-top: 110px;
}

#menu-desk ul{
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}

.switch-lang{
    display: none;
}

.switch-lang a{
    display: flex;
    align-items: center;
    gap: 0.75rem;

    color: var(--primary);
    font-family: var(--title);
    font-size: 16px;
}

/*-- @note MENU MOBILE --*/
#menu-mobile{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--primary);
    padding: 1.25rem;

    font-family: var(--title);
    font-size: 22px;
    color: var(--surface);

    display: none; /* visibile con flex */
    flex-direction: column;
    justify-content: space-between;
    z-index: 9999;
}
#menu-mobile a{
    text-decoration: none;
    color: var(--surface);
}

#close-mobile{
    width: fit-content;
    margin-left: auto;
    border-color: var(--surface) !important;}
.btn-menu-mbl{
    display: block;
    background-color: var(--surface) !important;
    color: var(--primary) !important;
}

#menu-mobile nav ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.75rem;
}
.switch-lang-mbl a{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#menu-mobile-social{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* animazione menu */
#menu-mobile a:hover{
    color: var(--green-accent);
    text-decoration: underline;
}

/*-- @note HERO --*/

#hero-mm{
    width: 100%;
    height: calc(100svh - 85.38px);
    position: relative;
}
#hero-content{
    width: 100%;
    height: calc(100svh - 152px);
    padding: 1.25rem 0; /*20px*/
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10%; /*60px*/
    text-align: center;
}

#hero-img img {
    width: 65%;
}

#hero-scroll-arrow{
    display: none;
}

#hero-icon-wrapper{
    position: absolute;
    bottom: 1.25rem; /*20px*/
    left: 1.25rem;
    right: 1.25rem;

    display: flex;
    justify-content: space-between;
}
#hero-icon-wrapper a{
    color: var(--primary);
}

/*-- @note SERVIZI --*/

#intro{
    font-family: var(--title) !important;
    font-size: 15px !important;
    line-height: 200% !important;
    letter-spacing: 1px !important;
}

#card-wrapper{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.service-card{
    flex: 1 1 30%;    
    padding: 1.85rem; /*30px*/
    background-color: var(--surface);
    border: 0.18rem solid var(--primary);
}

.service-btn{
    width: 100%;
    padding: 0.5rem 0;
    background-color: var(--primary);
    color: var(--surface);
    font-size: 16px;
    border: none;
}
.service-p {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  margin-top: 1rem;
}
.service-btn i {
  transition: transform 0.4s ease;
  display: inline-block;
}

/*-- @note SKILLS --*/

.sca-wrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6.25rem; /*100px*/
}
/* width sca*/
.sk-w{width: 100%;}
.pg-w{width: 100%;}
.ab-w{width: 100%;}

/* skills */

#skills-wrapper{
    display: flex;
    flex-direction: column;
    gap: 2.12rem;
}
.skill-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
}
.info-bar-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}
.skill-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.application-name{
    font-weight: 500;
    font-size: 18px;
}
.lvl{
    font-family: var(--title);
    font-size: 14px;
}

.progress-bar{
    height: 0.75rem;
    background-color: var(--green-accent);
}

#html5-prog{width: 100%;}
#css3-prog{width: 90%;}
#js-prog{width: 70%;}
#jq-prog{width: 70%;}
#bootstrap-prog{width: 80%;}
#npm-prog{width: 80%;}

/* personaggio */

.c-slide img{
    height: 26.25rem;
    display: block;
    margin: 0 auto;
}

.arrows{
    padding-top: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}
.swiper-prev, .swiper-next{
    cursor: auto; /*cambia quando disponibile*/
}

/*-- @note TOOLS --*/

#tools-wrapper{
    padding-top: 5rem; /*80px*/
    font-family: var(--title);
    font-size: 11px;
    line-height: 140%;
    letter-spacing: 1px;
    text-align: center;
    text-transform: capitalize;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6.875rem 8%;
    align-items: start;
}

.cartridge-container{
    display: flex;
    justify-content: center;
}

.tool-box{
    width: 8.5rem;
    height: 10.625rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}
.label-border{
    width: 100%;
    border: 2px solid var(--green-accent);
    padding: 2px;
}
.label-content{
    padding: 0.12rem ;
    font-size: 9px !important;
    color: var(--surface);
    background-color: var(--green-accent);
}

.cartridge-size{
    width: 8.5rem;
    position: absolute;
    bottom: 0;
}

/* animazione cartridges */
.cartridge-animate, .cartridge-animate-tall{ 
    display: inline-block; 
    transition: transform 200ms ease-out; 
    transform: translateY(0); 
} 
/* mbl con click */
.tool-box.active .cartridge-animate {transform: translateY(-70px);}
.tool-box.active .cartridge-animate-tall {transform: translateY(-90px);}
/* dskt in hover */
@media (hover:hover) and (pointer: fine){
    .tool-box:hover .cartridge-animate{transform: translateY(-70px);}
    .tool-box:hover .cartridge-animate-tall{transform: translateY(-90px);}    
}

/*-- @note PROGETTI --*/

.project-wrapper{
    display: flex;
    flex-direction: column;
    gap: 3.75rem; /*60px*/
}

.project-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;    
  position: relative;
}
.project-img img {
  width: 100%;
  height: 100%;
  display: block; 
  object-fit: cover;
}

.project-title{
    font-family: var(--text);
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;

    display: flex;
    justify-content: space-between;
    padding-top: 1.25rem;
}

.project-link {
    width: 2.12rem;
    height: 2.12rem;
    background-color: var(--primary);
    color: var(--surface);

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

    position: absolute;
    bottom: 0;
    left: 0;
}
.project-link i{
    transform: rotate(45deg);
    display: block;    
    font-size: 20px;
}
.project-mm:hover .project-link{opacity: 1; background-color: var(--red-accent);}

/* hover di project section */
.project-mm:hover{
    border-color: var(--red-accent);
}
.project-mm:hover .project-link{
    opacity: 1;
}
.project-wrapper a:hover + .project-title {
    color: var(--red-accent);
}

/*-- @note FOOTER --*/

footer{
    background-color: var(--primary);
    color: var(--surface);
}
footer a{
    text-decoration: none;
    color: var(--surface);
}

#footer-cta{padding: 1.25rem;}
#footer-cta div{border-color: var(--surface);}
#footer-cta div button{
    background-color: var(--surface);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#footer-credits{padding: 2.5rem 1.25rem 1.25rem;}

#footer-social{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

#credits{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
#credits i{
    padding-right: 0.5rem;
}
#credits a{
    font-weight: 500;
    color: var(--green-accent);
}

/* hover del footer */
#footer-cta a:hover .btn-border{
    border-color: var(--green-accent);
}
#footer-cta a:hover #footer-btn{
    background-color: var(--green-accent);
    color: var(--primary);
}
#footer-social i:hover{
    color: var(--green-accent);
}
#credits a:hover{text-decoration: underline;}

/*-- PAGINE INTERNE --*/

#header-internal{
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
}
#switch-int{display: none;}


/* pagina progetti */
.p-img-col{
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /*40px*/
}
.p-img-col .col-w1{flex: 1;}
.img-ratio{aspect-ratio: 16 / 9;}
.project-img-small {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;    
  position: relative;
}
.project-img-small img {
  width: 100%;
  height: 100%;
  display: block; 
  object-fit: cover;
}

.icon-border{
    display: block;
    padding: 0.125rem;
    border: 0.125rem solid var(--primary);
}

.icon-background{    
    width: 28px;
    height: 28px; 
    background-color: var(--primary);
    color: var(--surface);
    font-size: 16px;
    text-align: center;
}
.icon-background i{    line-height: 28px;}

.data-icon{
    font-size: 18px;
    text-transform: capitalize;
    color: var(--primary); 
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem; /*12px*/
}
.data-icon a{ color: var(--primary);}

.p-link-wrapper{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.p-data-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /*20px*/
    text-transform: capitalize;
}

/* pagina about */

/* wrappers */
#ab-info-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:"text""avatar""skills";
    gap: 6.25rem; /*100px*/ 
}
#txt-wrapper{
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /*40px*/
    grid-area: text;
}
.ab-link{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#ab-pg{grid-area: avatar;}
#sk-ab{grid-area: skills;}

/* stile elementi */
#main-title p{
    font-size: 18px;
    font-weight: 600;
    padding-top: 0.25rem;
}

#ab-link-container{
    padding: 1.25rem;
    width: 100%;

    border: 0.18rem solid var(--primary);
    background-color: var(--surface);
}
.ab-link:not(:first-child){padding-top: 1.25rem;}
.ab-link a{
    color: var(--primary);
    font-weight: 500;
    font-size: 15px;
}

#sk-ab h4{display: none;}
#skill-box-wrapper{
    display: flex;
    flex-direction: column;
    gap: 2.375rem;
}

/* for-esp */
#formazione-esp{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7.5rem; /*120px*/
}
.foes-w{width: 100%;}

.for-esp{
    padding-top: 2.5rem; /*40px*/
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.ab-size{font-size: 16px !important; font-weight: 500 !important;}


@media (min-width: 576px) {}
@media (min-width: 768px) {
    /* IMPOSTAZIONI */
    h1{font-size: 42px;}/*47*/
    h2{font-size: 25px;}
    h3{font-size: 21px;}
    h4{font-size: 17px;}
    h5{font-size: 14px;}
    h6{font-size: 14px;}
    p{font-family: var(--text); font-size: 16px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

    .container-mm{padding: 0 3rem;} /*0 48px*/

    .space-s{margin-top: 3.75rem;} /*60px*/
    .space-m{margin-top: 5rem;} /*80px*/
    .space-l{margin-top: 7.5rem;} /*120px*/
    .space-img{margin-top: 3.75rem;} /*60*/
    .p-l{margin-top: 3.75rem;} /*60px*/

    .btn-mm{
        font-size: 14px;
    }

    /* HEADER */
    #header-mm{padding: 1.25rem 3rem;}
    .header-mm-clone {padding: 1.25rem 3rem;}

    /* MENU MOBILE */
    #menu-mobile{padding: 1.25rem 3rem;}
    #menu-mobile nav ul{gap: 5rem;}

    /* HERO */
    #hero-img img{width: 80%;}
    #hero-icon-wrapper{
        bottom: 1.25rem; /*20px*/
        left: 3rem; /*48px*/
        right: 3rem; /*48px*/
    }

    /* SERVIZI */
    #intro{font-size: 17px !important;}
    #card-wrapper{
        flex-direction: column;
        gap: 2.5rem;
    }
    .service-card{padding: 2.5rem; /*40px*/}
    .service-btn{display: none;}
    .service-p {
        max-height: none !important;
        opacity: 1 !important;
    }

    /* PROGETTI */
    .project-wrapper{gap: 5rem; /*80px*/}
    .project-title{
        font-weight: 600;
        font-size: 18px;
    }

    /* SKILL */
    .sca-wrapper{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 5rem 10%;
    }
    /* width sca*/
    .sk-w{width: 50%;}
    .pg-w{width: 40%;}
    .ab-w{width: 100%;}

    .skill-box{gap: 1.75rem;}
    .arrows{gap: 3.75rem;}

    /* TOOLS */

    #tools-wrapper{
        padding-top: 5rem;
        font-size: 13px;
        grid-template-columns: repeat(3, 1fr);
        gap: 6.875rem 8%;
    }

    .tool-box{
        width: 11.25rem;
        height: 14.063rem;
        gap: 0.75rem;
    }
    .label-content{font-size: 11px !important;}
    .cartridge-size{width: 11.25rem;}

    /* FOOTER */

    #footer-cta{padding: 2.5rem 3rem;}
    #footer-credits{padding: 2.5rem 3rem;}

    /* PAGINE INTERNE */
    #header-internal{padding: 1.25rem 3rem;}

    /* project page */
    .p-img-col{gap: 3.75rem; /*60px*/}
    .p-data-wrapper{gap: 2.5rem; /*40px*/}

    /* about page */
    #txt-wrapper{gap: 3.75rem;} /*60px*/
    #ab-link-container{
        width: fit-content; 
        padding: 1.25rem 2.5rem 1.25rem 1.25rem;
    }
    #ab-info-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:"text text""skills avatar";
        align-items: center;
    }
    .ab-size{font-size: 18px !important; font-weight: 500 !important;}
}
@media (min-width: 992px) {
    /* IMPOSTAZIONI */
    h1{font-size: 48px;}/*50*/
    h2{font-size: 26px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 15px;}
    h6{font-size: 15px;}
    p{font-family: var(--text); font-size: 16px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

    .container-mm{padding: 0 4.5rem;} /*0 72px*/

    .p-s{margin-top: 1.25rem;} /*20px*/
    .p-m{margin-top: 2.5rem;} /*40px*/
    .p-l{margin-top: 3.75rem;} /*60px*/
    .p-t{margin-top: 2.5rem;} /*40px*/

    .img-border{padding: 0.375rem; /*6px*/}

    /* HEADER */
    #header-mm{padding: 1.5rem 4.5rem;}
    .header-mm-clone {padding: 1.5rem 4.5rem;}
    #ham-icon{display: none;}
    #menu-desk ul{display: flex;}
    .switch-lang{display: block;}

    /* HERO */
    #hero-mm{
        width: 100%;
        height: calc(100vh - 93.37px);

        display: flex;
        flex-direction: column;
    }

    #hero-content{
        width: 100%;
        padding: 1.25rem 0;

        flex: 1;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        text-align: start;
    }
    #hero-img{width: 30%;}
    #hero-img img{width: 100%;}

    #hero-scroll-arrow{
        display: flex;
        justify-content: center;
        margin-bottom: 4.5rem;
    }

    #up-down-arrow{
        width: 28px !important;
        animation: arrowMove 1.5s steps(4) infinite;
    }

    /* animazione verso il basso */
    @keyframes arrowMove{
        0%{
            transform: translateY(0);
        }
        100%{
            transform: translateY(20px);
        }
    }

    /* icone in basso */
    #hero-icon-wrapper{
        position: absolute;
        bottom: 1.25rem; /*20px*/
        left: 4.5rem;
        right: 4.5rem;

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

    #hero-icon-wrapper a{color: var(--primary);}

    /* SERVIZI */
    #intro{width: 80%;}
    #card-wrapper{
        flex-direction: row;
        gap: 2.5rem;
    }
    /* animazioni card in hover */
    #website-card:hover{
        border-color: var(--primary);
        background-color: var(--primary);
        color: var(--surface);
    }
    #ux-ui-card:hover{
        border-color: var(--red-accent);
        background-color: var(--red-accent);
        color: var(--surface);
    }
    #seo-card:hover{
        border-color: var(--green-accent);
        background-color: var(--green-accent);
        color: var(--surface);
    }

    /* PROGETTI */
    .project-wrapper{
        flex-direction: row;
        gap: 5rem;
    }
    #janarò{width: 50%;}
    #vanguard{width: 50%;}

    .project-img {aspect-ratio: 16 / 10;}
    .project-img img {
        width: 100%;
        height: 100%;
        display: block; 
        object-fit: cover;
    }

    .project-title{font-weight: 600;}
    .project-link {opacity: 0;}
    .project-mm:hover .project-link{opacity: 1; background-color: var(--red-accent);}

    /* SKILLS */
    .sca-wrapper{gap: 6.25rem 10%;}

    /* TOOLS*/
    #tools-wrapper{
        padding-top: 7.5rem;
    }

    /* FOOTER */
    #footer-cta{padding: 3.75rem 4.5rem;}
    #footer-cta h2{width: 80%;}

    #footer-credits{padding: 2.5rem 4.5rem;}

    /* PAGINE INTERNE */
    #header-internal{padding: 1.5rem 4.5rem;}
    .p-img-col{
        flex-direction: row;
        gap: 3.75rem;
    }
    .img-ratio{aspect-ratio: 16 / 7 !important;}
    .project-img-small {aspect-ratio: 1 / 1;}
    .p-link-wrapper{
        flex-direction: row;
        gap: 2.5rem;
    }
    .p-data-wrapper{
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

}
@media (min-width: 1200px) {
    /* IMPOSTAZIONI */
    h1{font-size: 56px;}/*60*/
    h2{font-size: 30px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 15px;}
    h6{font-size: 15px;}
    p{font-family: var(--text); font-size: 16px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

    /* HERO */
    #hero-img{width: 30%;}

    /* SKILLS */
    .sca-wrapper{
        flex-direction: row;
        align-items: start;
        gap: 0px;
    }
    /* width sca*/
    .sk-w{width: 28%;}
    .pg-w{width: 44%;}
    .ab-w{width: 28%;}

    .c-slide img{height: 28rem;}

    /* TOOLS */
    #tools-wrapper{
        font-size: 14px;
        gap: 10rem 8%;
    }
    .tool-box{
        width: 12.5rem;
        height: 15.625rem;
    }
 
    .label-content{font-size: 13px !important;}
    .cartridge-size{width: 12.5rem;}

    /* animazioni cartucce */
    .tool-box:hover .cartridge-animate{
        transform: translateY(-90px);
    }
    .tool-box:hover .cartridge-animate-tall{
        transform: translateY(-110px);
    }

    /* PROGETTI */
    .project-wrapper{
        flex-direction: row;
        gap: 7.5rem;
    }

    /* FOOTER */
    #credits{flex-direction: row; gap: 1.25rem;}

    /* pagine interne */
    .project-text{width: 50%;}  
    
    /* about page */
    .sk-ab-w{width: 90%;}

    #ab-info-wrapper{gap: 7.5rem;}
    #txt-wrapper{
        flex-direction: row;
        align-items: center;
        gap: 7.5rem;
    }
    #formazione-esp{flex-direction: row;}
}
@media (min-width: 1400px) {
    /* IMPOSTAZIONI */
    h1{font-size: 64px;}/*74*/
    h2{font-size: 30px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 15px;}
    h6{font-size: 15px;}
    p{font-family: var(--text); font-size: 16px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

    .space-s{margin-top: 5rem;} /*80px*/
    .space-m{margin-top: 7.5rem;} /*120px*/
    .space-l{margin-top: 11.25rem;} /*180px*/
    .space-img{margin-top: 5rem;} /*80px*/

    .p-s{margin-top: 1.25rem;} /*20px*/
    .p-m{margin-top: 2.5rem;} /*40px*/
    .p-l{margin-top: 3.75rem;} /*60px*/
    .p-t{margin-top: 2.5rem;} /*40px*/

    /*.p-t{margin-top: 2.5rem;} 40px*/

    /* HERO */
    #hero-content{
        align-items: calc(start + 10%);
    }
    /* SERVIZI */
    #intro{width: 60%; font-size: 18px !important;}

    /* TOOLS */
    #tools-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10rem 12%;
    }

    /* FOOTER */
    #footer-cta{padding: 5rem 4.5rem;}
    #footer-cta h2{width: 60%;}

    /* project page */
    .p-img-col{gap: 5rem;}

    /* about page */
    #ab-info-wrapper {
        grid-template-columns: 30% 30% 28%;
        grid-template-areas: "text avatar skills";
        justify-content: space-between;
        align-items: start;
        gap: 0;
    }
    #txt-wrapper{
        flex-direction: column;
        align-items: start;
        gap: 3.75rem;
    }
    #ab-pg{margin: auto 0;}
    #sk-ab h4{display: block; padding-bottom: 2.5rem;}
    .sk-ab-w{width: 100%;}
    #formazione-esp{gap: 10rem;}
    .ab-size{font-size: 20px !important; font-weight: 500 !important;}
}
@media (min-width: 1800px) {
    /* IMPOSTAZIONI */
    h1{font-size: 78px;}
    h2{font-size: 32px;}
    h3{font-size: 24px;}
    h4{font-size: 18px;}
    h5{font-size: 15px;}
    h6{font-size: 15px;}
    p{font-family: var(--text); font-size: 18px; font-weight: 500;line-height: 170%; letter-spacing: 0.4px;}

    /* spazi tra elementi */
    .space-s{margin-top: 5rem;} /*80px*/
    .space-m{margin-top: 10rem;} /*160px*/
    .space-l{margin-top: 13.75rem;} /*220px*/
    .space-img{margin-top: 5rem;} /*80px*/

    /* padding tra elementi */
    .p-s{margin-top: 1.25rem;} /*20px*/
    .p-m{margin-top: 2.5rem;} /*40px*/
    .p-l{margin-top: 3.75rem;} /*60px*/
    .p-t{margin-top: 2.5rem;} /*40px*/

    .p-img-col{gap: 5rem;} /*80px*/

    .btn-mm{font-size: 16px;}

    /* SERVIZI */
    #intro{width: 50%;}

    /* SKILLS */
    .application-name{font-size: 22px;}

    /* TOOLS */
    #tools-wrapper{
        padding-top: 7.5rem;
        font-size: 16px;
        gap: 10rem 10rem;
    }
    .tool-box{
        width: 12.5rem;
        height: 15.625rem;
        gap: 0.75rem;
    }
    .label-content{font-size: 13px !important;}
    .cartridge-size{width: 12.5rem;}

    /* PROGETTI */
    .project-wrapper{gap: 12.5rem;}
    .project-title{font-size: 20px;}    

    /* FOOTER */
    #footer-cta h2{width: 50%;}

    /* about page */
    #txt-wrapper{gap: 5rem;}
    #formazione-esp{gap: 12.5rem;}
}
@media (min-width: 2200px) {
    h1{font-size: 90px;}
}