Something went wrong. Try again.
lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458:root { /* Fonts - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */ --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dc-font-mono: "Geist Mono", monospace; /* Light colors */ --dc-tx-1: #000000; --dc-tx-2: #1a1a1a; --dc-bg-1: #fafafa; --dc-bg-2: #fff; --dc-bg-3: #ebebeb; --dc-lk-1: #0068d6; --dc-lkb-1: #0072f5; --dc-lkb-2: #0062d1; --dc-lkb-tx: #ededed; --dc-ac-1: #8e4ec6; --dc-ac-tx: #ededed; /* Dark colors */ --dc-d-tx-1: #ededed; --dc-d-tx-2: #a1a1a1; --dc-d-bg-1: #000; --dc-d-bg-2: #ffffff0f; --dc-d-bg-3: #ffffff24; --dc-d-lk-1: #52a8ff; --dc-d-lkb-1: #0072f5; --dc-d-lkb-2: #0062d1; --dc-d-lkb-tx: #ededed; --dc-d-ac-1: #8e4ec6; --dc-d-ac-tx: #ededed;}
@media (prefers-color-scheme: dark) { :root { --dc-tx-1: var(--dc-d-tx-1); --dc-tx-2: var(--dc-d-tx-2); --dc-bg-1: var(--dc-d-bg-1); --dc-bg-2: var(--dc-d-bg-2); --dc-bg-3: var(--dc-d-bg-3); --dc-lk-1: var(--dc-d-lk-1); --dc-lkb-1: var(--dc-d-lkb-1); --dc-lkb-2: var(--dc-d-lkb-2); --dc-lkb-tx: var(--dc-d-lkb-tx); --dc-ac-1: var(--dc-d-ac-1); --dc-ac-tx: var(--dc-d-ac-tx); }}
* { margin: 0; padding: 0;}
address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video { margin-bottom: 1rem;}
html,input,select,button { font-family: var(--dc-font-sans);}
body { margin: 0 auto; max-width: 750px; padding: 2rem; border-radius: 4px; overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; background: var(--dc-bg-1); color: var(--dc-tx-2); font-size: 1.03rem; line-height: 1.5;}
::selection { background: var(--dc-ac-1); color: var(--dc-ac-tx);}
h1,h2,h3,h4,h5,h6 { line-height: 1; color: var(--dc-tx-1); padding-top: 0.875rem;}
h1,h2,h3 { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--dc-bg-3);}
h4,h5,h6 { margin-bottom: 0.3rem;}
h1 { font-size: 2.25rem;}
h2 { font-size: 1.85rem;}
h3 { font-size: 1.55rem;}
h4 { font-size: 1.25rem;}
h5 { font-size: 1rem;}
h6 { font-size: 0.875rem;}
a { color: var(--dc-lk-1);}
abbr:hover { cursor: help;}
blockquote { padding: 1.5rem; background: var(--dc-bg-2); border-left: 5px solid var(--dc-bg-3); border-radius: 4px;}
blockquote *:last-child { padding-bottom: 0; margin-bottom: 0;}
header { background: var(--dc-bg-2); border-bottom: 1px solid var(--dc-bg-3); padding: 0.75rem; margin: -2rem calc(50% - 50vw) 2rem; padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
/* Sticky header if supported */ position: sticky; top: 0;
/* Blur for transparent surface if supported */ backdrop-filter: blur(16px);}
/* Make heading text small if header is not moved to the side */@media (max-width: 1451px) { header h1 { font-size: 1.6rem; }
header h2 { font-size: 1.4rem; }
header h3 { font-size: 1.2rem; }
header h4 { font-size: 1rem; }}
/* Move header to the side to preserve vertical space, if screen is minimum width 1452px */@media (min-width: 1452px) { header { width: 260px; height: auto; position: fixed; left: calc(50% - 725px); background: #ffffff00; border-bottom: 0; padding: 2rem 1.5rem; margin: 0;
/* Disable blur */ backdrop-filter: none; }}
header h1,header h2,header h3 { padding-bottom: 0; border-bottom: 0;}
header > *:first-child { margin-top: 0; padding-top: 0;}
header > *:last-child { margin-bottom: 0;}
a button,button,input[type="submit"],input[type="reset"],input[type="button"] { font-size: 1rem; display: inline-block; padding: 6px 12px; text-align: center; text-decoration: none; white-space: nowrap; background: var(--dc-lkb-1); color: var(--dc-lkb-tx); border: 0; border-radius: 4px; box-sizing: border-box; cursor: pointer;}
a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled] { cursor: not-allowed; opacity: 0.5;}
.button:focus,.button:enabled:hover,button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover { background: var(--dc-lkb-2);}
a img { margin-bottom: 0;}
code,pre,kbd,samp { font-family: var(--dc-font-mono);}
code,samp,kbd,pre { background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 4px; padding: 3px 6px; font-size: 0.9em;}
kbd { border-bottom: 3px solid var(--dc-bg-3);}
pre { padding: 1rem 1.4rem; max-width: 100%; overflow: auto;}
pre code { background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0;}
code pre { display: inline; background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0;}
details { padding: 0.6rem 1rem; background: var(--dc-bg-2); border: 1px solid var(--dc-bg-3); border-radius: 4px;}
summary { cursor: pointer; font-weight: bold;}
details[open] { padding-bottom: 0.75rem;}
details[open] summary { margin-bottom: 6px;}
details[open] > *:last-child { margin-bottom: 0;}
dt { font-weight: bold;}
dd::before { content: "→ ";}
hr { border: 0; border-bottom: 1px solid var(--dc-bg-3); margin: 1rem auto;}
fieldset { margin-top: 1rem; padding: 2rem; border: 1px solid var(--dc-bg-3); border-radius: 4px;}
legend { padding: auto 0.5rem;}
table { border-collapse: collapse; width: 100%;}
td,th { border: 1px solid var(--dc-bg-3); text-align: left; padding: 0.5rem;}
th { background: var(--dc-bg-2);}
tr:nth-child(even) { background: var(--dc-bg-2);}
table caption { font-weight: bold; margin-bottom: 0.5rem;}
textarea { max-width: 100%;}
ol,ul { padding-left: 2rem;}
li { margin-top: 0.4rem;}
ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}
mark { padding: 3px 6px; background: var(--dc-ac-1); color: var(--dc-ac-tx); border-radius: 4px;}
textarea,select,input { padding: 6px 12px; margin-bottom: 0.5rem; background: var(--dc-bg-2); color: var(--dc-tx-2); border: 1px solid var(--dc-bg-3); border-radius: 4px; box-shadow: none; box-sizing: border-box;}
img { max-width: 100%;}