html { font-size: 16px; height: 100%; margin: 0; padding: 0; } body { align-items: center; background: #f5f5f5; border-top: 5px solid #1a1a1a; color: #1a1a1a; display: flex; flex-direction: column; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 1rem; min-height: calc(100% - 5px); margin: 0; } header { align-items: center; background: #fff; display: flex; flex-direction: column; height: 14rem; width: 100%; } menu { align-items: center; align-self: stretch; display: flex; flex-direction: row; justify-content: space-between; padding: 1.5rem min(5.5%, 2.5rem) 3rem; margin: 0; } a { color: #1a1a1a; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 150ms ease-in-out; } a:hover { color: #000; text-decoration-color: #000; } nav a { font-size: 1.1rem; line-height: 1.6rem; } h1 { display: flex; font-size: 1.25rem; font-weight: 800; margin: 0; } h1 span { display: flex; font-weight: 300; text-transform: lowercase; gap: 0.5rem; margin-left: 0.5rem; } h1 span::before { color: #aaa; content: '//'; display: block; } form { align-items: stretch; display: flex; justify-content: center; position: relative; width: 90%; } input[type="url"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 1.25rem 50%; border: 0.15rem solid #1a1a1a; border-radius: 2rem; box-shadow: inset 0 0.25rem 0 0 #f0eded; color: #1a1a1a; font-size: 1.25rem; height: 3.6rem; padding: 0 8.5rem 0 3.5rem; transition: box-shadow 150ms ease-in-out; width: 100%; } input[type="url"]:focus { outline: none; box-shadow: inset 0 0.25rem 0 0 #f0eded, 0 0 0 1px #fff, 0 0 0 0.25rem #39b9e4; } button[type="submit"] { background: #fff; border: 0.15rem solid #1a1a1a; border-radius: 0 2rem 2rem 0; box-shadow: inset 0 0.25rem 0 0 #f0eded; color: #1a1a1a; cursor: pointer; height: 100%; font-size: 1.25rem; padding: 0.75rem 2rem 0.8rem 1.75rem; position: absolute; top: 0; transition: background 150ms ease-in-out; right: 0; } button[type="submit"]:hover { background-color: #f0eded; } address { display: flex; align-self: stretch; align-items: center; justify-content: center; font-style: normal; padding: 0.5rem 0; background: #ffdee3; } main { align-items: center; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 4rem; padding-top: 2rem; height: 100%; } article { width: 86%; } aside { max-height: calc(100vh - 16.5rem); overflow: auto; width: 86%; } details { margin-bottom: 0.5rem; padding-left: 0.15rem; } summary { cursor: pointer; } summary:hover { color: #000; } details dl { margin: 0.5rem 0 0; padding-left: 1.1rem; } details dl dt { margin: 0 0 0.5rem; } details dl dt del, details dl dt var { align-items: center; display: inline-flex; flex-direction: row; font-style: normal; } details dl dt del::after, details dl dt var::after { background-repeat: no-repeat; background-size: 1rem 1rem; background-position: 100% 50%; content: ''; display: block; height: 1rem; margin-left: 0.5rem; width: 1rem; } details dl dt del::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E"); } details dl dt var::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E"); } details dl dd { display: none; font-size: 0.875rem; line-height: 1.2rem; margin-left: 0; padding: 0 0 1rem 0.1rem; } details dl dd code { font-size: 0.8rem; } details dl input[type="checkbox"] { display: none; } details dl input[type="checkbox"]:checked + dd { display: block; } details[open] + details { margin-top: 1rem; } code { font-family: Menlo, monospace; font-size: 0.9rem; background: #fff; padding: 0.1rem 0.2rem; border-radius: 0.25rem; white-space: nowrap; } h2 { margin: 0 0 1.5rem; } p { line-height: 1.5rem; } p a { font-weight: 600; } p.final { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-arrow-right'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 0.1rem; font-size: 1.2rem; padding: 0 0 2rem 2rem; word-wrap: anywhere; } h3 { margin: 0 0 1.5rem; } p + h3 { margin-top: 2rem; } table { border-spacing: 0; padding: 0; width: 100%; } th { border-bottom: 2px solid #1a1a1a; color: #4a4a4a; font-size: 0.9rem; padding: 0 1rem 0.75rem; text-transform: uppercase; text-align: left; } td { background-color: #fafafa; border-bottom: 1px solid #1a1a1a; padding: 1rem; vertical-align: top; word-wrap: anywhere; } td:first-child { text-align: center; } td:nth-child(2) { line-height: 1.5rem; padding: 0.8rem 1rem; width: 100%; } td:nth-child(2) a:hover { text-decoration-color: transparent; } td:nth-child(4) { text-align: center; padding-right: 1.5rem; } td b { border: 1px solid #aaa; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0.25rem; color: #555; font-weight: 500; line-height: 1; margin-left: 0.5rem; padding: 0 0.25rem; transition: border-color 150ms ease-in-out, color 150ms ease-in-out; } td b i { display: inline-block; transition: transform 150ms ease-in-out; } td:nth-child(2) a:hover b { border-color: #1a1a1a; color: #1a1a1a; } td:nth-child(2) a:hover b i { transform: rotate(45deg); } tbody tr:nth-child(odd) td { background-color: #fff; } tbody td:last-child { padding-left: 0; width: 1rem; } caption { caption-side: bottom; line-height: 1.5rem; padding: 1rem; text-align: left; } /* laptop */ @media screen and (min-width: 1024px) { menu { padding: 1.5rem 2.5rem 3rem; } h1 { font-size: 1.75rem; } form { width: 75%; } main { align-items: flex-start; flex-direction: row; justify-content: center; gap: 4rem; } article { width: 60%; } aside { width: 20%; } } /* desktop */ @media screen and (min-width: 1440px) { form { width: 66.6666666667%; } article { width: calc(50% - 5rem); } aside{ width: 16.6667%; } }