/* Только reset и сетка, чтобы страница не разъезжалась.
   Оформление — в отдельном файле, этот не трогаем. */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, ol, dl, dd, figure {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.section { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 1rem; }

.nav__list, .skills__list, .project-card__stack, .project-card__links,
.note-card__tags, .entry__links, .footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.projects__featured, .projects__rest, .notes, .skills {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.header__identity { display: flex; align-items: center; gap: 1rem; }
.header__avatar { width: 6rem; height: 6rem; }

.entry { display: flex; flex-direction: column; gap: 1rem; }
.entry__body > * + * { margin-top: 1rem; }