:root { 
  --nav-h: 90px; 
  scroll-behavior: smooth;
}
#projects,
#experience,
#contact {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

html{
  background: #000 url("./images/website-background.jpeg") center / cover no-repeat fixed;
  min-height: 100%;
  overscroll-behavior: contain;
}
body{
  background: transparent;
  margin: 0;
  padding-top: var(--nav-h);
  font-family: "Lora", serif;
}
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .55);
  position: fixed;
  height: var(--nav-h);
  top: 0; left: 0; right: 0;  
  width: 100%;
  z-index: 1000;
}

.navbar-container{
  display: flex;
  width: 100%;
  justify-content: center;
}

.navbar-menu{
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.navbar-item{
  height: 90px;
  display:flex;
  justify-content: center;
  align-items: center;
  
}

.navbar-links{
  display: block;
  padding: 0 5rem;
  color: #E8E8E6;
  text-decoration: none;
  transition: 400ms;
}

.navbar-links:hover{
  color: #7E7E7E;
  transition: all 0.3s ease;
}


/* repsonsive screen */
@media (max-width: 900px){

  .navbar-links{
    padding: 0 2rem;
    font-size: 1rem;
  }
}

/* phone screen width*/
@media (max-width: 640px){

   .navbar-item{
    height: 50px;
  }
   .navbar-links{
    padding: 0 2rem;
    font-size: .75rem;
  }
}

.main {
  display: grid;
  place-items: center;
  height: calc(100vh - var(--nav-h));
}

.main-container{
  width: auto;
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.main-content{
  color: #E8E8E6;
}

:root{
  --shift: clamp(20px, 4vh, 60px);
}
.main-eyebrow{
  justify-self: start;
  text-align: left;
  padding: 10px;
  position: relative;
  transition: 500ms;
  left: 0%;
  transform: translateX(0%);

  @supports (-webkit-hyphens: none) and (not (-moz-appearance: none)) {
    text-align: left;
  }
}

.main-title{
  font-size: 3em;
  letter-spacing: 0.2em;
  line-height: 1.05;
  text-decoration: underline;
  margin: 0;
  padding: 10px;
  justify-self: center;
  transform: scale(100%);
  transition: 500ms;
}

.main-tagline{
  justify-self: end;
  position: relative;
  right: 0%;
  transform: translateX(0%);
  padding: 10px;
  transition: 500ms;

  @supports (-webkit-hyphens: none) and (not (-moz-appearance: none)) {
    text-align: right;
  }
}

@media (max-width: 900px) {
  .main-eyebrow{
    /* justify-self: center; */
    left: 50%;
    transform: translateX(-50%);

    @supports (-webkit-hyphens: none) and (not (-moz-appearance: none)) {
      display: inline-block;
    }
  }

  .main-title{
    transform: scale(80%);
    justify-self: center;
    text-align: center;
  }

  .main-tagline{
     right: 50%;
     transform: translateX(50%);
     
     @supports (-webkit-hyphens: none) and (not (-moz-appearance: none)) {
       transform: translateX(110%);
       display: inline-block;
     }
  }

}
@media (max-width: 640px) {
  .main{
    display: grid;
    place-items: center;
  }
}

.section-container{
  width: 80%;
  background-color: rgba(0, 0, 0, .50);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; 
  flex-direction: column;
  align-items: center;
  border-radius: 40px;
  outline-style: solid;
  outline-width: 1px;
  outline-color: #E8E8E6;
  margin: 64px auto;
}

@media(max-width:640px) {
  .section-container {
    margin-left: 8px;
    margin-right: 8px;
    width: 95%;
  }

  .exp-description {
    padding: 0 !important;
  }
}

.section-header{
  color: #E8E8E6;
  font-size: 2em;
  margin: 0px;
  padding: 30px 10px 10px 10px;
}



.section-line{
  height: 1px;
  width: 92%;
  background:#E8E8E6;
  margin: 4px 0; 
}

.section-wrapper{
  width: 85%;
  height: 350px;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
  gap: 24px;
}

.project-subheader{
  color: #E8E8E6;
  font-size: 14px;
  text-align: center;
  padding: 10px;

}
.project-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  height: 100%;
  border-radius:20px;
  position: relative;
  transition: transform .20s ease;
}

.project-line{
  background: black;
  height: 1px;
  width: 80%;
}

.title{
  font-weight: 1000;
  font-size: 20px;
  text-align: center;
}

.project-text{
  margin: 0;
  font-weight: bold;
}

.project-title{
  display: inline-flex;
  align-items: center;             /* vertical centering */
  justify-content: center; 
  padding: 20px 20px 0px 20px;
  gap: 8px;

}
.project-title .project-icon{
  font-size: 1em;                  /* same height as text (inherits 20px) */
  line-height: 1;
  color: #111; 
}



.project-timeline{
  font-size: 12px;
  margin: none;
}

@media (hover: hover){
  .project-card:hover{
    transform: translateY(-10px) scale(1.03);
    box-shadow: 
    0 18px 30px rgba(0,0,0,.28),
    0 0 0 1px rgb(255,255,255),
    0 0 24px rgb(255,255,255);
  }

  .btn-send:hover{
    box-shadow: 
    0 0 24px rgb(255,255,255);
  }

  .contact-links a:hover{
    opacity: 0.85;
    transform: translateY(-1px)
  }


}

.project-description{
  font-size: 14px;
  padding: 0px 20px;
  text-align: center;
  margin: 0px;
}

.carousel {
  width: 90%;
  margin: 0 auto;
}

.logo-container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin-bottom: 14px;
  gap: 50px;
  padding: 10px 0px;
}

.logo-container img{
  height: 40px;
}

.exp-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.exp-card.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.exp-description{
  font-size: 14px;
  padding: 10px 40px;
  margin: 0px;
}

.exp-dates{
  font-weight: 1;
  font-size: 14px;
  text-decoration: underline;
}

.contact-container{
  color: #E8E8E6;
  width: 85%;
  padding: 30px;
  margin-bottom: 20px;

}

.contact-form{
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.contact-form input{
    width: 80%;
    color: rgb(17, 17, 17);
    background: rgb(232, 232, 230);
    font-family: "Roboto Mono", monospace;
    font-size: 15px;

    border-radius: 12px;
    padding: 14px 16px;
}

.contact-form textarea{
  width: 100%;
  background: #E8E8E6;
  min-height: 250px;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: "Roboto Mono", monospace;
}

.btn-send{
  background-color: rgba(137, 137, 137, .60);
  border-radius: 13px;
  padding: 10px 18px;
  cursor: pointer;
  transition: 300ms ease;
  border-style: none;
  width: 30%;
  right: 0;
  font-family: "Lora" serif;
  color: white;
  border: solid white;
  align-self: flex-end;
}

.contact-links{
  display: flex;
  width: 70%;
  gap: 25px;
  align-items: center;
}

.contact-links a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #e8e8e6;
  text-decoration: none;
}

.contact-links i{
  font-size: 25px;
  line-height: 1;
}

.bottom{
  display: flex;
  flex-direction:row;
}

:root{
  --tt-bg: hsl(0 0% 10% / 0.95);
  --tt-color: #fff;
  --tt-radius: 10px;
  --tt-pad: 8px 10px;
  --tt-shadow: 0 10px 24px rgba(0,0,0,.35);

  --tt-speed: 180ms;
  --tt-ease: cubic-bezier(.2,.7,.3,1);
  --tt-show-delay: 60ms;

  --tt-offset: 10px;
}

.contact-links a::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + var(--tt-offset));
  transform: translateX(-50%) translateY(4px) scale(.98);
  background: var(--tt-bg);
  color: var(--tt-color);
  padding: var(--tt-pad);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--tt-speed) var(--tt-ease) var(--tt-show-delay),
    transform var(--tt-speed) var(--tt-ease) var(--tt-show-delay);
  z-index: 10;
}


/* show on hover/focus */
.contact-links a:hover::after,
.contact-links a:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.contact-links a:hover::before,
.contact-links a:focus-visible::before{
  opacity: 1;
}


.form-status{
  color: #E8E8E6;
  margin-top: 8px;
  min-height: 1.2em; /* reserves space so layout doesn't jump */
}