@font-face {
    font-family: "lexend";
    src: url("lexend-light.woff2") format("woff2");
    font-weight: normal;
}
@font-face {
    font-family: "lexend";
    src: url("lexend-regular.woff2") format("woff2");
    font-weight: 500 700;
}

@font-face {
    font-family: "fira-code";
    src: url("fira-code-variable.woff2") format("woff2-variations");
    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
    font-weight: 300 700;
}

html, *:not(code, kbd, pre,samp) {
    font-family: lexend !important;
}
html, *:not(code, kbd, pre,samp,td) {
    text-align: left !important;
}
*:not(a) {
    cursor: default;
}
a, a *, button {
    cursor: pointer;
}
  
.card > .section.media {
    background-color: black;
}

code, kbd, pre, samp {
    font-family: "fira-code";
}

p > code, li > code, a > code {
    border: solid 1px var(--border-color);
    font-weight: 300;
    font-size: 0.90rem !important;
    white-space: nowrap;
}

p > .tooltip, li > .tooltip {
    display: inline-block;
    line-height: 1.1rem;
    border-bottom: 1px dotted var(--fore-color);
    cursor: pointer;
}

code:not(.doc), kbd:not(.doc), pre:not(.doc), samp:not(.doc),
pre > .code-line, pre > .code-line > * {
    font-family: "fira-code" !important;
}

blockquote::before {
    font-family: inherit;
}
blockquote {
    border-left-width: .25rem;
}


/* no white between box and arrow all zoom ratio ok */

:root {
    --tooltip-arrow-size: 0.75rem;
    --cc-number-width: 1.10rem;
    --cc-padding-left: 2.5rem;
}
.tooltip::after {
    bottom: var(--tooltip-arrow-size);
}
.tooltip::before {
    border-width: var(--tooltip-arrow-size);
    left: calc(50% - var(--tooltip-arrow-size));
}
.tooltip:not(.bottom)::before {
    bottom: calc(var(--tooltip-arrow-size) +  1px);
}
.tooltip::after {
    font-size: 0.85rem;
}
.tooltip.code::after {
    font-family: fira-code;
}


table.doc.cardized td {
    text-align: right !important;
}

table thead, table tbody {
    /* no horizontal scroll bar */
    box-sizing: border-box; 
}


.collapse > input[type="radio"] + label::after,
.collapse > input[type="checkbox"] + label::after {
    float: right;
    font-size: 1.5rem;
    font-family: 'fira-code';
    content: '\2191';
    content: '+';
    color: var(--collapse-label-fore-color);
    font-weight: 300;
    line-height: 1.5rem;
    opacity: 0.5;
}

.collapse > input[type="radio"]:checked + label::after,
.collapse > input[type="checkbox"]:checked + label::after {
    content: '\2193';
    content: '-';
    /*color: var(--collapse-selected-label-border-color); */
}

/* index */
.index-splash, .index-splash-image {
    height: 65vh;
}
.index-splash-image {
    background-image: url("index-splash.jpg");
}

/* h1.splash, p.splash {
    text-align: center !important;
} */
h1.splash {
    height: auto;
    top: max(5vh, 20px);
    left: 5vw;
    line-height: normal;
    width: auto;
}
p.splash {
    height: auto;
    /* https://stackoverflow.com/questions/15552358/is-there-a-css-min-top-property */
    top: max(15vh, 130px);
    left: 5vw;
    line-height: normal;
    padding: 0;
    width: auto;
}

.primary-section {
    background-color: #dc2b1e;
}
    


.primary-section * {
    color: white !important;
}
.primary-section a {
    font-weight: bold;
}

.primary-section #get-started:hover {
    color: #dc2b1e !important;
    background-color: white;
}

#version-info {
    position: fixed;
    background-color: var(--back-color);
}

#index-page footer a{
    color: #dc2b1e !important;
}

#flavors-page input {
    font-family: fira-code !important;
    font-size: 0.95rem;
}