@import url(_spacing.css);
@import url(_layout.css);

* { box-sizing: border-box; }

html, body {
    background: var(--bg, black);
    color: var(--text, white);
    line-height: var(--line-height, normal);
    font-family: var(--font, sans-serif);
    margin: 0; padding: 0;
}

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

iframe {
    border: none;
    background: transparent;
}

.primary {
    color: var(--primary, gray);
    &.inverse {
        background: var(--primary, gray);
        color: var(--bg, black);
    }
}

.flex-row { display: flex; flex-direction: row; }
.nowrap { flex-wrap: nowrap; }
.align-center { align-items: center; }
.space-between { justify-content: space-between; }

.breadcrumb {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: start;
    &>*:not(:first-child):before {
        content: "⏵";
        position: relative;
        left: -2px;
    }
}

.text-large { font-size: 2em; }
.bold { font-weight: bold; }

.pointer { cursor: pointer; user-select: none; }