:root {
    --color-light: #eeddaa;
    --color-dark: #000000;
    --color-shadow: #ccb;
    --border-thin: 0.2rem;
    --color-tag: rgba(240, 150, 0, 0.5);
    color: var(--color-dark);
    font-family: "Arial", sans-serif;
    font-size: var(--s0); /* TODO use something from modular scale */
}

html {
    /* Force visibility of scroll bar. This solves an irritating problem */
    /* where the positioning of content boxes and the background pattern */
    /* seems to "jump" somewhat when moving between a page too short to */
    /* have a scroll bar, and one long enough to have one. */
    overflow-y: scroll;
}

.bordered {
    border-color: var(--color-dark);
    border-width: var(--border-thin);
    border-style: solid;
}


.not-padded {
    padding: 0rem;
}


.box *:not(a):not(.sithlord-name):not(.hayleybloo) {
    /* "By forcing inheritance, you can change the color—along with the background-color—in one place: on the Box itself" */
    /*  https://every-layout.dev/layouts/box/#use-cases */
    /* Also, we exclude links from the inheritance, rather than using "box *", so that link colors override the default text color. */
    color: inherit;
}

.box *.normal-color {
    /* for <a> tags, usually u-* microformats, where I want to de-emphasize that they are a link and restore normal coloration of the text */
    color: var(--color-dark);
}

.box .invert {
    /* Dark becomes light; light becomes dark */
    color: var(--color-light);
    background-color: var(--color-dark);
    border-color: var(--color-light);
}

a {
    text-decoration: none; /* no underlines on links */
    color: #4040e0;
}

a:visited {
    color: #9000c0;
}

code {
    background-color: #d9cec2;
}

figcaption {
    /* same as .bordered */
    /* border-color: var(--color-dark); */
    /* border-width: var(--border-thin); */
    /* border-style: solid; */
    /* same as .muted */
    font-size: var(--s-1);
    font-style: italic;
}

figure {
    /* same as .center */
    box-sizing: content-box;
    margin-inline: auto;
    text-align: center;
    max-inline-size: var(--measure);
    display:flex;
    flex-direction: column;
    align-items: center;
    /* same as .stack */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-block: 0;
    margin-block-start: var(--space, --ratio);
}



blockquote {
    background-color: #eee;
    margin-block: 0;
    margin-block-start: var(--space, --ratio);

    /* /\* /\\* if the fit-content attributes aren't supported *\\/ *\/ */
    /* width: auto; */
    /* /\* /\\*several names for fit-content *\\/ *\/ */
    /* width: -moz-fit-content; */
    /* width: -webkit-fit-content; */
    /* width: -webkit-fill-available; */
    /* width: fit-content; */
}

/* blockquote p { */
/*     padding: 4px; */
/*     /\* prevent first paragraph of blockquote from being indented downward overmuch *\/ */
/*     margin: 0px 4px 1% 4px; */
/* } */


cite {
    font-style: italic;
}

/* cite::before { */
/*     content: "(source: "; */
/* } */


/* cite::after { */
/*     content: ")"; */
/* } */


/* blockquote pre { */
/*     padding: 4px; */
/*     margin: 0px; */
/* } */

.hayleybloo {
    color: cornflowerblue;
}

#logo {
    font-size: var(--s3);
}


pre {
    display: block;
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.poem {
    padding: 4px;
    margin: 4px;
}

.poem-container {
    /* /\* if the fit-content attributes aren't supported *\/ */
    width: auto;
    /* /\*several names for fit-content *\/ */
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -webkit-fill-available;
    width: fit-content;

    background-color: #fbd383;
    border: solid 1px var(--color-shadow);
}

mark {
    background-color: #c7e1eb;
}

.wip, .warn {
    color: #d72638;
}

code {
    background-color: #d9cec2;
}

/* classical chinese in vertical style */
.ccvert {
    writing-mode: vertical-rl;
    text-orientation: upright;
}


.callout {
    border-radius: 0.3em;
    border-top: darkgreen .1em solid;
}

.callout:hover {
    background-color: #22884422;
}

.explain{background-color:#ffb66f;}

s {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.sic {
    font-style: italic;
}

.status.symbol::after {
    content: "";
}

.new-v1::after {
    content: "new";
    font-size: calc(var(--s-3));
    background: #AA0044;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.new::after {
    content: "!";
    font-size: calc(var(--s-2));
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
    color: black;
    border-color: black;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
    --egg-width: calc(var(--s-) * 1.3);
    --egg-height: calc(1.42 * var(--egg-width));
    width: var(--egg-width);
    height: var(--egg-height);
    background-color: #f2c387;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.smallcaps {
    font-style: smallcaps;
}

.internal-1 {
    background-color: #aaE7F2;
}

.internal-2 {
    background-color: #bbF5FF;
}

.internal-3 {
    background-color: #ccF7FF;
}

.internal-4 {
    background-color: #ddF9FF;
}

.bigclick {
    font-size: var(--s1);
}

ul.tight {
    /* margin-top: 0.5rem; */
    /* margin-bottom: 0.5rem; */
    list-style-type: none;
}

/* li + li { */
/*     margin-top: 0.5rem; */
/* } */


/* a:not(.button):not(.linkOnDomain):focus, a:not(.button):not(.linkOnDomain):hover { */
/*     background-color: linear-gradient(to right,red,blue); */
/* } */

.drongo {
    font-style: italic;
}

/* ".brag" styles were for my UCSC admission portfolio */

.brag.tech::after {
    content: "tech";
    font-size: calc(var(--s-3));
    background: #AA0044;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.brag.social::after {
    content: "community";
    font-size: calc(var(--s-3));
    background: orange;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.brag.game::after {
    content: "game";
    font-size: calc(var(--s-3));
    color: white;
    background: magenta;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}


.brag.ling::after {
    content: "ling";
    font-size: calc(var(--s-3));
    background: pink;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}


.brag.media::after {
    content: "media";
    font-size: calc(var(--s-3));
    background: blue;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.brag.pro::after {
    content: "pro";
        font-size: calc(var(--s-3));
    background: green;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}
.brag.hobby::after {
    content: "hobby";
        font-size: calc(var(--s-3));
    background: green;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.brag.vol::after {
    content: "volunteer";
    font-size: calc(var(--s-3));
    background: green;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.brag.chin::after {
    content: "chinese";
    font-size: calc(var(--s-3));
    background: black;
    color: white;
    box-shadow: 0 0 1px black;
    margin: .33em;
    padding: .1em;
}

.emote {
	font-style: italic;
}

.emote::before {
	font-style: italic;
	content: "*";
}

.emote::after {
	font-style: italic;
	content: "*";
}

.proclamation-start {
	text-transform: uppercase;
}

details > summary {
  cursor: pointer;
}

details > summary::after {
  content: " (click to open)";
  /* same as .muted */
  font-size: var(--s-1);
  font-style: italic;
}

details[open] > summary::after {
  content: " (click to close)";
  /* same as .muted */
  font-size: var(--s-1);
  font-style: italic;
}


#mc_embed_signup .button {
	background-color: green;
}

@keyframes pulse {
    /* an example animaton created with @keyframes
    /* https://github.com/jbranchaud/til/blob/master/css/animate-smoothly-between-two-background-colors.md     */
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100% {
        background-color: red;
    }
}

.pulsing {
    animation: pulse 4s infinite;
}

.tilt {
    transition: 0.5s;
}

.tilt:hover {
    transform: rotate(2.5deg);
}

/* things that use italics */

.art-title {
    /* TODO
if I include an .art-title (or .foreign) element inside a .center element
why are there line breaks before and after the .art-title element?
I use .art-title on spans, and spans are inline elements.
   */
    font-style: italic;
}

.muted {
    font-size: var(--s-1);
    font-style: italic;
}

/* Used for foreign words in running text (including English words, if discussing linguistics.) See "Books" for examples.*/
.foreign {
    font-style: italic;
    background-color: pink;
}

em em,
.art-title .art-title,
.foreign .foreign,
.muted .muted,
em .muted,
em .art-title,
em .foreign,
.art-title .muted,
.art-title em,
.art-title .foreign,
.foreign .art-title,
.foreign .muted,
.foreign em,
.muted em,
.muted .art-title,
.muted .foreign {
    font-style: normal;
}

.tag {
    padding: var(--border-thin);
    background-color: var(--color-tag);
    border-radius: var(--s-5);
}

/* Marks a post that was generated rather than written -- a "beat" (issue #94).
   Shaped like a tag, but outlined instead of filled, because it isn't a link.
   currentColor rather than --color-dark so it stays visible inside .invert. */
.badge {
    padding: 0 var(--border-thin);
    border: solid 1px currentColor;
    border-radius: var(--s-5);
    font-size: var(--s-1);
}

h1 {
    font-size: var(--s4);
}

/* The browser's own heading margins are ems of the heading's own font-size, so
   they scale with it -- and for h4-h6, whose default multiplier grows as the
   font shrinks, they invert: an h6 out-spaces an h2. Everything else here is on
   the one fixed rhythm, --space: .stack and .stack-recursive impose it where
   they apply, and a paragraph's 1em default happens to equal it. Put headings
   on it too, for the boxes no stack reaches -- the post body, the homepage, the
   stream pages, the responses container. The stack rules are class selectors,
   so they still win inside a stack and those pages don't move. */
h1, h2, h3, h4, h5, h6 {
    margin-block: 0;
    margin-block-start: var(--space);
}

.sithlord-name {
    background-image: linear-gradient(to bottom, red 50%, black);
    background-size: 100%;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;

}

.sithlord {
    background: linear-gradient(to left, aliceblue, lightgray);
}



body::before {
    /* Use the "before" pseudo-element to set the background colors rather than setting them directly on the body's background attribute itself. This solved an issue where slight differences in layout between pages would cause the background to visibly differ. */
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(lightblue, seagreen);
}

body {
    background: none;
}

header, article, footer {
    background-color: var(--color-light);
}

body {
    /* setting min-height to 100% of the viewport fixes the issue where if
   the homepage isn't as tall as the viewport, then the background for
   the HTML gets tiled twice and looks ugly. */
    min-height: 100vh;
    margin: 0px;
}

/* A box's padding is the space above whatever it opens with, so the first
   child brings no margin of its own. This was once article-only; every box
   needs it now that headings carry a margin -- #webmentions opens with the
   "Responses" heading, and its margin used to land on top of the padding. */
.box > :first-child,
article > :first-child {
    margin-block-start: 0px;
}

.round-corner {
    border-radius: var(--s-5);
}

/* The closing footer lives in base.html, below the .stack that each page's
   content templates open, so it can't get its spacing from that stack and
   brings its own. .center sizes to the measure with content-box, which would
   leave the padding and border hanging outside it; counting them in lines the
   footer up with the content box above rather than out-denting past it. Same
   treatment, same reasons, as #webmentions (see webmention.css). */
#closing {
    box-sizing: border-box;
    margin-block: var(--space);
}

.hidden {
    display: none !important;
}

.wiki-home-link {
    padding: var(--s-5);
    background-color: var(--color-tag);
    display: block;
    transition: border 0.25s;
    text-decoration: none;
}

.wiki-home-link:hover {
    /* font-size: var(--s3); */
    border-color: red;
}

.three-column {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

/* "On this day" (issue #122): other posts sharing this post's calendar day.
   In the normal flow it's another box in the post page's stack, sitting between
   the closing footer and the responses box; on a wide enough screen it moves
   into the margin beside the post (see the media query below). */

:root {
    --sidebar-width: 20ch;
    --sidebar-gap: var(--s0);
}

.sidebar h2 {
    font-size: var(--s1);
    /* .sidebar-inner is a .stack, which spaces the heading from the line under
       it; a bottom margin here would be added to that rather than collapsed
       into it, since stack children are flex items. */
    margin-block: 0;
}

.sidebar ul {
    padding-inline-start: var(--s0);
    margin-block: 0;
}

.sidebar-inner {
    background-color: var(--color-light);
}

/* Wide enough that the margin beside the centred column can hold the box: lift
   it out of the stack and into that margin, leaving the post exactly where it
   was. Below this it stays in the flow, which is the layout above.

   The breakpoint has to be a literal because media queries can't read custom
   properties, and it is derived rather than picked: the column is --measure
   (70ch, ~779px with the border and padding), and the box needs --sidebar-width
   plus its gap in each margin, plus a little clear of the viewport edge. Under
   that the box would hang off the right of the screen. If --measure or
   --sidebar-width changes, this number has to change with it. */
@media (min-width: 1320px) {
    /* .has-sidebar wraps the post and the closing footer, not the whole page:
       it starts at the top of the post, so top: 0 below puts the top of the box
       level with the top of the post rather than with the header above it. */
    .has-sidebar {
        position: relative;
    }

    .has-sidebar > .sidebar {
        position: absolute;
        left: 100%;
        top: 0;
        /* Full height of the wrapper, so the box inside can stick down the
           length of the post rather than only within its own height. */
        height: 100%;
        width: var(--sidebar-width);
        margin-inline-start: var(--sidebar-gap);
        /* .stack spaces its in-flow children; this one is out of flow. */
        margin-block-start: 0;
    }

    .has-sidebar > .sidebar > .sidebar-inner {
        position: sticky;
        top: var(--s-5);
    }
}

/* The books-read-per-year table on /books (issue #123). Figures only read as a
   column if each cell is aligned to its own edge: centred cells drift sideways
   the moment one row is wider than the others, which the rows carrying a note
   ("2015 (incomplete)", "20 so far") always are. */
.year-counts th,
.year-counts td {
  text-align: left;
  padding-right: var(--s1);
}

.year-counts td {
  font-variant-numeric: tabular-nums;
}