@import "color-scheme.css";
@import "border.css";
@import "colors.css";
@import "shared-colors.css";
@import "semantic-colors.css";
@import "curves.css";
@import "spacing.css";
@import "status-colors.css";
@import "typography.css";

html, body {
    color-scheme: var(--color-scheme);
    background-color: var(--default-background-color);
    color: var(--default-foreground-color);
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
}

.display {
    font-family: var(--font-family-base);
    font-weight: var(--typography-display-font-weight);
    font-size: var(--typography-display-font-size);
    line-height: var(--typography-display-line-height);
}

.large-title {
    font-family: var(--font-family-base);
    font-weight: var(--typography-large-title-font-weight);
    font-size: var(--typography-large-title-font-size);
    line-height: var(--typography-large-title-line-height);
}

.title1 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-title1-font-weight);
    font-size: var(--typography-title1-font-size);
    line-height: var(--typography-title1-line-height);
}

.title2 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-title2-font-weight);
    font-size: var(--typography-title2-font-size);
    line-height: var(--typography-title2-line-height);
}

.title3 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-title3-font-weight);
    font-size: var(--typography-title3-font-size);
    line-height: var(--typography-title3-line-height);
}

.subtitle1 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-subtitle1-font-weight);
    font-size: var(--typography-subtitle1-font-size);
    line-height: var(--typography-subtitle1-line-height);
}

.subtitle2-stronger {
    font-family: var(--font-family-base);
    font-weight: var(--typography-subtitle2-stronger-font-weight);
    font-size: var(--typography-subtitle2-stronger-font-size);
    line-height: var(--typography-subtitle2-stronger-line-height);
}

.subtitle2 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-subtitle2-font-weight);
    font-size: var(--typography-subtitle2-font-size);
    line-height: var(--typography-subtitle2-line-height);
}

.body1-stronger {
    font-family: var(--font-family-base);
    font-weight: var(--typography-body1-stronger-font-weight);
    font-size: var(--typography-body1-stronger-font-size);
    line-height: var(--typography-body1-stronger-line-height);
}

.body1-strong {
    font-family: var(--font-family-base);
    font-weight: var(--typography-body1-strong-font-weight);
    font-size: var(--typography-body1-strong-font-size);
    line-height: var(--typography-body1-strong-line-height);
}

.body1, p, div, a {
    font-family: var(--font-family-base);
    font-weight: var(--typography-body1-font-weight);
    font-size: var(--typography-body1-font-size);
    line-height: var(--typography-body1-line-height);
}

.caption1-strong {
    font-family: var(--font-family-base);
    font-weight: var(--typography-caption1-strong-font-weight);
    font-size: var(--typography-caption1-strong-font-size);
    line-height: var(--typography-caption1-strong-line-height);
}

.caption1 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-caption1-font-weight);
    font-size: var(--typography-caption1-font-size);
    line-height: var(--typography-caption1-line-height);
}

.caption2-strong {
    font-family: var(--font-family-base);
    font-weight: var(--typography-caption2-strong-font-weight);
    font-size: var(--typography-caption2-strong-font-size);
    line-height: var(--typography-caption2-strong-line-height);
}

.caption2 {
    font-family: var(--font-family-base);
    font-weight: var(--typography-caption2-font-weight);
    font-size: var(--typography-caption2-font-size);
    line-height: var(--typography-caption2-line-height);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    margin-block-start: 0.8em;
    margin-block-end: 0.8em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

code {
    font-family: var(--font-family-monospace);
}

a, a:visited {
    color: var(--link-foreground-color);
    text-decoration: none;
}

    a:hover {
        color: var(--link-foreground-color-hover);
    }

.site {
    margin: 8px;
}


@property --border-gradient-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

.border-spin {
    --outer-radius: 4px;
    --border-size: 1px;
    --inner-radius: calc(var(--outer-radius) - var(--border-size));
    --runtime: #73ED73;
    background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, var(--runtime) 16%, transparent 20%);
    border-radius: var(--outer-radius);
    background-size: contain;
    padding: var(--border-size);
    animation: buttonBorderSpin 9s infinite linear;
    max-width: 100%;
}

@keyframes buttonBorderSpin {
    0% {
        --border-gradient-angle: 0turn;
    }

    100% {
        --border-gradient-angle: 1turn;
    }
}