/* Style Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "londrina-shadow-regular", "baumans-regular", sans-serif;
    line-height: 1.5;
    font-size: 24px;
}

/* Font Imports */
.londrina-shadow-regular {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.baumans-regular {
  font-family: "Baumans", system-ui;
  font-weight: 400;
  font-style: normal;
}


/* Header Styles */
header {
    position: sticky; 
    top: 0;
    background-color: rgb(163, 186, 210);
    border-bottom: 1px solid midnightblue;
}

header nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

header nav li {
    display: inline-block;  
    margin: 10px; 
}

/* Link Styles */
li a {
    display: block;
    padding: 10px 15px; /* Increased padding for better click area */
    color: midnightblue;
    font-size: 24px;
    text-decoration: none;
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transition for background, color, transform, and shadow */
}
li a[aria-current="page"], li a:hover {
    background-color: white;
    color: midnightblue;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for active link */
}

li a:hover {
    transform: translateY(-4px); /* Slight lift on hover */
}

li a:active {
    transform: translateY(0); /* Return to original position on click */
    background-color: lightblue; /* Slightly different color on click */
}
/*Keyboard Focus Styles */
li a:focus-visible {
    background-color: white;
    color: midnightblue;
    outline: 2px solid black; /* Visible focus outline */
}

/* Skip Link Styles */
.skip-link {
  position: absolute;
  font-size: 24px;
  left: 0;
  top: 0;
  transform: translateY(-100%); /* Hide the link off-screen */
  overflow: hidden;
  background: rgb(163, 186, 210);
  color: midnightblue; 
  padding: 24px; 
  transition: transform 0.3s; /* Smooth transition */
}

/* Reveal the skip link when it receives keyboard focus */
.skip-link:focus-visible {
  transform: translateY(0); /* Bring the link into view */
  overflow: visible;
  z-index: 1000; /* Ensures it appears on top */
}

/* Main Content Styles */

html {
  scroll-padding-top: 123px; /* Adjust based on header height */
  scroll-behavior: smooth; /* Optional: for smooth scrolling */
}

main {
    padding: 0;
    margin: 20px auto;
    width: 100%;
}

main p, main h2 {
    margin: 0 auto;
    text-align: center;
    max-width: 66ch; /* Optimal line length for readability */
}

/* Headshot Section Styles */
#headshot figure {
    float: left;
    width: 100%;
}
#headshot figure img {
    padding: 0;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    width: 300px;
    text-align: center;
}

/* About Section Styles */
#about p {
  max-width: 700px;
  line-height: 1.6;
  margin: 0 auto 1.2em auto;
  color: rgb(163, 186, 210);
}

#about strong {
  color: midnightblue;
  font-weight: 600;
}


/* Projects Section Styles */
#projects ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align: center;

}

#projects ul li {
    display: inline-block;
    margin: 2%;
    padding: 10% 5%;
    background-color: rgb(163, 186, 210);
    border-radius: 20px;
}