/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/* Reset */

*,
::after,
::before,
::backdrop,
::file-selector-button {
  margin: 0;
  padding: 0;
}

/* General */

:root {
  --color-accent: #F0B969;

  color-scheme: light dark;

  --color-background: #FFFFFF;
  --color-foreground: #3C2319;
  --color-foreground-full: #000000;
  --color-surface: #F2EDE5;
  --color-link: #876533;
  --color-link-hover: #6E532A;
  --color-code-background: #D5D1CA;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #272725;
    --color-foreground: #F2EDE5;
    --color-foreground-full: #FFFFFF;
    --color-surface: #434340;
    --color-link: #F4E3C9;
    --color-link-hover: #D8C8B1;
    --color-code-background: #272725;
  }
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.25;
  margin: auto;
  padding-inline: 1rem;
  max-width: 1280px;
}

h1,
h2,
h3 {
  font-weight: 500;
}

h1,
h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

h1 a,
h2 a,
h3 a {
  color: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover {
  color: inherit;
}

code {
  font-family: "Fragment Mono", 'Courier New', Courier, monospace;
  font-size: 0.95em;
  background: var(--color-code-background);
  padding: 0 0.125em;
  border-radius: 0.25em;
}

/* Header and Nav */

header {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* header nav ul li:not(:first-child)::before {
  content: "•";
  opacity: 50%;
  margin-right: 1rem;
} */

@media (max-width: 22rem) {
  header {
    flex-direction: column;
    justify-content: center;
  }
}

/* About/Splash Section */

#about {
  min-height: calc(100vh - 4rem);
  padding-block: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

#about .profile img {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
}

#about .intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#about .intro .social-icons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

#about .intro .social-icons svg {
  display: block;
  width: 2rem;
  height: 2rem;
  fill: var(--color-foreground);
}

#about .intro .social-icons svg:hover {
  opacity: 90%;
}

@media (max-width: 50rem) {
  #about {
    flex-direction: column;
    gap: 1rem;
  }

  #about .profile img {
    width: 13rem;
    height: 13rem;
  }

  #about .intro {
    align-items: center;
  }
}

/* Content Section(s) */

section:not(#about) {
  border-top: 1px solid var(--color-foreground);
  margin-top: 1px;
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

article {
  background-color: var(--color-surface);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

article .extra-content {
  border-top: 1px solid var(--color-background);
  padding-top: 1rem;
  display: none;
}

article.expanded .extra-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

article .show-more-btn {
  background: none;
  border: none;
  display: inline-block;
  width: fit-content;
  font: inherit;
  font-style: italic;
  color: var(--color-link);
  cursor: pointer;
}

article .show-more-btn:hover {
  color: var(--color-link-hover);
}

/* Footer */

footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 1rem;
}