:root{
    /*--var creates variable*/
    --bg:#0c0c35; /*dark blue: 0c0c35 lighter dark blue:23236b   Orange:c44f0c  */
    --text: #ffffff;
    --muted: #e5e7eb;
    --hero-h1: clamp(28px, 5vw, 56px);   /*width, viewport scale, height */
    --hero-sub: clamp(14px, 2.4vw, 22px); /*Gives better font and vw scales to viewport width*/
    --accent: #00bfa6;
  }
 
  html{scroll-behavior: smooth;}
  
  /*Hero, means attention grabber*/
  #top.hero{
    background:  linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.75)), url("images/wbT3.gif") ;/*  <-- darken background   */
    /*background-image:url("images/gif.gif")  /*  <-- image   */;
    background-size: cover;       /*Covers whole top with background*/
    background-position: center;
    min-height: 70vh;   /*70% of viewport height*/
    display: grid;
    place-items: center;
    text-align: center;
  }

  .hero-inner{max-width: 900px; margin: 0 auto;}
  .hero h1{font-size: var(--hero-h1); margin: 0 0 8px;} /*  var calls variable defined in root */
  .hero-sub{font-size: var(--hero-sub); opacity: .9; margin: 0 0 18px;}
  .hero-cta{ /* cta = call to action, attracts user input*/
    display: inline-block;
    padding: 10px 18px;
    border: 1px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
  }
  .hero-cta:hover{ background:rgba(0,191,166,0.15);}


  body{ 
    font-family: Arial, sans-serif;
    background: #0f0f0f;
    color: #ffffff;
    margin: 0;  /* remove default outer gap */
    padding-left:  0px;/* add some inner space */
    padding-top: 0px;
  }

  h1{margin-top: 0; /* keep the title snug to the top */ } 
  h2{text-align: center;}
  p{text-align: center;}

  nav{
  position: sticky; 
  top: 0; 
  background: #000000;
  border: 1px solid #e5e7eb;
  padding: 10px 10px; 
  margin: 0px 0px 0px; 
  display: flex;
  justify-content: center; /*Horizantle align*/ 
  text-align: center; /*Verticle align*/ 
  gap: 500px; /* Responsive spacing*/
  z-index: 9999;
 }
  .linkHover {
      text-decoration: none;     /* no underline by default */
  }
  .linkHover:hover {
     text-decoration: underline; 
  }

  @media (max-width: 480px){
  nav{
    padding: 12px 10px;
    gap: 16px;                  /* tighter spacing on very small phones */
  }
  nav a{
    padding: 6px 8px;           /* bigger tap targets */
    display: inline-block;
  }
}

  .section {
  color: #e5e7eb;
 /* border: 1px solid #e5e7eb;
  border-radius: 12px;*/
  padding: 16px;
  /*margin: 16px 0;*/
  box-shadow: 0 6px 18px rgba(68,61,61,0.5);
  transition: background-color .10s ease;
  scroll-margin-top:72px;
  }

  
  #about{background: #000000;}
  #projects{background: #0f0f0f;}
  #contact{background: #000000; text-align: center;}

  img { max-width: 100%; display: block; border-radius: 100px; } /*Fixes image*/

/*about section*/
#about{
  background: #000;
  padding: 40px 20px;
}

.about-container{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  gap: 28px;
}

.about-top{
  grid-column: 1/-1; /* across whole top*/
}

.about-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 28px;
}

.about-card{
  background: #0f0f0f;
  color: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(68, 61, 61, 0.5);
  transition: background-color .2s ease, transform .2s ease;
}

.about-card:hover{
  background-color: #141414;
  transform: translateY(-2px);
}

.about-card h3{
  margin: 0 0 10px;
  color: var(--accent);
  text-align: center;
}


/*List for skills card*/
.about.list{
  list-style: none; /*Changes what go into list*/
  margin: 0;
  padding: 0;
} .about-list li{ padding: 6px 0;}

/* Responsive: stack the two bottom cards on small screens */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}


/*Carousel Layout*/
.carousel {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 0; /*room for arrows*/
}

.carousel-viewport{ 
  overflow: visible;
  position: relative;
  perspective: 1000px;
  height: 340px;
  z-index: 1;
}

.carousel-track{
    position: relative;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*Arrow buttons */
.carousel-btn{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
   background: transparent;
   color: #e5e7eb;
   border: none;
   font-size: clamp(36px,6vw, 72px);
   line-height: 1;
   padding: 0 8px;
   cursor: pointer;
   z-index: 1000; /*Puts above cards*/
   user-select: none;
}

.carousel-btn:hover {opacity: .85; transform: translateY(-50%) scale(1.05);}
.carousel-btn.is-left{left: 8px;}
.carousel-btn.is-right{right: 8px;}

/*card in Carousel*/
.card{
  position: absolute; /*Cards get placed in the Java script*/
  left: 50%;
  top: 0;
  transform: translateX(-50%); /*transformation before Java script is applied*/
  transform-origin: center bottom;
  width: 260px;
  min-height: 260px;
  background: #000;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 12px 12px rgba(0,0,0,.3);
  transition: transform .45s ease, opacity .45s ease, z-index .45s ease; /* Smooth transitions*/
  will-change: transform, opacity; /* variables change in java script*/
  padding-bottom: 52px;
}

/*Front card*/
.card.is-current{
  opacity:1 ;
  z-index: 5;
  
}

.card.is-current:hover{
 scale: 105%;
}

/*Side card*/
.card.is-side{
  opacity: .3;
  z-index: 2;
}

.card.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Adds effect to card
  
.card img {
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 191, 166, 0.2);
  transition: transform 0.3s ease;
}
.card img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(0, 191, 166, 0.4);
}*/

/*hidden project sections*/

.project-details{
  display: none;
  background: #000;
  color:#fff;
  padding:40px;
  margin:40px auto;
  max-width: 800px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(48, 48, 48, 0.4);
  transform-origin: center top;
}

/* Shrink in and out, block hides section */
.project-details.active{
  display: block; /* keeps it hidden*/
  animation: expandIn 500ms ease forwards;
}

.project-details.closing{
  display: block; /* keeps it hidden*/
  animation: shrinkOut 220ms ease forwards;
}


/* See more/ back-to-projects link */
.card .see-more{
  position:absolute;
  left:50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-block;
  padding: 6px 10px;
  border: 1px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--accent);
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(2px);
  font-size: 14px;
}.card .see-more:hover{background:rgba(0,191,166,0.08);}


.see-more, .back-to-projects{
  display:inline-block;
  color:var(--accent);
  text-decoration: none;
  margin-top: 8px;
  
}

.project-details .back-to-projects{
  display: block;
  margin: 24px auto 0;
  width: max-content;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
} .project-details .back-to-projects:hover{background:rgba(0,191,166,0.08);}

/* Open animation*/

@keyframes expandIn{
  from{opacity: 0; transform: scale(.96);}
  to  {opacity: 1; transform: scale(1); }
}

/* Close animation */
@keyframes shrinkOut{
  from{opacity: 1; transform: scale(1);}
  to  {opacity: 0; transform: scale(.88); }
}




/*Backend Button*/
.backendBtn{
  background-color: #000000;
  color: #c44f0c;
  border: 1px solid #e5e7eb;            /* light border */
  border-radius: 12px;                  /* rounded corners */
  padding: 16px;                        /* inner space */
  margin: 16px 0;                       /* space above/below the card */
  box-shadow: 0px 6px 18px rgba(68, 61, 61, 0.5);/* soft shadow */

}
.backendBtn:hover{
  background-color: #0f0f0f;
  
}


/*for small Screens*/

@media (max-width: 640px){
  .card {width: 220px;}
}