@import url('../assets/fonts/fonts.css');
:root { --black: #080b0a; --graphite: #141a17; --green: #15d66b; --gray: #a3ada8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: #fff; font: 400 1.0625rem/1.65 "Switzer", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
header, main, footer { max-width: 780px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
header { display: flex; justify-content: space-between; align-items: center; height: 80px; }
header a { color: #fff; text-decoration: none; font: 600 1.2rem "Clash Display", Arial, sans-serif; }
header a + a { font: 500 .95rem "Switzer", Arial, sans-serif; color: var(--green); }
h1 { font: 600 clamp(2.4rem, 6vw, 4rem)/1 "Clash Display", Arial, sans-serif; letter-spacing: -.025em; margin: 40px 0 20px; }
h2 { font: 600 1.45rem/1.2 "Clash Display", Arial, sans-serif; margin: 2.2rem 0 .6rem; }
p, li { margin: 0 0 .8rem; color: #dfe5e2; }
a { color: var(--green); }
.todo { background: rgb(255 196 0 / .16); color: #f3d98a; padding: 0 .3em; border-radius: 4px; }
.box { background: var(--graphite); padding: 1rem 1.2rem; border-radius: 14px; margin: 1.4rem 0; }
footer { padding-top: 40px; padding-bottom: 60px; color: var(--gray); font-size: .95rem; }
footer a { color: var(--gray); }