/* ===========================================================
   Your site's styles. Change anything here — colors, fonts,
   sizes. Every page on the site uses this one file.
   =========================================================== */

:root {
  --ink: #0f1f2a; /* main text color */
  --muted: #669f9d; /* quieter text */
  --accent: #198c97; /* links and highlights */
  --paper: #fdfdfb; /* page background */
  --line: #ddeced; /* borders */
}

* {
  box-sizing: border-box;
}

/* body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
} */

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* Watercolor wash behind every page. It stays put while you scroll.
   The path is relative to this file, so it works on every page.
   Lower the opacity if text gets hard to read. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("Image/Background-image/watercolor-paper-background-4k.jpg") no-repeat center /
    cover;
  opacity: 0.15;
  pointer-events: none;
}

/* Keeps everything in a readable column in the middle of the page */
header,
main,
footer {
  max-width: 44rem;
  margin: 0 auto;
}

/* --- top navigation ---------------------------------------- */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

header .site-name {
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

header nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1.25rem;
}

header nav a:hover {
  color: var(--accent);
}

/* --- text --------------------------------------------------- */

h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}

.tagline {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 2rem;
}

a {
  color: var(--accent);
}

/* --- about page --------------------------------------------- */

.profile-photo {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--line);
  margin: 0 0 1.5rem;
}

/* --- art galleries on the home page ------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.gallery figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

/* --- the list of links on the projects pages ----------------- */

.card-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.card-list li {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.9rem;
  transition: border-color 0.15s ease;
}

.card-list li:hover {
  border-color: var(--accent);
}

.card-list a {
  display: block;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: inherit;
}

.card-list .title {
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.card-list .description {
  color: var(--muted);
  font-size: 0.95rem;
}

/* --- sketch pages ------------------------------------------- */

.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.back:hover {
  color: var(--ink);
}

canvas {
  max-width: 100%;
}

/* --- footer -------------------------------------------------- */

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}