body{
margin:0;

background-image:url("assets/portfolio-background.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

overflow-y:auto;
overflow-x:hidden;

color:rgb(255, 255, 255);

font-family:"Segoe UI", sans-serif;
}

/* canvas */

canvas{ 
position:fixed; 
top:0; 
left:0; 
width:100%;
height:100%;
z-index:0; 
background:transparent;
}


/* NAME */

#name{

display:grid;

grid-template-columns: 1fr 140px;

align-items:center;

gap:20px;

margin-bottom:20px;

}

#name-text h1{

font-size:50px;

font-family:"Playfair Display", serif;

font-style:italic;

font-weight:700;

letter-spacing:2px;

margin:0;

line-height:1.05;

}

.designation{

margin-top:20px;

font-family:"Playfair Display", serif;

font-size:25px;

font-style:italic;

opacity:0.85;

}

/* PROFILE PICTURE */

#profile-pic{

width:150x;
height:148px;

border-radius:50%;

object-fit:contain;

border:2px solid rgba(46, 74, 66, 0.35);

box-shadow:0 0 20px rgba(193, 156, 207, 0.35);

}

/* PROFILE CONTAINER */

#profile {

position:absolute;

top:5px;
left:65%;

transform:translateX(-50%);

width:540px;

display:flex;
flex-direction:column;

gap:10px;

padding:20px;

z-index:5;

}


/* NAME NODE */

#name{

background:rgba(63, 20, 102, 0.15);
backdrop-filter:blur(2px);

padding:25px 20px;

border-radius:18px;

width:100%;

text-align:left;

color:rgb(255, 255, 255);

}

/* ABOUT NODE */

#about{

background:rgba(63, 20, 102, 0.15);
backdrop-filter:blur(2px);

padding:25px 20px;

border-radius:18px;

width:100%;

text-align:left;

color:rgb(255, 255, 255);

}


/* SKILL BOX */

#skill-box{

background:rgba(63, 20, 102, 0.15);
backdrop-filter:blur(2px);

padding:25px 20px;

border-radius:18px;

width:100%;

text-align:left;

color:rgb(255, 255, 255);

}


/* EXPERIENCE NODE */

#experience{

background:rgba(63, 20, 102, 0.15);
backdrop-filter:blur(2px);

padding:25px 20px;

border-radius:18px;

width:100%;

text-align:left;

color:rgb(255, 255, 255);

}


/* SKILLS GRID */

#skills{

margin-top:20px;

display:flex;
flex-wrap:wrap;

gap:12px;

}


/* SKILL TAG */

.skill{

padding:8px 14px;

background:rgba(5, 66, 47, 0.45);

border:1px solid rgba(197, 183, 245, 0.35);

border-radius:20px;

font-size:13px;

backdrop-filter:blur(6px);

transition:0.3s;

}

.skill:hover{

background:rgba(220,166,219,0.35);

transform:scale(1.08);

}


/* PROJECT CONTAINER */

#project-indicator{

position:fixed;

top:30px;
left:22%;

transform:translateX(-50%);

font-size:14px;

letter-spacing:2px;

padding:6px 14px;

border-radius:12px;

background:rgba(5, 66, 66, 0.45);

border:1px solid rgba(220, 198, 226, 0.4);

backdrop-filter:blur(8px);

color:rgb(255, 255, 255);

z-index:6;

opacity:0;

transition:opacity 0.6s;

}


#projects{

position:absolute;

top:0;
left:0;

width:100vw;
height:100%;

pointer-events:none;

z-index:5;

}


/* PROJECT NODES */

.project{

position:absolute;

width:140px;
height:140px;

border-radius:50%;

background:rgba(5,72,72,0.15);

border:1px solid rgba(247, 250, 250, 0.5);

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

text-align:center;
font-size:11px;

transition:all 0.3s ease;

pointer-events:auto;
cursor:pointer;

}


/* PROJECT EXPAND */

.project:hover{

width:300px;

height:auto;

z-index:7;

padding:18px;

border-radius:16px;

background:rgba(66,50,67,0.9);

transform:scale(1.1);

}


.project-content{
display:none;
}

.project:hover .project-content{
display:block;
}


.skills{

margin-top:10px;

display:flex;

flex-wrap:wrap;

gap:6px;

}


.skills span{

background:#8e82aa;

padding:3px 6px;

border-radius:6px;

font-size:10px;

}


/* -----------------------------
   MOBILE / SMALL SCREEN FIX
------------------------------*/

@media (max-width: 900px){

  /* PROFILE becomes normal flow */
  #profile{
    position:relative;
    top:auto;
    left:auto;
    transform:none;

    width:90%;
    margin:20px auto;
  }

  /* Stack name section */
  #name{
    grid-template-columns: 1fr;
    text-align:center;
  }

  #profile-pic{
    margin:0 auto;
  }

  /* Move project indicator */
  #project-indicator{
    position:relative;
    top:auto;
    left:auto;
    transform:none;

    margin:20px auto;
    text-align:center;
  }

  /* Push projects BELOW */
  #projects{
    position:relative;
    margin-top:40px;
  }

}