@font-face {
    font-family: 'InterDisplay';
    src: url('../fonts/InterDisplay-Regular.woff2?v=4.1');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'InterDisplay';
    src: url('../fonts/InterDisplay-Bold.woff2?v=4.1');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'InterDisplay';
    src: url('../fonts/InterDisplay-Italic.woff2?v=4.1');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'InterDisplay';
    src: url('../fonts/InterDisplay-BoldItalic.woff2?v=4.1');
    font-style: italic;
    font-weight: 700;
}

@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1; /* Alternate one */
        alt-3: 9; /* Flat-top three */
        open-4: 2; /* Open four */
        open-6: 3; /* Open six */
        open-9: 4; /* Open nine */
        lc-l-with-tail: 5; /* Lower-case L with tail */
        simplified-u: 6; /* Simplified u */
        alt-double-s: 7; /* Alternate German double s */
        uc-i-with-serif: 8; /* Upper-case i with serif */
        uc-g-with-spur: 10; /* Capital G with spur */
        single-story-a: 11; /* Single-story a */
        compact-lc-f: 12; /* Compact f */
        compact-lc-t: 13; /* Compact t */
    }
    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: InterDisplay, sans-serif;
    font-feature-settings: 'ss01' 1;
    font-size: 16px;
    background: black;
    display: flex;
    flex-direction: column;
}

* {
    scrollbar-color: rgb(120, 125, 135) transparent;
    scrollbar-width: thin;
}

::highlight(search-results) {
    background-color: #ffde58;
    color: black;
}

a {
    text-decoration: none;
}

#overlay {
    border: none;
    outline: none;
    &::backdrop {
        opacity: 1;
        transition: opacity 0.4s ease;
        backdrop-filter: blur(2px);
        background-color: rgba(125, 130, 135, 0.25);
    }
    @starting-style {
        &::backdrop {
            opacity: 0;
        }
    }
}

/* F.A.Q. */
summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
}

details:hover:not([open]) {
    background-color: rgba(var(--bs-secondary-bg-rgb), 1) !important;
}

details summary::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill:rgb(108, 117, 125)" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1rem;
    transition: transform 0.2s ease;
    transform: translateY(1px);
}

details[open] summary::before {
    transform: rotate(90deg);
}

#btn-yearly:checked + label, #btn-perpetual:checked + label {
    background: #212529EE;
}

#blog-article h3 {
    margin-top: 0;
    margin-bottom: 1.25rem;
}
#blog-article h3:nth-of-type(n + 2) {
    margin-top: 2.5rem;
}

#blog-article p {
    text-align: justify;
    hyphens: auto;
}

/* Bootstrap custom */
.table-transparent td, .table-transparent th {
    background-color: transparent !important;
}

.form-control.is-invalid {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23dc3545" stroke="none" class="bi" viewBox="0 0 16 16"> \
    <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/> \
    <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>');
}

.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23dc3545" stroke="none" class="bi" viewBox="0 0 16 16"> \
    <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/> \
    <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>');
}

.progress-indeterminate > div {
    width: 50%;
    animation-name: progress-indeterminate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes progress-indeterminate {
    from {
        margin-left: -25%;
    }
    50% {
        margin-left: 75%;
    }
    to {
        margin-left: -25%;
    }
}

.badge {
    transform: translateY(-2px);
}

.btn-link {
    text-decoration: none;
}

mark {
    padding: 0 2px;
    background-color: rgba(var(--bs-warning-rgb), 0.75);
}

.form-check-input {
    border-color: var(--bs-secondary);
    width: 0.95rem;
    height: 0.95rem;
    transform: translateY(1px);
}

.form-check-input:checked {
    border-color: var(--bs-primary);
}