:root {
  --font-body: "Playfair Display", serif;
  --font-heading: "Protest Revolution", sans-serif;
  --primary-color: oklch(31.68% 0.069 266.84);
  --second-color: oklch(73.81% 0.177 260.8);
  --neutral-color: oklch(100% 0 0);
  --navbar-height: 3.5rem;
}

/* COLOR ------------------------------------------------*/
.cs-primary-color{
  background-color: var(--primary-color);
}

/* Update bootstrap color */ 
.btn-primary {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
}

/* TYPOGRAPHY ------------------------------------------------*/
h1,h2,h3{
  font-family: var(--font-heading);
}
body{
  font-family: var(--font-body);
}
#logo-font{
  font-family: var(--font-heading);
}

/* HOVER EFFECT FOR BUTTON ------------------------------------------------*/
.btn:hover{
  clip-path: polygon(
    8% 0%, 
    92% 0%, 
    100% 50%, 
    92% 100%, 
    8% 100%, 
    0% 50%);
}

/* NAV ACTIVE PAGE ------------------------------------------------*/
.navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
}

.navbar-collapse {
  position: fixed;
  top: var(--navbar-height); 
  left: -100%;
  width: 33vw;
  height: 100vh;
  background-color:var(--second-color);
  padding: 2rem 1.25rem;
  transition: left 0.3s ease;
  z-index: 1040;
}

.navbar-collapse.show {
  left: 0;
}

.nav-link.active {
  text-decoration: underline;
}

/* POP OVER ------------------------------------------------*/
.for-container-query {
  container-type: inline-size;
}

#contact-btn {
  anchor-name: --contact-anchor;
}

#contact-popover {
  display: none;
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: var(--neutral-color);
}

#contact-popover:popover-open {
  display: grid;
  place-items: center;
}

#contact-popover::backdrop {
  backdrop-filter: blur(0.25rem);
}

.contact-container {
  align-items: center;
  text-align: center; 
  gap: 1.25rem;
  padding: 2rem 1.5rem; 
}

.contact-container img {
  inline-size: 60%;
}

/* Medium screen styles (576px and above:bootstrap mobile size)*/
@media (min-width: 36rem) {

  .navbar-collapse {
    position: static;
    inset: auto;
    inline-size: auto;
    block-size: auto;
    background: transparent;
    padding: 0;
    transition: none;
  }
  
  .navbar-nav {
    gap: 0;
  }

  .navbar-collapse.show {
    left: auto;
  }

  .nav-item button{
    background-color: var(--second-color);
  }

}

/* Medium screen container styles (576px and above:bootstrap mobile size)*/
@container (min-width: 36rem) {

  #contact-popover {
    position: absolute;
    position-anchor: --contact-anchor;
    inset: auto;
    inset-block-start: anchor(bottom);
    inset-inline-end: anchor(right);
    position-visibility: no-overflow;
    inline-size: auto;
    block-size: auto;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.313rem var(--accent-400);
  }

  .contact-container {
    min-inline-size: 90%;
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
    padding-inline: 1rem;
    inline-size: fit-content;
    block-size: auto;
  }

  .contact-container .bio {
    display: none;
  }

  .contact-container img {
        inline-size: 60%;
        min-inline-size: 7.5rem;
        max-inline-size: 13.75rem;
        border-radius: 50%;
        block-size: auto;
        object-fit: cover;
        order: -1;
  }

}

/* Large screen styles (1100px and above)*/
@container (min-width: 68.75rem) {
  #contact-popover {
    inline-size: 36%;
  }

  .contact-container .bio {
    display: block;
  }
}