/* header */
main a:hover:not(.cute-button) {
    color: blue;
    text-decoration: none;
    background-color: skyblue;
    border-radius: 0.09rem;
}
header {
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header > .site-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    text-align: right;
    margin: 0;
    padding: 0;
}

header a,
header a:visited {
    color: inherit;
    text-decoration: none;
}

header a:hover {
    transition-property:
        color, background-color, border-color, text-decoration-color, fill,
        stroke;
    color: #df9293;
    transition-timing-function: ease-in;
    transition-duration: 250ms;
}

@media (max-width: 560px) {
    header > .site-links {
        flex-direction: column;
    }
}
header > .site-links > li {
    margin-right: 0.75rem;
}

h2 {
    font-weight: 500;
}

/* end header */

body {
    margin: 16px auto;
    width: 63%;
    font-size: 18px; /* 16px */
    line-height: 1.5;
    word-break: break-word;
    font-family:
        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;
}

@media (max-width: 860px) {
    body {
        width: 90%;
        font-size: 16px;
    }
}

pre code.src {
    padding-top: 0 !important;
    padding-bottom: 0em !important;
}

/* i don't know */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.org-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

figure figcaption {
    text-align: center;
}

img {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

figure {
    margin-left: 0.15em;
    margin-right: 0.15em;
}

/* stolen from aquabeam.me */
kbd {
    background-color: rgb(226, 232, 240);
    padding: 0.1rem 0.2rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;

    text-indent: 0;
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid black;
}

td {
    vertical-align: baseline;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
}

code {
    color: #242679;
}

div.alert {
    background-color: #fee1fc;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.375rem;
    position: relative;
    clear: both;
}
/* .alert > * { */
/*     margin: 0; */
/* } */
div.alert::before {
    content: "!";
    color: var(--back-white);
    background: rgba(220, 117, 47, 0.8);
    align-items: flex-end;
    top: -1rem;
    font-weight: 700;
    font-size: 1.4rem;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    position: absolute;
    left: -1.2rem;
    line-height: 1.1;
    text-align: center;
}

div.info::before {
    content: "i";
    color: var(--back-white);
    background: rgba(58, 129, 195, 0.8);
    align-items: flex-end;
    top: -1rem;
    font-weight: 700;
    font-size: 1.4rem;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    position: absolute;
    left: -1.2rem;
    line-height: 1.3;
    text-align: center;
}

div.info {
    background: rgba(58, 129, 195, 0.15);
    border-left: 4px solid rgba(58, 129, 195, 0.45);
    margin: 1.8rem 0 1.25rem 15px;
    padding: 0.8em;
    line-height: 1.4;
    text-align: center;
    position: relative;
    clear: both;
}

article {
    margin-bottom: 25px;
}

article date {
    font-size: 1.5rem;
    height: 1rem;
    display: block;
    font-weight: 350;
}

article h1 {
    font-size: 2.5rem;
    margin: 1.5rem 0 0;
    line-height: 3rem;
    color: maroon;
}

article h2 {
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5rem;
    margin: 1.5rem 0 0;
    color: black;
}

article a {
    display: block;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    margin: auto;
    color: #924444;
}

.cute-button {
    align-items: center;
    background-color: #fee6e3;
    border: 2px solid #111;
    border-radius: 8px;
    box-sizing: border-box;
    color: #111;
    cursor: pointer;
    display: flex;
    font-family: Inter, sans-serif;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    line-height: 24px;
    max-width: 100%;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.cute-button:after {
    background-color: #111;
    border-radius: 8px;
    content: "";
    display: block;
    height: 48px;
    left: 0;
    width: 100%;
    position: absolute;
    top: -2px;
    transform: translate(8px, 8px);
    transition: transform 0.2s ease-out;
    z-index: -1;
}

.cute-button:hover:after {
    transform: translate(0, 0);
}

.cute-button:active {
    background-color: #ffdeda;
    outline: 0;
}

.cute-button:hover {
    outline: 0;
}

@media (min-width: 768px) {
    .cute-button {
        padding: 0 40px;
    }
}

nav h2 {
    margin: 0;
}

/* nav::after { */
/*     content: ""; */
/*     flex: 1; */
/*     margin-left: 1rem; */
/*     height: 10px; */
/*     background-color: #000; */
/* } */
nav ul {
    list-style-type: none;
    padding-left: 1.5em;
}
nav > div > ul {
    padding-left: 0;
}

nav > div > ul > li > ul {
    padding-left: 0;
}
#text-table-of-contents a {
    /* text-decoration: none; */
    color: inherit;
}