/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: 900;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/*
 * Font face declarations.
 */
@font-face {
    font-family: 'Lalezar';
    src:
        url('/fonts/Lalezar-Regular.woff2') format(woff2),
        url('/fonts/Lalezar-Regular.woff') format(woff),
        url('/fonts/Lalezar-Regular.ttf') format(ttf);
}

@font-face {
    font-family: 'Open Sans';
    src:
        url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format(woff2),
        url('/fonts/OpenSans-VariableFont_wdth,wght.woff') format(woff),
        url('/fonts/OpenSans-VariableFont_wdth,wght.ttf') format(ttf);
}

/*
 * CSS Custom Properties for theming
 */
:root {
    /* Light theme colors */
    --bg-color: #f4f4f4;
    --text-color: #0c0c0c;
    --heading-color: #204080;
    --link-color: #5060e0;
    --link-hover-color: #ff748c;
    --meta-color: #a55;
    --blockquote-color: #808080;
    --border-color: #bbb;
    --border-color-alt: #444;
    --code-color: #a81818;
    --pre-bg-color: #ececec;
    --table-header-bg: #bbb;
    --table-border-color: #777;
    --green-note-bg: #ececec;
    --green-note-color: #008000;
    --footer-color: #555;
    --header-bg-color: #e0e0e0;
    --header-text-color: #333333;
    --hero-bg-color: #d0d0d0;
    --hero-text-color: #204080;
    --syntax-blocktext: #141414;
    --syntax-comment: #008000;
    --syntax-css-at-rule: #c040c0;
    --syntax-css-pseudo: #4ca4c0;
    --syntax-css-selector: #4058d0;
    --syntax-element: #4ca4c0;
    --syntax-error-bg: #ff0000;
    --syntax-error-color: #f0f0f0;
    --syntax-function: #a09040;
    --syntax-heading: #c04848;
    --syntax-html-attribute: #4ca4c0;
    --syntax-html-doctype: #a0a0a0;
    --syntax-html-tag: #c040c0;
    --syntax-identifier: #4058d0;
    --syntax-keyword: #c040c0;
    --syntax-number: #c06a20;
    --syntax-operator: #404040;
    --syntax-preprocessor: #a0a0a0;
    --syntax-regexp: #d86628;
    --syntax-string: #c04848;
    --syntax-text: #141414;
}

/* Dark theme - system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #141414;
        --text-color: #ccc;
        --heading-color: #ffe0a0;
        --link-color: #70a0f0;
        --link-hover-color: #f06e82;
        --meta-color: #eaa;
        --blockquote-color: #808080;
        --border-color: #444;
        --border-color-alt: #444;
        --code-color: #d06060;
        --pre-bg-color: #080808;
        --table-header-bg: #444;
        --table-border-color: #777;
        --green-note-bg: #080808;
        --green-note-color: #60b860;
        --footer-color: #aaa;
        --header-bg-color: #2a2a2a;
        --header-text-color: #e0e0e0;
        --hero-bg-color: #343434;
        --hero-text-color: #ffe0a0;
        --syntax-blocktext: #b8b8b8;
        --syntax-comment: #68d068;
        --syntax-css-at-rule: #ffc0eb;
        --syntax-css-pseudo: #90e0e8;
        --syntax-css-selector: #80b0f0;
        --syntax-element: #90e0e8;
        --syntax-error-bg: #ff0000;
        --syntax-error-color: #f0f0f0;
        --syntax-function: #e0e080;
        --syntax-heading: #f06060;
        --syntax-html-attribute: #90e0e8;
        --syntax-html-doctype: #808080;
        --syntax-html-tag: #ffc0eb;
        --syntax-identifier: #80b0f0;
        --syntax-keyword: #ffc0eb;
        --syntax-number: #c08040;
        --syntax-operator: #c0c0c0;
        --syntax-preprocessor: #808080;
        --syntax-regexp: #c87050;
        --syntax-string: #f06060;
        --syntax-text: #d0d0d0;
    }
}

/* Manual theme override - light */
[data-theme="light"] {
    --bg-color: #f4f4f4;
    --text-color: #0c0c0c;
    --heading-color: #204080;
    --link-color: #5060e0;
    --link-hover-color: #ff748c;
    --meta-color: #a55;
    --blockquote-color: #808080;
    --border-color: #bbb;
    --border-color-alt: #444;
    --code-color: #a81818;
    --pre-bg-color: #ececec;
    --table-header-bg: #bbb;
    --table-border-color: #777;
    --green-note-bg: #ececec;
    --green-note-color: #008000;
    --footer-color: #555;
    --header-bg-color: #e0e0e0;
    --header-text-color: #333333;
    --hero-bg-color: #d0d0d0;
    --hero-text-color: #204080;
    --syntax-blocktext: #141414;
    --syntax-comment: #008000;
    --syntax-css-at-rule: #c040c0;
    --syntax-css-pseudo: #4ca4c0;
    --syntax-css-selector: #4058d0;
    --syntax-element: #4ca4c0;
    --syntax-error-bg: #ff0000;
    --syntax-error-color: #f0f0f0;
    --syntax-function: #a09040;
    --syntax-heading: #c04848;
    --syntax-html-attribute: #4ca4c0;
    --syntax-html-doctype: #a0a0a0;
    --syntax-html-tag: #c040c0;
    --syntax-identifier: #4058d0;
    --syntax-keyword: #c040c0;
    --syntax-number: #c06a20;
    --syntax-operator: #404040;
    --syntax-preprocessor: #a0a0a0;
    --syntax-regexp: #d86628;
    --syntax-string: #c04848;
    --syntax-text: #141414;
}

/* Manual theme override - dark */
[data-theme="dark"] {
    --bg-color: #141414;
    --text-color: #ccc;
    --heading-color: #ffe0a0;
    --link-color: #70a0f0;
    --link-hover-color: #f06e82;
    --meta-color: #eaa;
    --blockquote-color: #808080;
    --border-color: #444;
    --border-color-alt: #444;
    --code-color: #d06060;
    --pre-bg-color: #080808;
    --table-header-bg: #444;
    --table-border-color: #777;
    --green-note-bg: #080808;
    --green-note-color: #60b860;
    --footer-color: #aaa;
    --header-bg-color: #2a2a2a;
    --header-text-color: #e0e0e0;
    --hero-bg-color: #343434;
    --hero-text-color: #ffe0a0;
    --syntax-blocktext: #b8b8b8;
    --syntax-comment: #68d068;
    --syntax-css-at-rule: #ffc0eb;
    --syntax-css-pseudo: #90e0e8;
    --syntax-css-selector: #80b0f0;
    --syntax-element: #90e0e8;
    --syntax-error-bg: #ff0000;
    --syntax-error-color: #f0f0f0;
    --syntax-function: #e0e080;
    --syntax-heading: #f06060;
    --syntax-html-attribute: #90e0e8;
    --syntax-html-doctype: #808080;
    --syntax-html-tag: #ffc0eb;
    --syntax-identifier: #80b0f0;
    --syntax-keyword: #ffc0eb;
    --syntax-number: #c08040;
    --syntax-operator: #c0c0c0;
    --syntax-preprocessor: #808080;
    --syntax-regexp: #c87050;
    --syntax-string: #f06060;
    --syntax-text: #d0d0d0;
}

/*
 * Base styles using CSS custom properties
 */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
    font-synthesis: none;
}

html {
    margin-left: 0;
    margin-right: 0;
    text-size-adjust: 100%;
    font-size: 15px;
}

body {
    background-color: var(--bg-color);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.4;
}

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

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

a img {
    border: none;
}

blockquote {
    border-left: 2px solid var(--heading-color);
    padding-left: 1.2rem;
    margin: 2.4rem 1.2rem;
    font-family: inherit;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--text-color);
}

blockquote p {
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
    margin-bottom: 1rem;
}

blockquote cite {
    font-size: 70%;
    opacity: .8;
}

blockquote em {
    font-weight: 600;
}

figure {
    margin: 1.4rem 0;
    text-align: left;
    font-weight: 400;
    font-style: normal;

}

figure figcaption {
    margin-top: 0.85rem;
    text-align: center;
    font-size: 0.85rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lalezar', sans-serif;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--heading-color);
}

h1 {
    margin-top: 2rem;
    font-size: 2.5rem;

    /* We get weird misaligment of headings against body text, so let's resolve that */
    position: relative;
    left: -1px;
}

h2 {
    margin-top: 1.6rem;
    font-size: 1.9rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: .9rem;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0 1rem 0;
    padding: 0;
}

img {
    margin: auto;
    max-width: 100%;
    height: auto;
    display: block;
}

pre {
    overflow-x: auto;
    line-height: 1.2;
}

/* Grid Layout Structure */
.app {
    display: grid;
    grid-template-rows: 64px 1fr 64px;
    min-height: 100dvh;
}

.app .header {
    grid-row: 1;
    position: fixed;
    height: 64px;
    width: 100%;
    background-color: var(--header-bg-color);
    margin: 0;
    top: 0;
    left: 0;
    z-index: 1000;
}

.app .header .container {
    display: flex;
    line-height: 1;
    justify-content: space-between;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    overflow: visible;
}

.app .header .container .logo {
    display: flex;
    align-items: center;
}

.app .header .container .logo a {
    color: var(--header-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.app .header .container .logo a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.app .header .container .logo .logo-component {
    display: flex;
    justify-content: flex-start;
    margin-top: 7px;
}

.app .header .container .logo .logo-text {
    font-family: 'Lalezar', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
}

.app .header .container .menu {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: none;
    justify-content: flex-end;
    font-weight: 400;
    float: right;
    color: var(--header-text-color);
    display: flex;
    align-items: center;
    line-height: 1;
}

.app .header .container .menu a {
    border: none;
    margin-left: 15px;
    color: var(--header-text-color);
    line-height: 1;
    font-size: 1rem;
}

.app .header .container .menu a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.app .header .container .menu .theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-text-color);
    line-height: 1;
}

.app .header .container .menu .theme-toggle:hover {
    color: var(--link-hover-color);
}

.app .header .container .menu .theme-toggle svg {
    max-width: 18px;
    max-height: 18px;
}

.app .main {
    grid-row: 2;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.app .main .hero {
    padding: 3rem 0 3rem 0;
    margin: 0;
    background-color: var(--hero-bg-color);
    color: var(--text-color);
}

.app .main .hero .container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

.app .main .hero .container h1 {
    margin-top: 0;
    font-size: 3rem;
    color: var(--hero-text-color);
}

.app .main .hero .container p {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 1rem;
}

.app .main .content .container {
    max-width: 1024px;
    margin: 1.5rem auto 2.5rem auto;
    padding: 0 20px 0 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-x: hidden;
}

.app .main .content .container p {
    margin: 0.8em 0; /* Reduced from browser default of 1em to 0.8em */
}

.app .main .content .container a {
    color: var(--link-color);
    text-decoration: none;
}

.app .main .content .container a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.app .main .content .container code {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 13px;
    color: var(--code-color);
}

.app .main .content .container pre {
    background-color: var(--pre-bg-color);
    padding: 8px;
    overflow-x: auto;
    line-height: 1.2;
    max-width: 100%;
}

.app .main .content .container pre code .blocktext {
    color: var(--syntax-blocktext);
}

.app .main .content .container pre code .comment {
    color: var(--syntax-comment);
}

.app .main .content .container pre code .css-at-rule {
    color: var(--syntax-css-at-rule);
}

.app .main .content .container pre code .css-pseudo {
    color: var(--syntax-css-pseudo);
}

.app .main .content .container pre code .css-selector {
    color: var(--syntax-css-selector);
}

.app .main .content .container pre code .element {
    color: var(--syntax-element);
}

.app .main .content .container pre code .error {
    background-color: var(--syntax-error-bg);
    color: var(--syntax-error-color);
}

.app .main .content .container pre code .function {
    color: var(--syntax-function);
}

.app .main .content .container pre code .heading {
    color: var(--syntax-heading);
}

.app .main .content .container pre code .html-attribute {
    color: var(--syntax-html-attribute);
}

.app .main .content .container pre code .html-doctype {
    color: var(--syntax-html-doctype);
}

.app .main .content .container pre code .html-tag {
    color: var(--syntax-html-tag);
}

.app .main .content .container pre code .identifier {
    color: var(--syntax-identifier);
}

.app .main .content .container pre code .keyword {
    color: var(--syntax-keyword);
}

.app .main .content .container pre code .number {
    color: var(--syntax-number);
}

.app .main .content .container pre code .operator {
    color: var(--syntax-operator);
}

.app .main .content .container pre code .preprocessor {
    color: var(--syntax-preprocessor);
}

.app .main .content .container pre code .regexp {
    color: var(--syntax-regexp);
}

.app .main .content .container pre code .string {
    color: var(--syntax-string);
}

.app .main .content .container pre code .text {
    color: var(--syntax-text);
}

.app .main .content .container table {
    margin: 25px auto 25px auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.app .main .content .container table th {
    background-color: var(--table-header-bg);
    padding: 5px 10px;
    border: 1px solid var(--table-border-color);
    font-weight: 600;
}

.app .main .content .container table td {
    padding: 5px 10px;
    border: 1px solid var(--table-border-color);
}

.app .main .content .container .blog-posts h2 {
    margin-bottom: 0.8rem;
}

.app .main .content .container .blog-posts .blog-post {
    display: list-item;
    list-style-type: disc;
}

.app .main .content .container .blog-posts .blog-post .blog-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.app .main .content .container .blog-posts .blog-post .blog-content > span:first-child {
    flex: 1;
}

.app .main .content .container .blog-posts .blog-post .blog-content .meta {
    font-size: 0.85rem;
    margin: 0.225rem 1rem 0 5px;
    min-width: 80px;
    color: var(--meta-color);
    flex-shrink: 0;
    text-align: right;
}

.app .main .content .container .meta {
    font-size: 0.85rem;
    margin-top: 0.4rem;
    margin-bottom: 1.5rem;
    color: var(--meta-color);
}

.app .main .content .container .prev-next {
    margin: 0;
}

.app .main .content .container .prev-next table {
    margin: 0;
}

.app .main .content .container .prev-next .meta-nav {
    margin-top: 1rem;
    border: none;
    width: 100%;
}

.app .main .content .container .prev-next .meta-nav td {
    padding: 0 0 0 0;
}

.app .main .content .container .prev-next .meta-nav .prev {
    text-align: left;
    border: none;
    width: 30px;
    padding-top: 5px;
}

.app .main .content .container .prev-next .meta-nav .prev svg {
    max-width: 15px;
    max-height: 15px;
}

.app .main .content .container .prev-next .meta-nav .prev-text {
    text-align: left;
    border: none;
    padding-right: 1px;
}

.app .main .content .container .prev-next .meta-nav .next-text {
    text-align: right;
    border: none;
    padding-left: 1px;
}

.app .main .content .container .prev-next .meta-nav .next {
    text-align: right;
    border: none;
    width: 30px;
    padding-top: 5px;
}

.app .main .content .container .prev-next .meta-nav .next svg {
    max-width: 15px;
    max-height: 15px;
}

.app .footer {
    grid-row: 3;
    width: 100%;
    height: 64px;
    background-color: var(--header-bg-color);
}

.app .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto;
    padding: 17px 20px 16px 20px;
}

.app .footer .container .copyright {
    color: var(--header-text-color);
}

.app .footer .container .social {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: none;
    justify-content: flex-end;
}

.app .footer .container .social .icon {
    margin: 6px 0 0 0;
    border: none;
    float: right;
    margin-left: 15px;
    color: var(--header-text-color);
}

.app .footer .container .social .icon svg {
    max-width: 18px;
    max-height: 18px;
}

.app .footer .container .social .icon:hover {
    color: var(--link-hover-color);
}

/* Additional styling for content elements */
.app .main .content .container .green-note {
    background-color: var(--green-note-bg);
    color: var(--green-note-color);
    padding: 1px 8px;
}

.app .main .content .container .question {
    position: relative;
    margin-bottom: 15px;
}

.app .main .content .container .question label {
    display: block;
    margin-bottom: 5px;
}

.app .main .content .container .question input[type="checkbox"],
.app .main .content .container .question input[type="radio"] {
    margin-right: 10px;
}

.app .main .content .container .question p {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
    margin-right: 5px;
}

.app .main .content .container .question .correct {
    font-weight: bold;
    color: green;
}

.app .main .content .container .question .incorrect {
    font-weight: bold;
    color: red;
}

.app .main .content .container .submit {
    margin-top: 15px;
}