@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Segoe UI Emoji, Segoe UI Symbol, Apple Color Emoji, Roboto, Helvetica, Arial, sans-serif; */
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-optical-sizing: auto;
    --text-padding-bottom: 0em;
    --icons-translate: 0.15em;

    --pill-color: #e2922a;
    --pill-text: black;
}

html {height: 100%;}
body {
    min-height: 100%;
}

@keyframes FadeIn {
    0% {
        opacity: 0;
        translate: -3em 0;
        // transform: perspective(100cm) rotateY(-90deg);
    }
    
    100% {
        opacity: 1;
        translate: 0em 0;
    }
}

@keyframes FadeOut {
    0% {
        opacity: 1;
        translate: 0em 0;
    }

    100% {
        opacity: 0;
        translate: 3em 0;
        // transform: perspective(100cm) rotateY(90deg);
    }
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    &.htmx-swapping /* :is(#content, header) */ {
        // transform-origin: right;
        // perspective-origin: left;
        animation: FadeOut 250ms cubic-bezier(1, 0, 1, 1);
        animation-fill-mode: both;
    }
    &.htmx-settling /* :is(#content, header) */ {
        // transform-origin: left;
        // perspective-origin: right;
        animation: FadeIn 250ms cubic-bezier(0, 0, 0, 1);
        animation-fill-mode: both;
        // animation-delay: 250ms;
    }
}

section + section {
    margin-top: 3em;
}

a[target="_blank"]:not(.title)::after {
    content: '↗️';
    font-size: x-small;
    display: inline-block;
    margin-left: 0.25em;
}

code {
    color: #6e0b0b;
}

a {
    color: #6e0b0b;
    text-decoration: none;

    &:hover {
        color: #8e0404;
        text-decoration: underline;
    }
    &:visited {
        color: #581414;
        &:hover {
            color: #8e0404;
            text-decoration: underline;
        }
    }
}

h1,
h2 {
    font-weight: 200;
    text-align: center;
}

h2 {
    border-bottom: 1px solid #ccc;
}

h3,
h4,
h5,
h6 {
    font-weight: bold;
    text-align: center;
    margin-block-end: 0.5em;
}

.icon {
    translate: 0 var(--icons-translate);
    vertical-align: baseline;

    /* margin-right: 0.25em; */
    width: 1em;
    height: 1em;

    &:not(:only-child:last-child) {
        margin-right: 0.25em;
    }

    &.big {
        width: 1.5em;
        height: 1.5em;
        translate: 0 calc(var(--icons-translate) * 2);
    }
}

.has-icon :not(.icon) {
    padding-bottom: var(--text-padding-bottom);
}

button.has-icon {
    background: none;
	color: inherit;
	border: none;
	padding: 0.1em 0.5em;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

button.icon-only {
    background: none;
	color: inherit;
	border: none;
	padding: 0.1em 0.2em;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    text-align: center;
    align-items: center;
}

.thin {
    font-weight: 100;
}

.bold {
    font-weight: bold;
}

.black {
    font-weight: 1000;
}

body>header {
    max-width: 1200px;
    // width: calc(100% / 3 * 2);
    margin: 0 auto;
    display: flex;
    justify-content: end;
    gap: 0.5em;
    padding: 8px;

    a {
        color: black;
    }
}

#content {
    max-width: 1200px;
    width: calc(100% / 3 * 2);
    margin: 0 auto;
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;

    & > :is(:first-child, :last-child) {
        flex: 1;
        transition: flex 500ms ease-in-out;
    }
}

#splash {
    margin: 0 auto;
    height: 300px;
    width: 351px;
    display: block;
}

input[type="submit"], button {
    cursor: pointer;
}

label {
    cursor: pointer;
}

.pill {
    border-radius: 0.75em;
    background-color: var(--pill-color);
    color: var(--pill-text);
    padding: 0 0.25em;
    font-size: smaller;
    border: 1px solid var(--pill-color);

    +.pill {
        margin-left: 0.5em;
    }
}

.pill-left {
    border-radius: 0.5em 0 0 0.5em;
    background-color: var(--pill-color);
    padding-left: 0.25em;
    font-size: smaller;
    border: 1px solid var(--pill-color);
    padding: 0 0.25em 0 0.5em;
}

.pill-right {
    border-radius: 0 0.5em 0.5em 0;
    background-color: var(--pill-color);
    padding-right: 0.25em;
    font-size: smaller;
    border: 1px solid var(--pill-color);
    padding: 0 0.5em 0 0.25em;

    +.pill {
        margin-left: 0.5em;
    }
}

.pill-hollow {
    color: initial;
    background-color: white;
}

// a:hover.trunc::after, a:hover .trunc::after {
//     text-decoration: none;
// }

.trunc::after {
    content: '…';
    font-size: smaller;
    background: #ddd;
    color: black;
    border-radius: 0.25em;
    padding: 0 0.25em;
    margin-left: 0.25em;
    display: inline-block;
}

blockquote {
    border-left: 0.5ex solid lightgrey;
    color: #555;
}

dialog {
    min-width: 500px;
    max-height: 90vh;
    text-align: center;
    &::backdrop {
        backdrop-filter: saturate(25%) brightness(50%);
    }

    h1, h2, h3,
    h4,
    h5,
    h6 {
        font-weight: 800;
        text-align: inherit;
    }
    h1, h2, h3 {border-bottom: 1px solid #ccc;}

    h1 { font-size: 1.5em; }
    h2, h3, h4, h5, h6 { font-size: 1em; font-variant: small-caps; }
}

.whats-this {
    font-size: smaller;
    cursor: help;

    a {
        cursor: inherit;
    }
}

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator {
    display:block;
}
.htmx-request.htmx-indicator{
    display:block;
}

.slight {
    color: #555;
}

.icon.fade, button.fade .icon {
    opacity: 0.5;
    transition: opacity 250ms ease-in-out;
    &:hover {
        opacity: 1;
    }
}

.mgreen {
    color: #86b42b;
}

.morange {
    color: #ac6218;
}
