* {
    box-sizing: border-box;
   }

   /* --- Colors --- */
   :root {
        --primary-color: #534AB7;
        --bg-color: #0f0f12;
        --card-bg: #1e1e26;
        --text-light: #ffffff;
        --text-dim: #888888;
    }
    /* --- End Colors --- */


   /* --- Custom Webkit Scrollbar --- */
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: var(--bg-color);
    }
    ::-webkit-scrollbar-thumb {
        background: #2a2a35; 
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color);
    }

    /* --- End Custom Webkit Scrollbar --- */

    /* --- Accessibility Focus State for Keyboard Navigation --- */
    a:focus-visible, button:focus-visible {
        outline: 3px dashed #4facfe;
        outline-offset: 4px;
    }
    /* --- End Accessibility Focus State for Keyboard Navigation --- */
   
   html{
        border: 0;
        padding: 0;
        background-color: var(--bg-color);
        font-family: "Inter", sans-serif;
        scroll-behavior: smooth;
    }

    /* --- Animated Background --- */
    .background-animation {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1; 
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .background-animation li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(83, 74, 183, 0.1); 
        animation: floatUp 25s linear infinite;
        bottom: -150px;
        border-radius: 8px; 
    }

    .background-animation li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: -5s; }
    .background-animation li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: -2s; animation-duration: 12s; }
    .background-animation li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: -10s; }
    .background-animation li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: -7s; animation-duration: 18s; }
    .background-animation li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: -14s; }
    .background-animation li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: -3s; }
    .background-animation li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: -20s; }
    .background-animation li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: -35s; animation-duration: 45s; }
    .background-animation li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: -15s; animation-duration: 35s; }
    .background-animation li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: -8s; animation-duration: 11s; }

    @keyframes floatUp {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
        }
    }

    /* --- End Animated Background --- */

    /* --- Nav --- */

    nav{
        height: 60px;
        border-bottom: 1px solid var(--card-bg);
        position: sticky; 
        top: 0;           
        z-index: 100;     
        background-color: var(--bg-color);
    }

    #nav-upper{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        padding: 0 32px;
    }

    #nav-upper-items{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
    }

    #logo{
        font-size: 18px;
        font-weight: 500;
        transition: 0.5s ease;
        text-decoration: none;
        color: white;
    }

    .nav-links{
        text-decoration: none;
        font-size: 15px;
        color: var(--text-dim);
        transition: 0.5s ease;
    }

    .nav-links:hover{
        color: #4facfe;
        transform: translateY(-1px);
    }

    #logo:hover{
        color: #4facfe;
        transform: translateY(-1px);
    }

    /* --- End nav --- */

    /* --- Main --- */

    main{
        display: flex;
        justify-content: space-between;
        padding: 0 32px;
        max-width: 100%;
        height: 100%;
        max-height: 85vh;
    }

    #left-section{
        width: 40%;
    }

    #profile{
        display: flex;
        align-items: center;
        padding-top: 80px;
    }

    #profile-picture-container{
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        margin-right: 10px;
    }

    #profile-name-container{
        margin-left: 10px;
        color: var(--text-dim);
        font-size: 32px;
    }

    #profile-name-container p:last-child{
        font-size: 18px;
    }

    #profile-name-container p{
        margin: 0;  
    }

    #info-tag{
        margin-top: 20px;
        padding: 2px 50px;
        display: inline-block;
        background-color: rgba(83,74,183,.15);
        color: #8da0ff;
        border: 2px solid rgba(83,74,183,.4);
        border-radius: 20px;
        font-size: 14px;   
        font-family: "Roboto Mono", monospace; 
    }

    #headline{
        font-size: 32px;
        font-weight: 500;
        color: var(--text-light);
        letter-spacing: -1px;
        line-height: 1.15;
    }

    #sottotitolo{
        font-size: 14px;
        color: var(--text-dim);
        line-height: 1.6;
        max-width: 360px;
    }

    #CTA-btn-container{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 30px;
    }

    .CTA-btn{
        padding: 14px 32px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        transition: all 0.3s ease;
    }

    .primary-btn {
        background-color: var(--primary-color);
        color: var(--text-light);
        border: 2px solid var(--primary-color);
        box-shadow: 0 4px 15px rgba(83, 74, 183, 0.3); 
    }

    .primary-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(83, 74, 183, 0.5); 
    }

    .secondary-btn {
        background-color: transparent;
        color: var(--text-light);
        border: 2px solid var(--primary-color);
    }

    .secondary-btn:hover {
        background-color: rgba(83, 74, 183, 0.15); 
        transform: translateY(-3px);
    }

    #right-section{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--card-bg); 
        border: 1px solid #2a2a35; 
        border-radius: 20px;
        margin-top: 60px;
        padding: 30px;
        width: 45%; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
        transition: 0.4s ease;
    }

    #right-section:hover {
        border-color: var(--primary-color); 
        box-shadow: 0 10px 30px rgba(83, 74, 183, 0.15);
    }

    #right-section-title{
        color: var(--text-light);
        font-size: 22px;
        font-weight: 500;
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #2a2a35; 
    }

    #right-section-title p{
        margin: 0;
    }

    #right-section-main{
        width: 100%;
        text-align: center;
    }

    #latest-project a{
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.3s ease;
        text-decoration: none;
    }

    #latest-project a:hover {
        transform: translateY(-5px); 
    }

    #latest-project-img {
        width: 100%;
        max-width: 380px;
        height: 220px;
        object-fit: fill;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    }

    #latest-project-name {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--text-light);
    }

    #latest-project-tech-stack {
        margin: 0;
        padding-top: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #4facfe;
        font-family: "Roboto Mono", monospace;
    }

    /* --- End main --- */

    section {
        scroll-margin-top: 100px; 
    }

    /* --- Skills --- */
    .section-title{
        margin-top: 50px;
        text-align: center;
        font-size: 40px;
        font-weight: 600;
        color: var(--text-light);
    }

    #skills-container{
        margin-top: 60px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    .skill-box{
        width: 300px;
        min-height: 200px;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 25px 20px;
        text-align: center;
        background-color: #D9E9CF;
        border-radius: 30px 40px 40px 40px;
        transition: 0.3s ease;
    }

    .skill-box:hover{
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(217, 233, 207, 0.2);
    }

    .skill-box-title{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .skill-box-title h1{
        font-size: 20px;
        padding-left: 10px;
        margin: 0;
    }
    .skill-box-description{
        margin-top: 10px;
        text-align: left; 
    }

     .skill-box-description ul{
        padding-left: 20px;
        margin-top: 10px;
        line-height: 1.5;
    }

    .skills-svg{
        width: 20px; 
    }

    /* --- End Skills --- */

    /* --- Projects --- */
    #projects {
        padding: 0 32px;
        margin-top: 100px;
    }

    #tab-menu {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-bottom: 50px;
    }

    .tab-btn {
        background: transparent;
        color: var(--text-light);
        border: 1px solid var(--primary-color);
        padding: 15px 20px;
        font-size: 16px;
        font-family: inherit;
        cursor: pointer;
        transition: 0.3s ease;
        width: 250px;
    }

    .tab-btn:hover {
        background-color: rgba(83, 74, 183, 0.2);
    }

    .tab-btn.active {
        background-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }

    .tab-pane {
        display: none; 
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .tab-pane.active {
        display: flex; 
        animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .project-card {
        width: 320px;
        background-color: var(--card-bg);
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .project-card img, .placeholder-img {
        width: 100%;
        height: 180px;
        background-color: #2a2a35; 
        border-radius: 10px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        object-fit: cover;
    }

    .project-card h3 {
        color: var(--text-light);
        margin: 0 0 10px 0;
    }

    .project-card p {
        color: var(--text-dim);
        font-size: 14px;
        margin-bottom: 15px;
    }

    .project-card p:last-of-type {
        font-family: "Roboto Mono", monospace; 
        font-size: 13px;
    }

    .project-card a {
        color: #4facfe;
        text-decoration: none;
        font-weight: bold;

    }
    /* --- End Projects --- */
    
    /* --- Footer --- */
    #contact{
        margin-top: 60px;
    }

    #contact-me p {
        margin: 0;
        text-align: center;
        font-family: Pacifico, Inter, sans-serif;
        font-size: 50px;
        color: var(--text-light);
    }

    #contact-box-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .contact-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 28px;
        background-color: transparent;
        color: var(--text-light);
        border: 1px solid var(--primary-color);
        border-radius: 30px; 
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s ease;
    }

    .contact-btn:hover {
        background-color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(83, 74, 183, 0.2);
    }

    .contact-icon {
        width: 20px;
        fill: currentColor; 
    }

    /* --- End Footer --- */

    /* --- Mobile Responsiveness --- */
    @media (max-width: 900px) {
    main {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        height: auto;
        max-height: none;
        text-align: center;
        padding: 0 15px ;
    }

    #nav-upper {
        padding: 0 15px;
    }

    #profile{
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    #profile-name-container{
        margin-left: 0;
    }

    #sottotitolo {
        margin: 0 auto; 
    }

    #left-section, #right-section {
        width: 100%;
        margin-top: 40px;
    }

    #right-section{
        padding: 20px;
    }

    #CTA-btn-container {
        justify-content: center;
        gap: 20px; 
    }

    #tab-menu {
        flex-wrap: wrap;
    }

    .tab-btn{
        width: 100%;
        max-width: 320px;
    }

    #latest-project-img {
        width: 90%;
        max-width: 320px;
        height: auto;
        border-radius: 10px;
    }

    #skills-container{
        margin-top: 60px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .skill-box{
        width: 270px;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }
    }

    .project-card{
        width: 100%;
        max-width: 320px;
    }

    .project-card img {
        object-fit: fill;
    }

    /* --- End Mobile Responsiveness --- */

    /* --- Javascript Animation --- */

    .hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
    }

    .show {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- End Javascript Animation --- */