/* 
Snow HEX FFFBFF RGB 255, 251, 255
Almond Cream HEX F1DABF RGB 241, 218, 191
Taupe HEX 92817A RGB 146, 129, 122
Dark Coffee HEX 362417 RGB 54, 36, 23
Black HEX 000500 RGB 0, 5, 0
*/

/*Font: https://rsms.me/inter/ */

body {
  font-family: "Inter", sans-serif;
  background-color: #f1dabf;
}

.headings {
  text-align: center;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 7%;
}

header nav a {
  text-decoration: none;
  flex: 1;
  padding: 0.5rem 0;
  text-align: center;
  color: #000500;
}

header nav a + a {
  border-left: 1px solid #362417;
}

header nav a,
header nav a:visited {
  color: #362417;
}

header nav a:hover,
header nav a:focus-visible {
  text-decoration: underline;
}

h1 {
  font-family: "Inter ExtraBold", sans-serif;
  font-size: 10vw;
  padding-bottom: 0;
  margin-bottom: 0;
  color: #362417;
}

h2 {
  font-family: "Inter ExtraBold", sans-serif;
  font-size: 32px;
  padding-top: 0;
  margin-top: 0;
  color: #362417;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
  background-color: #92817a;
}

.logo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  max-width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 2rem;
  border: 2px solid #000500;
  border-radius: 50%;
  background-color: transparent;
}

.logo-circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

footer {
  padding: 1rem 0;
  background-color: #f1dabf;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.8rem;
  color: #362417;
}

footer nav a,
footer nav a:visited {
  color: #362417;
}

/* SKILLS PAGE */

.skills-page {
  padding: 3rem 1rem;
  background-color: #fffbff;
}

.skills-content {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}

.skills-content h1 {
  margin-top: 0;
  font-size: 3rem;
}

.skill-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.skill-item {
  padding: 1.25rem 0;
  border-top: 1px solid #92817a;
}

.skill-item:last-child {
  border-bottom: 1px solid #92817a;
}

.skill-item h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.skill-item p {
  margin: 0;
  color: #362417;
}

/* PROJECTS PAGE */

.projects-page {
  padding: 3rem 1rem;
  background-color: #fffbff;
}

.projects-content {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
}

.projects-content h1 {
  margin-top: 0;
  font-size: 3rem;
}

.project-list {
  display: flex;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.project-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 14rem;
  box-sizing: border-box;
  padding: 1.5rem;
  border: 2px solid #362417;
  background-color: #f1dabf;
}

.project-card h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.project-card p {
  margin: 0 0 1.5rem;
  color: #362417;
}

.project-card a {
  margin-top: auto;
  color: #362417;
}

@media (max-width: 700px) {
  .project-list {
    flex-direction: column;
  }
}

/* ABOUT PAGE */

.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1rem 2rem;
}

.about-content {
  width: 100%;
  max-width: 38rem;
  box-sizing: border-box;
  padding: 2rem;
  border: 3px solid #362417;
  background-color: #fffbff;
  text-align: center;
}

.about-content h1 {
  margin-top: 0;
  font-size: 3rem;
}

.about-content p {
  margin-bottom: 0;
}

.degrees-content {
  background-color: #fffbff;
}

.degrees-content h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.current-degree-label {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  font-style: italic;
  text-align: left;
}

.degrees-list {
  margin: 0;
  padding-left: 1.25rem;
  text-align: left;
}

.degrees-list li + li {
  margin-top: 0.75rem;
}

/* CONTACT PAGE*/

.contact-page {
  padding: 4rem 7% 6rem;
  background-color: #fffbff;
}

.contact-content {
  max-width: 38rem;
  margin: 0 auto;
}

.contact-eyebrow {
  margin: 0 0 1rem;
  color: #362417;
  font-size: 0.75rem;
  font-weight: 600;
}

.contact-content h1 {
  max-width: 12ch;
  margin: 0;
  font-size: 3rem;
  line-height: 1;
}

.contact-details {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-detail {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #d7ddde;
}

.contact-label {
  width: 9rem;
  flex-shrink: 0;
  color: #362417;
  font-size: 0.875rem;
  font-weight: 600;
}

.contact-detail span:last-child {
  overflow-wrap: anywhere;
}