article { max-width: var(--main-content); margin: 0 auto; line-height: 1.9; } article > * + * { margin-top: 2em; } article img { max-width: 100%; /* width: var(--main-content); */ width: auto; margin: auto; display: block; border-radius: var(--radius); } article [id]::before { content: ""; display: block; height: 70px; margin-top: -70px; visibility: hidden; } /* Lists */ article ul { padding: 0; list-style-position: inside; list-style-type: circle; } article ol { padding: 0; list-style-position: inside; } article ul li.reset { display: flex; align-items: flex-start; list-style-type: none; margin-left: -0.5rem; } article ul li.reset .check { display: flex; align-items: center; margin-right: 0.51rem; } /* Checkbox */ input[type="checkbox"] { vertical-align: middle; appearance: none; display: inline-block; background-origin: border-box; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; background-color: var(--bg); color: var(--fg); border: 1px solid var(--fg); border-radius: 3px; } input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } html[data-theme="light"] input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); } input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 2px var(--gray); border-color: var(--fg); } /* Code Snippets */ .token-line:not(:last-child) { min-height: 1.4rem; } article *:not(pre) > code { font-weight: 500; font-family: var(--font-sans); font-size: 1rem; } article li > p { font-family: var(--font-mono); display: inline-block; } article pre { overflow-x: auto; background: var(--lightest-gray); border-radius: var(--inline-radius); line-height: 1.8; padding: 1rem; font-size: 0.875rem; } /* Linkable Headers */ .header-link { color: inherit; text-decoration: none; } .header-link::after { opacity: 0; content: "#"; margin-left: var(--gap-half); } .header-link:hover::after { opacity: 1; }