*{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

:root{
  color-scheme: dark;
  --body-bg-color: #06080c;
  --surface-color: rgb(25, 25, 25);
  --text-color-primary: #f4f8fb;
  --text-color-muted: #c3cdd8;
  --header-bg: rgba(0, 0, 0, 0.88);
  --footer-bg: #141414;
  --icon-hover-bg: rgba(255, 255, 255, 0.08);
  --icon-active-bg: rgba(255, 255, 255, 0.12);
  --theme-toggle-bg: rgba(255, 255, 255, 0.05);
  --contact-link-color: #d6dde4;
  --contact-link-hover: #ffffff;
  --tag-inner-bg: rgba(255, 255, 255, 0.08);
  --pill-text-color: #041f29;
  --card-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --icon-accent-color: #ffffff;
  --gradient-babyblue-cyan-green: linear-gradient(
    135deg,
    #b3ecff 1%,
    #66e4ff 25%,
    #00d9ff 55%,   /* vivid cyan */
    #04ffd5 72%,   /* cyan shifting toward green */
    #00ffc8 100%   /* fresh green */
  );
  --solid-accent-fallback: #66e4ff;
  --icon-glyph-size: 50px;
  --sweep-angle: 0deg; /* animated angle for conic sweep (registered below) */
}

body.light-theme{
  color-scheme: light;
  --body-bg-color: #f4fbff;
  --surface-color: #ffffff;
  --text-color-primary: #0f1c2b;
  --text-color-muted: #475569;
  --header-bg: rgba(255, 255, 255, 0.92);
  --footer-bg: #eef5fa;
  --icon-hover-bg: rgba(10, 41, 54, 0.18);
  --icon-active-bg: rgba(10, 41, 54, 0.24);
  --theme-toggle-bg: rgba(102, 228, 255, 0.18);
  --contact-link-color: #1f3d52;
  --contact-link-hover: #0b1620;
  --tag-inner-bg: rgba(10, 32, 48, 0.08);
  --pill-text-color: #0b2230;
  --card-shadow: 0 12px 32px rgba(15, 35, 50, 0.18);
  --icon-accent-color: #000000;
}

/* Allow --sweep-angle to animate as an angle (Chrome/Safari; Firefox implementation emerging) */
@property --sweep-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

canvas{
  cursor: grab;
}

canvas:active{
  cursor: grabbing;
}


body {
  background-color: var(--body-bg-color);
  margin: 0;
  color: var(--text-color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2{
  color: var(--text-color-primary);
  font-size: 5rem;
  margin: 0;

}

h2{
  font-size: 2.5rem;
}

.skills-canvas{ 
  float: left; 
  aspect-ratio: 1 / 1; 
  margin: 0 1rem 1rem 0; 
  background: linear-gradient(160deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 100%);  
  clip-path: circle(50%); 
  shape-outside: circle(50%); 
}

body.light-theme .skills-canvas{
  background: transparent !important;
}
 
#logos{
  display: inline-flex;
    flex-direction: row;
    color: var(--text-color-primary);
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

#skills, #about, #projects{
  display: flex;
  flex-direction: column;
  margin: 2.5rem auto;
  align-items: center;
}

#skills{
  padding: 0 10%;
  width: 100%;
}

#projects{
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  width: 80%;
  max-width: 1000px;
}

#resume > a{
  padding: 1rem;
  border-radius: 15px;
  cursor: pointer;
  background: var(--gradient-babyblue-cyan-green);
  text-decoration: none;
  color: black;
  font-weight: bold;
}

#resume{
  margin-right: 0.5rem;
}

#resume > a:hover{
  filter: brightness(1.1);
  transform: translateY(-2px);
  transition: transform 0.25s, filter 0.25s;
}


#about {
  display: block;  
  width: 100%;
  max-width: 1350px;
  padding: 0 5%;
}


#about-desc{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

  
#footer{
  width: 100%;
  gap: 0.5rem;
  padding: 2rem 0;
  margin-top: 1rem;
  background-color: var(--footer-bg);
  color: var(--text-color-muted);
  font-size: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#footer h2,
#footer h5{
  color: var(--text-color-primary);
}

hr{
  width: 75px;
  height: 4px;
  border: none;
  background: var(--gradient-babyblue-cyan-green);
  border-radius: 2px;
}

#skill-icons{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;  
  align-content: center;      
  align-items: center;
  gap: 1rem;
}

#skill-icons > svg{
  width: 65px;
  height: auto;
}

.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



.projects-container{
  background-color: var(--surface-color);
  border-radius: 10px;
  width: 100%;               
  display: flex;
  color: var(--text-color-primary);
  box-shadow: var(--card-shadow);
}


.projects-container > img{
  width: 25%;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: opacity 0.3s ease;
}

.projects-container:hover > img{
  opacity: 0.75;
}




/* Mobile breakpoint: prevent overly thin image slice */
@media (max-width: 750px){
  .projects-container{
    flex-direction: column;        
    min-height: initial;            
  }
  .projects-container > img{
    width: 100%;
    height: 250px;                  
    border-radius: 15px 15px 0 0; 
  }
}

@media (max-width: 760px){
  #about{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0%;
    gap: 1rem;
  }
  .skills-canvas{
    margin: 0;
  }


  #about-desc{
    width: 100%;
    max-width: none;
    padding: 0 10%;
  }
}

@media (max-width: 900px){
  #container{
    gap: 5rem !important;
    padding: 15vh 1rem 10vh 1rem !important;
  }
  #intro{
    align-items: center;
    text-align: center;
  }
  #logos{
    justify-content: center;
  }
}

p{
  margin: 0;
  font-family: "Inter";
  font-weight: 400;
}

#p2{
  color: var(--text-color-muted);
}


.profile-frame{
  position: relative;
  display: inline-flex;
  width: 290px;
  height: 290px;
  border-radius: 100%;
  background-image: var(--gradient-babyblue-cyan-green);
  isolation: isolate;
  overflow: visible;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.profile-frame::before{
  content: "";
  position: absolute;
  inset: -5%;
  background-image: var(--gradient-babyblue-cyan-green);
  filter: blur(25px);
  border-radius: inherit;
  z-index: -1;
}

.profile-frame > img{
  display: block;
  width: 300px;
  height: 300px;
  border-radius: 100%;
}

.icon{
  cursor: pointer;
  display: inline-flex;          /* shrink-wrap around SVG */
  align-items: center;
  justify-content: center;
  border-radius: 10px;           /* subtle rounding */
  color: var(--icon-accent-color);
}

.icon > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Uniform SVG sizing inside icons (override inline width/height) */
.icon > a > svg{
  width: var(--icon-glyph-size) !important;
  height: var(--icon-glyph-size) !important;
  overflow: visible;
}

.icon:hover, .icon:focus-within{
  background: var(--icon-hover-bg);
  transform: translateY(-3px);
}

.icon:active{
  transform: scale(0.95);
  background: var(--icon-active-bg);
}

/* Keyboard focus outline inside */
.icon > a:focus-visible{
  outline: 1px solid var(--solid-accent-fallback);
  outline-offset: 1px;
  border-radius: 10px;
}


#intro{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#intro > h2{
  background: var(--gradient-babyblue-cyan-green);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#container{
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 33vh 1rem 24vh 1rem;
  gap: 2rem;
}

#bookmarks{
  display: inline-flex;
  flex-direction: row;
  float: right;
  font-size: 1.5rem;
  gap: 3rem;
  align-items: center;
}

#bookmarks > a{
  color: inherit;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans", Ubuntu, Cantarell,
               "Helvetica Neue", Arial, sans-serif;
}

#bookmarks > a:hover{
  text-decoration: underline;
  cursor: pointer;
}

#bookmarks > a{
  color: inherit;
  text-decoration: none;
}

#bookmarks > a:hover{
  text-decoration: underline;
  cursor: pointer;
}

#theme-toggle{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--theme-toggle-bg);
  color: var(--text-color-primary);
  cursor: pointer;
  font: inherit;
}

#theme-toggle:hover,
#theme-toggle:focus-visible{
  background: var(--icon-hover-bg);
}

#theme-toggle:active{
  background: var(--icon-active-bg);
}

#theme-toggle:focus-visible{
  outline: 2px solid var(--solid-accent-fallback);
  outline-offset: 3px;
}

#theme-toggle .theme-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7) rotate(-15deg);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#theme-toggle .theme-icon svg{
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

#theme-toggle .theme-icon--sun svg circle{
  fill: currentColor;
}

#theme-toggle .theme-icon--sun svg line{
  stroke: currentColor;
}

#theme-toggle .theme-icon--moon svg{
  fill: currentColor;
  stroke: none;
}

#theme-toggle .theme-icon--moon{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

body.light-theme #theme-toggle .theme-icon--sun{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

body.light-theme #theme-toggle .theme-icon--moon{
  opacity: 0;
  transform: scale(0.7) rotate(15deg);
}

#email{
  margin-left: 0.5rem;
}


#main{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#header{
  width: 100%;
  padding: 1% 8.5% 0.5% 8.5%;
  position: fixed;
  z-index: 1;
  background-color: var(--header-bg);
  color: var(--text-color-primary);
  border-bottom: 3px solid transparent;
  border-image: var(--gradient-babyblue-cyan-green) 1;
  border-image-slice: 1;
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#header > a.header-logo{
  float: left;
  font-size: 1.5rem;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-self: center;
}

#header > a.header-logo:hover{
  text-decoration: underline;
  cursor: pointer;
}

#project-name{
  font-size: 1.75rem; 
  font-weight: bold;
  color: white;
}

body.light-theme #project-name{
  color: #000000;
}

#project-info{
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#project-title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


#project-desc{
  font-size: 1rem;
  color: var(--text-color-muted);
  line-height: 1.4rem;
  font-weight: 400;
  padding: 20px 0;
  font-family: "Inter", sans-serif;
}

.view-project{
  cursor: pointer;
}

h3{
  margin: 0;
}

#project-details{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

#project-links{
  display: flex;
  flex-direction: row;
  gap: 2rem;
  font-size: 1rem;
}

#project-links > a{
  background: var(--gradient-babyblue-cyan-green);
  border-radius: 5px;
  padding: 0.6rem;
  font-weight: bold;
  color: var(--pill-text-color);
  text-decoration: none;
  text-align: center;
}

#project-links > a:hover{
  cursor: pointer;
  filter: brightness(1.05);
}

#project-tags{
  display: inline-flex;
  gap: 1rem;
  flex-direction: row;
  font-size: 1rem;
  color: var(--text-color-muted);
  flex-wrap: wrap;
}

#project-details > span > a{
  color: inherit;
  text-decoration: none;
  padding: 0.5rem;
}

#project-tags > span{
  position: relative;               /* establish containing block for pseudo */
  border-radius: 100px;             /* keep pill shape */
  padding: 0.5rem 0.75rem;          /* a bit more horizontal space */
  font-weight: bold;
  background: var(--tag-inner-bg); /* inner background */
  z-index: 0;                       /* allow gradient layer behind text */
  color: inherit;                   /* keep inherited text color */
  overflow: hidden;                 /* clip pseudo-element bleed */
}

/* Animated gradient border layer */
#project-tags > span::before{
  content: "";
  position: absolute;
  inset: 0;                         /* full size */
  padding: 2px;                     /* border thickness */
  border-radius: inherit;
  /* Base fallback: static conic gradient rotated via transform keyframes (below) */
  background: conic-gradient(from 0deg,
    rgb(0, 238, 255) 0deg 24deg,
    rgb(0, 247, 255) 24deg 108deg,
    rgb(0, 255, 240) 108deg 186deg,
    rgb(0, 255, 200) 186deg 264deg,
    rgb(0, 255, 170) 264deg 330deg,
    rgb(0, 255, 150) 330deg 360deg);
  animation: tagBorderRotate 4s linear infinite;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;      /* punch hole for center (WebKit) */
          mask-composite: exclude;  /* punch hole for spec-compliant */
  z-index: -1;                      /* sit behind content */
  pointer-events: none;             /* not interactive */
  will-change: transform;           /* hint to browser */
  contain: paint;                   /* isolate repaint area */
}

/* Optional subtle glow on hover */
#project-tags > span:hover::before{
  filter: brightness(1.15) saturate(1.1);
}


/* Fallback rotation (used when custom property animation unsupported) */
@keyframes tagBorderRotate{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Preferred animation: animate the angle itself for smoother sweep */
@keyframes tagSweepAngle {
  0% { --sweep-angle: 0deg; }
  100% { --sweep-angle: 360deg; }
}

/* Override when conic gradients & @property animation are available */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  #project-tags > span::before{
  background: conic-gradient(from var(--sweep-angle),
    rgb(0, 238, 255) 0deg 24deg,
    rgb(0, 247, 255) 24deg 108deg,
    rgb(0, 255, 240) 108deg 186deg,
    rgb(0, 255, 200) 186deg 264deg,
    rgb(0, 255, 170) 264deg 330deg,
    rgb(0, 255, 150) 330deg 360deg);
    animation: tagSweepAngle 4s linear infinite; /* replaces transform rotation */
    will-change: contents; /* limited hint: gradient angle changes */
    transform: none;      /* ensure no double rotation */
  }
}

/* Contact links (phone & email) */
.contact-link{
  color: var(--contact-link-color);
  text-decoration: none;
  transition: color 0.25s ease;
  display: inline-block;
  margin-top: 0.25rem;
}

.contact-link:hover,
.contact-link:focus-visible{
  color: var(--contact-link-hover); /* theme hover */
}

.contact-link:active{
  color: var(--contact-link-hover);
}