@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto:wght@400;700&display=swap');
ul {
  position: sticky;
  top: 0;
  list-style-type: none;
  margin-top: 0 auto;
  margin-left: 100px;
  margin-right: 100px;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: #b7d7ed;
}

ul li a {
  display: block;
  color: #13294b;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}

ul li a:hover {
  background-color: #13294b;
  color:#b7d7ed
  
}

h1{
    font-family:'Inter', sans-serif;
    font-size:50px;
    font-weight:bold;
    text-align: left;
    color:#13294b;
    margin-left: 100px;
}

h2{
    font-family:'inter', sans-serif;
    font-weight:500;
    text-align: left;
    margin-left: 100px;
    color:#13294b
}
.image-container {
  display: flex;
  align-items: flex-start;  /* tops line up */
  gap: 30px;
  margin: 0 100px;          /* matches your page margins */
}

/* Left side: UNC photo + About Me */
.left-column {
  flex: 1;                  /* takes all remaining width */
  min-width: 0;
}

.UNC.photo {
  width: 100%;
  height: 300px;
  object-fit: cover;        /* crops instead of squishing */
  display: block;
  border:#b7d7ed solid 5px;
}

.left-column h2 {
  margin-top: 15px;
  margin-left: 0;         /* space between photo and heading */
}

.right-column {
  flex-shrink: 0;
  width: 440px;              /* controls the card AND the new image's width */
}

.profile-card {
  width: 100%;
  box-sizing: border-box;    /* padding stays inside the 440px */
  background-color: #b7d7ed;
  padding: 20px;
}

.profile-photo {
  width: 100%;
  height: auto;
  display: block;
}

.quote {
  margin: 15px 0 0;
  text-align: center;
  color: #13294b;
}
.extra-photo {
  width: 100%;
  height: auto;
  display: block;
}
.profile-card + .profile-card {
  margin-top: 50px;
}
p {
  font-family:'Georgia', serif; /* Sets the font family for paragraphs */
  font-size:17.5px;
  /* Controls spacing between paragraphs */
  margin-bottom: 20px;
  color:#13294b;
  
  /* Improves readability by adjusting space between text lines */
  line-height: 1.6;
  
  /* Sets the alignment (left, right, center, or justify) */
  text-align: justify;
}
.resume-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}