/*
  STYLE GUIDE STYLING 
  Default styling for the style guide 
*/
body {
  font-family: "Inter", "Roboto", Arial, sans-serif;
  padding: 2rem;
}

.element {
  padding-bottom: 2rem;
  border-top-width: 0.15rem;
  border-top-style: solid;
  border-top-color: black;
}

h1{
  font-size: 3rem;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}


h2 {
  margin-top: 1rem;
}

h3 {
  font-style: italic;
  margin-top: 1rem;
}

h4 {
  margin-bottom: 0.25rem;
}

h5 {
  margin-bottom: 0.25rem;
}

h6 {
  margin-bottom: 0.25rem;
}

p {
  margin-top: 0;
  font-size: 1rem;
}


nav a:hover, nav a:focus {
  text-decoration: none;
}


section {
  margin-bottom: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2rem 0;
}

:root { --nav-h: 56px; }          /* <-- match your nav’s real height */

#about,
#education,
#skills,
#experience,
#projects,
#gallery,
#contact {
  scroll-margin-top: var(--nav-h);
}


/* 
  INTERACTIVE ELEMENTS -------------------
*/

a {
  position: relative;
  text-decoration: none;
  color: rgb(204, 74, 23); /* link color */
  outline-color: white;
  transition: outline-color 0.5s ease-in-out;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;          /* place underline just below text */
  width: 0;
  height: 2px;
  background: orange;
  transition: width 0.3s ease-in-out;
}

a:not(.button):not(:has(img)):hover::after {
  width: 100%;
}


a:focus {
  outline: 3px solid orange;
  border-radius: 6px;
  outline-offset: 1px;
}

a img {
      border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease;
}

a img:hover {
  transform: translateY(-5px);          /* slight lift */
  box-shadow: 0 0 15px orange;          /* orange glow */
}

/* Nav bar */


nav {
  position: sticky;
  top: 0;              /* sticks to the very top */
  background: #fff;    /* give it a background so content doesn’t show through */
  padding: 0.5rem; 
  padding-left: 0rem;    
  border-bottom: 1px solid #ccc; /* optional styling */
  z-index: 1000;       /* keeps it above other content */
}

/* Name Transition */
h1 {
transition: opacity 0.6s ease;
}
.fade-out {
opacity: 0;
}


/* Responsive breakpoints */
@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}