: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);
}

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

.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: repeating-linear-gradient(
    50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
    ),
    repeating-linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
    );
    background-blend-mode: multiply;
}

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;
}

article > :first-child {
    margin-block-start: 0px;
}

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

.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);
}