:root { color-scheme: only light; --text: #111; --muted: rgba(0, 0, 0, 0.4); --line: rgba(0, 0, 0, 0.18); --rule: #f0f0f0; --bg: #fcfcfc; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; padding: 80px 24px; background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: 14px; font-weight: 450; line-height: 20px; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } main { max-width: 550px; margin: 0 auto; } /* Both languages are in the page; show the one matching . */ html[lang="en"] article[lang="ko"], html[lang="ko"] article[lang="en"], html[lang="en"] footer p[lang="ko"], html[lang="ko"] footer p[lang="en"] { display: none; } article[lang="ko"] { line-height: 22px; word-break: keep-all; } header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; } h1 { margin: 0; font-size: inherit; font-weight: 550; line-height: inherit; } p { margin: 0 0 16px; } header p { margin: 0; } .muted { color: var(--muted); } a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; } a:hover { text-decoration-color: var(--text); } .lang-switch { display: none; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 0.15s ease; } .js .lang-switch { display: block; } .lang-switch:hover { color: var(--text); } :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(0, 0, 0, 0.1); } @media (max-width: 600px) { body { padding: 48px 20px; } } /* Games list */ .list { padding-top: 32px; } .list h2 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: inherit; font-weight: inherit; line-height: inherit; } .list ul { margin: 0; padding: 0; list-style: none; } .list a { display: flex; text-decoration: none; } .list .year { flex: 0 0 84px; padding: 10px 0; color: var(--muted); font-variant-numeric: tabular-nums; } .list .row { flex: 1; display: flex; justify-content: space-between; gap: 16px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--rule); } /* Full-width rule between years, title-width rule within a year. */ .list li.new-year .row { border-top: 0; } .list li.new-year + li.new-year, .list li + li.new-year { border-top: 1px solid var(--rule); } .list .tag { flex-shrink: 0; color: var(--muted); transition: color 0.15s ease; } .list ul:hover a:not(:hover) .title { color: var(--muted); } .list .title { transition: color 0.15s ease; } footer { padding-top: 40px; color: var(--muted); font-variant-numeric: tabular-nums; } footer p { margin: 0; } @media (max-width: 600px) { .list .year { flex-basis: 56px; } } /* Entrance: blocks fade up one by one. The "intro" class is set in and removed after load, so switching language doesn't replay it. */ @keyframes enter { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } } @media (prefers-reduced-motion: no-preference) { .intro article > *, .intro footer { animation: enter 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); } .intro article > :nth-child(2) { --i: 1; } .intro article > :nth-child(3) { --i: 2; } .intro article > :nth-child(4) { --i: 3; } .intro article > :nth-child(5) { --i: 4; } .intro article > :nth-child(6) { --i: 5; } .intro article > :nth-child(7) { --i: 6; } .intro article > :nth-child(8) { --i: 7; } .intro footer { --i: 6; } }