/* CompactCool global element defaults. */

html {
    min-height: 100%;
    background: var(--cc-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--cc-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
}

a {
    color: var(--cc-primary);
    text-decoration: none;
}

a:hover {
    color: var(--cc-primary-hover);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
}

code,
pre,
kbd,
samp {
    font-family: var(--cc-font-mono);
}

::selection {
    color: #ffffff;
    background: var(--cc-primary);
}

:focus-visible {
    outline: 0;
    box-shadow: var(--cc-focus-ring);
}

.text-muted,
small,
.form-text,
.helper,
.muted {
    color: var(--cc-muted-strong) !important;
}

hr {
    border-color: var(--cc-border);
    opacity: 1;
}