@font-face {

    font-family: 'Canela';

    src: url('../resources/CanelaDeck-Bold.eot');

    src: local('Canela Deck Bold'), local('CanelaDeck-Bold'),

        url('../resources/CanelaDeck-Bold.eot?#iefix') format('embedded-opentype'),

        url('../resources/CanelaDeck-Bold.woff2') format('woff2'),

        url('../resources/CanelaDeck-Bold.woff') format('woff'),

        url('../resources/CanelaDeck-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



:root {

    --border-margin: 2%;

    --landing-margin-x: 5%;

    --landing-margin-y: 50px;

    --project-image-size: 76vw;

    --rounding: 20px;

    --secondary-color: #1f1f1f;

    --tertiary-color: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.195), rgba(255, 255, 255, 0.069));


}



/* Hide scrollbar for Chrome, Safari and Opera */

*::-webkit-scrollbar {

    display: none;

  }

  

  /* Hide scrollbar for IE, Edge and Firefox */

* {

    -ms-overflow-style: none;  /* IE and Edge */

    scrollbar-width: none;  /* Firefox */

    color: white;

    text-shadow: #00000047 1px 1px 3px;

}

img, svg {
    filter: drop-shadow(#00000047 1px 1px 3px);
}




body {

    margin: 0px;

    max-width: 100vw;

    overflow-x: hidden;

    background-color: var(--secondary-color);

    
    height: 1080px;
}

#quadrato {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0); /* Opacità iniziale 0 */
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Evita che il quadrato blocchi l'interazione col mouse */
    transition: background-color 0.1s ease; /* Transizione morbida del cambiamento di opacità */
  }


#landing {

    position: relative;

    width: 98%;

    margin: auto;

    height: 95vh;

    background-size: cover;

    background-position: 50% 30%;

    border-radius: 0px 0px var(--rounding) var(--rounding);

    overflow: hidden;

}


.landing-background {

    width: 120%;

    height: 120%;
    
    margin: -10%;

    position: absolute;

    object-position: 50% 30%;

    object-fit: cover;
    
    border-radius: 0px 0px var(--rounding) var(--rounding);

}


#logo > img, .logo{

    height: 80px;

    position: absolute;

    left: var(--landing-margin-x);

    top: 0;

    margin-top: var(--landing-margin-y);

}



.filter {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

}



.title {

    color: white;

    font-size: 7vw;

    font-family: 'Canela';

    font-weight: bold;

    width: fit-content;

    position: relative;

    left: var(--landing-margin-x);

    top: 50%;

    transform: translateY(-50%);

}



.subtitle {

    color: white;

    margin: 0;

    position: absolute;

    left: var(--landing-margin-x);

    bottom: var(--landing-margin-y);

}



.menu {

    display: flex;

    flex-direction: column;

    justify-content: end;

    width: fit-content;

    position: absolute;

    top: var(--landing-margin-y);

    right: var(--landing-margin-x);

}



.menu-link {

    color: white;

    text-decoration: none;

    font-size: 22px;

    text-align: end;

}



.menu-link.active {

    text-decoration: underline;

    text-underline-offset: 5px;

    text-decoration-thickness: 2px;

}



.social  {

    display: flex;

    gap: 10px;

    width: fit-content;

    position: absolute;

    bottom: var(--landing-margin-y);

    right: var(--landing-margin-x);

}



#rotateButton {

    position: absolute;

    top: var(--landing-margin-y);

    right: var(--landing-margin-x);

    z-index: 99999;

    transition: ease 0.5s;

}



.rotate-button-anim {

    transform: rotate(405deg);

}



.offcanvas {

    background-color: var(--secondary-color);

    width: 100%!important;

}



.offcanvas > .menu {

    gap: 20px;

    width: 100%;

    position: absolute;

    right: 0px;

    top: 300px;

}



.offcanvas > .menu > .menu-link {

    text-align: center;

}



.offcanvas > .social  {

    display: flex;

    justify-content: center;

    width: 100%;

    right: 0px;

}


/* Displayer */


.displayer {    

    width: 98%;

    margin: auto;

    padding: 0 var(--landing-margin-x);

}    

.project {

    padding: 0px;

    position: relative;

    border-radius: var(--rounding);

    overflow: hidden;

    transform: scale(0.9);

    transition: transform ease 0.5s;

}


.project:hover {

    transform: scale(1);

    transition: transform ease 0.5s;

    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3);

}

.project img{

    position: relative;

    width: 100%;

    height: 350px;

    object-fit: cover;

    opacity: 1;

    transition: opacity ease 0.5s;

    scale: 1.05;

}

.project:hover img{

    opacity: 0.9;

    transition: ease 0.5s;

    filter: brightness(1.2) blur(12px);

}

.project:active img{

    opacity: 1 !important;

    transition: ease 0.3s;
}

.text-description {

    position: absolute;

    width: 100%;

    text-align: center;

    top: 50%;

    transform: translateY(-50%);

    opacity: 0;

    transition: opacity ease 0.5s;

    text-shadow: 1px 1px 12px rgb(0, 0, 0);
}


.project:hover .text-description {

    display: block;

    opacity: 1;
    
    transition: opacity ease 0.5s;
}

body {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;


}

#backgroundImage {

    margin: 0px;

    position: fixed;

    z-index: -1;

    opacity: 1; 

    width: 100vw;

    height: 100vh;

    object-fit: cover;

    transition: 0.5s ease;

    background-attachment: fixed;

    background-size: cover;

    filter: blur(100px);

    transform: scale(1.3);

    overflow: hidden;

}


/* Project */

.columns {
    display: flex;
    width: 100vw;
}

.left {
    width: 78vw;
    padding-left: var(--landing-margin-x);
    height: 1080px;
}

#nav {
    position: fixed;

    top: 0px;

    right: var(--landing-margin-x);

    width: 24vw;
    height: 100vh;
}

.lang-icon {
    background-color: #ffffff00;
    border: none;
    margin-left: auto;
    width: min-content;
}

.lang-icon > img {
    margin-top: 15px;
    transition: transform 0.3s ease;
}

.lang-icon> img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


#landing-project {

    z-index: -1;

    position: relative;

    padding: 0px;

    width: 100%;

    height: 50vh;

    border-radius: var(--rounding);

    overflow: hidden;

    margin-top: 160px;

    filter: drop-shadow(#00000047 1px 1px 3px);

}

#landing-project img{

    width: 100%;

    height: 100%;

    margin: 0px;

    object-fit: cover;

    object-position: center;

}

#project-body {
    padding: 0px;
    margin: 20px 0px;
}

#project-body h1 {
    font-family: 'Canela';
}

#project-info {
    display: flex;
    gap: 10px;
    overflow: scroll;

    width: 90vw;
}

#project-info p {

    padding: 5px 15px;

    background-color: #1f1f1f24;

    border-radius: var(--rounding);

    text-wrap: nowrap;
}

.project-image {

    
    max-height: 80vh;

    max-width: 100%;


    border-radius: var(--rounding);

    margin-bottom: calc(var(--landing-margin-y)/2);

    cursor: pointer;
}

#overlay {

    width: 100vw;

    height: 100vh;
    
    z-index: 100;

    position: fixed;

    backdrop-filter: blur(10px);

    background-color: #000000b9;
}

#imgFull {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;


}

#closeOverlay {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 101;

    cursor: pointer;

    background-color: rgba(255, 255, 255, 0);

    width: 100px;

    height: 100px;

    border: none;
}

/* Filter form */

/* Sovrascrive lo stile Bootstrap dei radio button */
.form-check-input[type="radio"]:checked {
  background-image: none !important;
  background-color: #fff !important;
  border-color: #fff !important;
}
#main-filter {
    display: flex; 
    justify-content: 
    center; 
    gap: 20px; 
    margin: 30px 0 16px;
    align-items: center;

}

#main-filter > .form-check-input[type=radio] {
    display:none !important;
} 

#main-filter > * {
    padding: 2px 20px;
    background-color: rgba(119, 119, 119, 0.598);
    font-size: 28px;
    border-radius: var(--rounding);
    height: fit-content;
    text-wrap: nowrap;
} 

#main-filter > .form-check-input[type=radio]:checked + .form-check-label {
    padding: 6px 20px;
    background-color: rgba(255, 255, 255, 0.496);
    transform: scale(1.1);
    animation: scale 0.2s ease-in-out forwards;
}

#sub-filter > div{
    display: flex;
    justify-content: center;
    overflow: scroll;
    gap: 10px;
    margin-bottom: 30px;
    align-items: center;
    height: 80px;
}


#sub-filter > div > .form-check-input {
    display: none;
}

#sub-filter > div > .form-check-label {
    padding: 10px 20px;
    height: fit-content;
    font-style: italic;
    background-color: rgba(119, 119, 119, 0.422);

    color: rgb(234, 234, 234);
    border-radius: 1000px;

    transition: all 0.2s ease-in-out;
}

#sub-filter > div > .form-check-input:checked + .form-check-label {
    
    font-style: normal;
    padding: 14px 20px;
    background-color: rgba(255, 255, 255, 0.598);
    transform: scale(1.1);
    animation: scale 0.2s ease-in-out forwards;
}

@keyframes scale {
    0% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}


/* Footer */

#footer {

    width: 90vw;
    margin: 2000px auto;
    padding: 0 var(--border-margin);
}

#footer a { 

    color: white;

}

#footer > .row > div {

    padding-left: var(--landing-margin-x);
    margin-bottom: 50px;

}

/* About */

.about-title-main {

    font-family: "Canela";

    font-weight: bold;

    font-size: 48pt;

    margin-top: 180px;

}

.about-title {

    font-family: "Canela";

    font-weight: bold;

    font-size: 32pt;

    margin-top: 60px;

}

.propic {

    width: 350px;

    height: 350px;

    object-fit: cover;

    border-radius: var(--rounding);

}

.about-me-text {

    width: 70%;

    padding: 0 40px;

    line-height: 24pt;

    text-align: justify;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}


.icons-display {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 40px;


}

.icons-display > div {

    width: 120px;

    padding: 20px 0 10px;

    position: relative;

    background-image: var(--tertiary-color);

    border-radius: var(--rounding);

    text-align: center;

    align-items: center;

    justify-content: center;
}

.icons-display > div > img {

    width: 80px;
}

.icons-display > div > p {

    margin-top: 10px;

    margin-bottom: 0px;

    width: 100%;

}



.years-display {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 40px;



}



.year {

    display: flex;

}



.year > h5 {

    font-family: "Canela";

    min-width: 120px;

}


@media screen and (max-width: 768px) {
    #landing-project, .project-image {
        width: 90vw;
    }

    .propic, .about-me-text {
        width: 100%;
    }

    #landing {
        width: 96vw;
    }

    .title {

        font-size: 10vw;

    }

    #main-filter, #sub-filter > div {
        justify-content: start;
        padding: 0 20px;
        overflow: scroll;
    }

    #main-filter  {
        justify-content: center;
        }

    #main-filter > * {

        font-size: 20px;
    }

    .lang-icon {
        margin-left: unset;
        margin: auto;
    }
}

@media screen and (max-width: 992px) {
    .about-me-text {
        padding: 40px 0;
    }
}

@media screen and (min-width: 1600px) {

    .title, .category-title {

        font-size: 100pt;

    }

}