@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo/Exo-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo/Exo-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono/JetBrainsMono.ttf') format('truetype');
    font-weight: 100 800; /* Weight range of the variable font (wght axis). */
    font-style: normal;
    font-display: swap;
}

:root {
    /* Replaces Bootstrap's monospace stack, so code, kbd, pre, samp and .font-monospace use JetBrains Mono. */
    --bs-font-monospace: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fit-danger: #bd2920;
    --fit-danger-emphasis: #801c1a;
}

/* Global scrollbar style: thin, neutral thumb on a transparent track */
* {
    scrollbar-width: thin;
    scrollbar-color: #888888 transparent; /* thumb, track */
}

* blockquote {
    border-left: 4px solid #C9D300;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

html {
    background-color: #131313;
}

body {
    font-family: 'Exo', sans-serif;
    font-size: 1rem !important;
    background-color: #ffffff;
    color: #333;
    min-width: 380px;
}

code, kbd, samp, pre {
    font-size: 0.9em;
    font-style: normal; /* The site font is italic, code must not be. */
}

/* Inline code only: code blocks are styled by CodeSection and RichTextSection. */
:not(pre) > code {
    padding: 0.15em 0.4em;
    color: inherit; /* Replaces Bootstrap's pink --bs-code-color. */
    background: rgba(128, 128, 128, 0.15);
    border-radius: 4px;
    word-wrap: break-word;
}

/* Four visual roles instead of six; .hN classes decouple look from structure */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
    transition: font-size 0.2s ease;
}

h1, .h1 {
    font-size: 2.5rem;
}

/* page title */
h2, .h2 {
    font-size: 2rem;
}

/* section */
h3, .h3 {
    font-size: 1.5rem;
}

/* subsection */
h4, h5, h6, .h4, .h5, .h6 {
    font-size: 1.2rem;
}

/* minor heading: body size, set apart by weight */

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.65rem;
    }

    h3, .h3 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        transition: none;
    }
}

h1:focus {
    outline: none;
}

h2.content-header {
    color: #3f2581;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #3f2581;
}

.section-block-marine {
    color: #C9D300;
    background: #041b45;
}

.section-block-lemon {
    color: #041b45;
    background: #C9D300;
}

.section-block-blank {
    color: initial;
    background: initial;
}

.section-block-blank a,
.section-block-blank a.nav-link {
    color: #041b45;
}

a.nav-link {
    padding-bottom: 0.4rem;
}

a, a.nav-link, a.nav-link:focus, .btn-link {
    color: #C9D300;
}

.header-top-bar a:hover, a.nav-link:hover, .btn-link:hover {
    color: #dce600;
    text-shadow: 0 0 6px rgba(201, 211, 0, 0.8),
    0 0 12px rgba(201, 211, 0, 0.5);
}

a.nav-link.active {
    border-bottom: 2px solid #C9D300;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.custom-submit-btn .btn-custom {
    background-color: #C9D300 !important;
    color: #000000 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ====================== */
/* Blog Article           */
/* ====================== */

/* The first element of the first section starts flush with the article body. The gap to the meta block is
   owned by the meta block, so it stays the same whatever tag the article starts with (h2, h4, p, table). */
.blog-article-body > :first-child > :first-child {
    margin-top: 0;
}

/* Links in blog content: dark text for contrast (lemon on white is only about 1.6:1);
   the brand colour carries the underline and the hover highlight. */
.blog-article-body a {
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #C9D300;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    transition: background-color 0.2s ease;
}

.blog-article-body a:hover {
    background-color: #C9D300; /* dark text on lemon stays well above 10:1 */
}

/* ======================= */
/*   Quill Editor styles   */
/* ======================= */
.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

img[data-size] {
    max-width: 100%;
    height: auto;
}

img[data-size="25"] {
    width: 25%;
}

img[data-size="50"] {
    width: 50%;
}

img[data-size="75"] {
    width: 75%;
}

img[data-size="100"] {
    width: 100%;
}

img[data-float="left"] {
    float: left;
    margin: 0 1rem 0.5rem 0;
}

img[data-float="right"] {
    float: right;
    margin: 0 0 0.5rem 1rem;
}

/* Little room for text next to a wide image, so floating makes no sense. */
img[data-float][data-size="75"],
img[data-float][data-size="100"] {
    float: none;
    margin: 0 0 0.5rem;
}

@media (max-width: 576px) {
    img[data-float] {
        float: none;
        display: block;
        margin: 0.5rem auto;
    }
}

/* Contains the floats, so a tall image never reaches into the next section. */
.teaser-content,
.blog-article-body {
    display: flow-root;
}