scrapbook.css

:root {
    color-scheme: light dark;
    --fonts-body: "Baloo 2",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --fonts-display: "Shrikhand",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --fonts-mono: "SF Mono","Roboto Mono",Menlo,Consolas,monospace;
    --colors-darker: #151613;
    --colors-dark: #20201d;
    --colors-darkless: #2b2b27;
    --colors-black: #b5b5b5;
    --colors-slate: #3b413a;
    --colors-muted: #e6e6e6;
    --colors-smoke: #d5d8d5;
    --colors-snow: #f5f5f4;
    --colors-white: #fff;
    --colors-pink: #ff62dc;
    --colors-orange: #ff5b00;
    --colors-yellow: #ec3750;
    --colors-green: #28ff00;
    --colors-cyan: #a5ffff;
    --colors-blue: #00a4ff;
    --colors-purple: #c210ff;
    --colors-red: #ec3750;
    --colors-text: #e6e6e6;
    --colors-background: #006aa5;
    --colors-sheet: var(--colors-white);
    --colors-elevated: #003c5f;
    --colors-sunken: #000000;
    --colors-progress: var(--colors-red);
}

body {
  background-color: var(--colors-background);
  background-image:url("https://www.transparenttextures.com/patterns/az-subtle.png")
}


.nav-link {
  color: #e6e6e6;
}

.header-streak {
  padding:0;
  margin-bottom:0.5rem
}

.badge {
     background-color: var(--colors-yellow);
    color: #e6e6e6;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    width: 135px;
}
.header-title-name {
    margin: 0;
    flex: 1 1 auto;
    font-size: 48px;
    line-height: 1;
    word-break: break-all;
    word-wrap: break-word;
    visibility: hidden;
    position: relative;
}

.header-title-name:before {
    visibility: visible;
    content: "Sarthak Dayal";
    position: absolute;
}

.posts {
    display: grid;
    grid-gap: 1px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--colors-sunken);
    color: var(--colors-smoke);
}

.post-header>.post-header-date {
    margin-left: 0;
    color: var(--colors-snow);
    font-size: 18px;
    font-weight: 700;
}

.post {
    padding: 16px;
    background-color: var(--colors-elevated);
    position: relative;
    width: 100%;
}