@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");

/* ==========================
   Variabili Globali
   ========================== */
   
:root {
    /* 🎨 Colori */
    --color-primary: #FCFF20;
    --color-secondary-1: #ff6347;
    --color-secondary-2: #95d6d9;
    --color-background: #f0f0f0;
    --color-text: #202020;


    /* 🖋️ Tipografia */
    --font-base: "Source Code Pro", monospace;


    --font-size-display: 72px;

    --font-size-headline-1: 44px;

    --font-size-headline-2: 28px;

    --font-size-headline-3: 20px;

    --font-size-subhead: 18px;

    --font-size-subhead-body-1: 16px;

    --font-size-subhead-body-2: 15px;

    --font-size-subhead-body-3: 14px;

    --font-size-subhead-body-4: 12px;

    --line-height-base: 1.6;

    --line-height-heading: 1.3;
}

/* ==========================
   Tipography
   ========================== */

.display {
    font-size: var(--font-size-display) ;
    font-weight: bold;
}
h1 {
    font-size: var(--font-size-headline-1);
    margin: 0;
    padding: 0;
    font-weight: 700;
}
h2 {
    font-size: var(--font-size-headline-2);
    margin: 0;
    padding: 0;
}
h3 {
    font-size: var(--font-size-headline-3);
    margin: 0;
    padding: 0;
}
.subhead {
    font-size: var(--font-size-subhead);
}
.body1 {
    font-size: var(--font-size-subhead-body-1);
}
.body2 {
    font-size: var(--font-size-subhead-body-2);
}
.body3 {
    font-size: var(--font-size-subhead-body-3);
}
.body4, li {
    font-size: var(--font-size-subhead-body-4);
}

/* ==========================
   Color
   ========================== */

.primary {
    background-color: var(--color-primary);
}
.secondary-1 {
    background-color: var(--color-secondary-1);
}
.secondary-2 {
    background-color: var(--color-secondary-2);
}
.text-color {
    color: var(--color-text);
}
.primary-bg {
    background-color: var(--color-background);
}

a {
    color: var(--color-text);
}

/* ==========================
   General
   ========================== */
body {
    font-family: "Source Code Pro", monospace;
    margin: 0;
    min-height: 200vh;
     /* abilita lo scroll verticale */
    background: radial-gradient(circle, var(--color-background), #ccc);

   }

::selection {
    background-color: var(--color-primary);
    /* colore sfondo evidenziato */
    color: var(--color-text);
    /* colore del testo selezionato */ }

.title {
    padding: 12px 32px 12px 12px;
    background-color: var(--color-primary);
}

.spacer {
    height: 100px
}

.y-date {
    min-width: 120px;
    text-align: right;
    margin-right: 16px;
}

.divider-section{
    border: 0.5px solid var(--color-text);
}

/* ==========================
   Header
   ========================== */

.navbar {
    height: 80px;
}
.job-position {
    position: relative;
    top: 3px;
}
.circle {
    border-radius: 50%;
    height: 18px;
    width: 18px;
    border: 1px solid var(--color-text);
    background-color: var(--color-primary);
}
.divider {
    height: 22px;
    width: 1.5px;
    background-color: var(--color-text);
}

.icon-go-to {
    position: relative;
    bottom: 16px;
    left: 8px;
}

.lang-active{
    background-color: var(--color-primary);
}

/* ==========================
   Hero
   ========================== */
    .hero {
        height: calc(100vh - 80px);
    }
    .cta-section {
        display: flex;
        align-items: center;
    }
    /* .cta-section a {

    } */
    .cta-hero{
        width: 106px;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 10px;
    }
    .cta-hero:hover {
        background-color: var(--color-primary);
    }
    .intro{
        padding-left: 4px;
    }

/* ==========================
   Cursor
   ========================== */

   svg {
       position: fixed;
       top: 0;
       left: 0;
       pointer-events: none;
       width: 100%;
       height: 100%;
       z-index: 9999;
   }

   path {
       fill: none;
       stroke: var(--color-primary);
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
       stroke-opacity: 1;
       animation: fadePath 3s forwards;
   }

   @keyframes fadePath {
       to {
           stroke-opacity: 0;
       }
   }





/* ==========================
   Media Query
   ========================== */
   @media (max-width: 767.98px) {
       .y-date {
        text-align: left;
        margin-bottom: 8px;
       }
   }