:root { --background: hsla(290, 6%, 8%, 1); --text: hsla(18, 87%, 97%, 1); --text-faded: hsla(18, 87%, 97%, 0.75); --accent: hsla(14, 87%, 53%, 1); --accent-secondary: hsl(16, 88%, 66%, 1); }

html { font: 300 21px/1.3 'Bitter', serif; scroll-snap-type: y proximity; scroll-padding-top: 2rem; overflow-y: scroll; height: 100vh; }

body { background: var(--background); color: var(--text); text-rendering: optimizeLegibility; }

.container { margin: 1rem; }

@media (min-width: 30rem) { .container { margin: 2rem 3rem 5rem 2rem; } }

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

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

@keyframes accent-animate { from { color: var(--text-faded); }
  to { color: var(--accent); } }

header { margin-bottom: 2rem; text-align: center; }

header h1 { margin-bottom: 0; line-height: 1; font-weight: 900; font-size: 3.5rem; letter-spacing: -0.04em; text-transform: uppercase; }

header h1 a { text-decoration: none; animation: 3s accent-animate; }

header h1 a:hover { color: var(--text-faded); }

header h2 { font-size: 1.11rem; font-weight: 700; text-transform: uppercase; line-height: 1; }

header h2 span { margin: 0 -0.35em 0 0; }

header h2 .second { font-size: 0.79rem; }

header nav > a { font: 900 1.3rem/1 'Work Sans', sans-serif; text-transform: uppercase; text-align: center; }

@media (min-width: 47rem) { header nav { display: flex; justify-content: center; align-items: baseline; } header nav .about { order: 1; } header nav .logo { order: 2; flex-basis: 15rem; } header nav .contact { order: 3; } }

.home article { margin-bottom: 4rem; }

.home article time, .home article p.subtitle { margin-bottom: 1rem; }

.home article a:has(> .thumb) { display: block; position: relative; overflow: hidden; }

.home article .thumb { transition: all 0.5s ease-out; }

.home article .thumb:hover { opacity: 0.5; transform: scale(1.33); }

@media (min-width: 35rem) { .home { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 4rem 2rem; } .home article { margin-bottom: 0; } .home article:nth-child(2n + 1) { grid-column: 1 / 7; } .home article:nth-child(2n) { grid-column: 7 / 13; } }

@media (min-width: 62rem) { .home article:nth-child(3n + 1) { grid-column: 1 / 5; } .home article:nth-child(3n + 2) { grid-column: 5 / 9; } .home article:nth-child(3n) { grid-column: 9 / 13; } }

h1, h2, h3, h4, h5, h6 { font-family: 'Work Sans'; font-weight: 900; line-height: 1.1; margin-bottom: 1rem; text-transform: uppercase; }

article h1 { margin-bottom: 0; font-size: 1.5rem; }

article .post-date { margin-bottom: 1rem; }

article time { text-transform: uppercase; font-size: 0.8rem; color: var(--text-faded); }

article p, article li { margin-bottom: 0.8rem; }

article .left { width: 33%; float: left; margin-right: 1em; margin-bottom: 1em; }

article .right { width: 33%; float: right; margin-left: 1em; margin-bottom: 1em; }

article.page { max-width: 30em; }

article.page h1 { margin-bottom: 1rem; }

hr { width: 66%; margin: 2rem auto; border: 1px solid var(--text); border-width: 1px 0 0 0; }

.single p { width: 100%; max-width: 30em; }

.single p:has(+ figure) { scroll-snap-align: start; }

figure { max-width: 100%; margin: 2rem 0; scroll-snap-align: start; }

figure.portrait picture { max-width: 500px; }

figure figcaption { margin-top: 0.5rem; font-style: italic; font-size: 0.9rem; max-width: 32em; }

@media (min-width: 80rem) { figure { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 4rem 1rem; } figure picture { order: 2; grid-column: 4 / 13; } figure picture img { border-radius: 14px; } figure.portrait picture { grid-column: 4 / 9; } figure figcaption { order: 1; grid-column: 1 / 4; margin-top: 0; } }

footer { margin-top: 4rem; font-size: 1rem; }

/*# sourceMappingURL=main.css.map */