/* the fonts of pos.usecue.com: Roboto (Apache License) for the text, in 400 and 700 (600 shows as 700),
   and Geist (SIL Open Font License) for the name in the top bar, in 400 and 700 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/roboto-v30-latin-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/roboto-v30-latin-700.woff2) format('woff2');
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-700.woff2) format('woff2');
}

:root {
    --color-primary: #101010;
    --color-primary-dark: #000;
    --color-red: #e5322d;
    --color-text: #202124;
    --color-muted: #5f6368;
    --color-border: #dadce0;
    --color-bg: #f1f3f4;
    --color-white: #fff;
    --topbar-height: 56px;
    /* only on the boxes: the comment thread, the menus and the form boxes */
    --radius: 4px;
    --shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
    /* the top bar, the address bar on the homepage and the form boxes, instead of a border */
    --shadow-small: 0 1px 6px rgba(32, 33, 36, .12);
}

/* no spacing from the browser, which differs per browser: every margin, padding and font size is set here */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font: 15px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--color-text);
    background: var(--color-white);
}

/* form controls do not take the font of the page by default */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 34px;
}

h2 {
    margin: 20px 0;
    padding-top: 4px;
    font-size: 26px;
}

h3 {
    margin: 18px 0;
    font-size: 18px;
}

h4 {
    margin: 20px 0;
    font-size: 15px;
}

p {
    margin: 15px 0;
}

a {
    color: var(--color-primary);
}

[hidden] {
    display: none !important;
}

.muted {
    color: var(--color-muted);
}

/* ---- topbar ---------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar-height);
    padding: 0 16px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
}

.brand,
.brand a {
    font-family: Geist, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.brand .brand-suffix {
    font-weight: 400;
}

/* the logo: a black circle, as high as the hexagon in the header of cms.usecue.com (1.2rem there) */
.logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    vertical-align: -3px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.toplink {
    color: var(--color-text);
    text-decoration: none;
}

.toplink:hover {
    color: var(--color-primary);
}

.icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
    background: var(--color-bg);
}

.icon-button svg,
.mode svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ---- buttons & forms ------------------------------------------------------- */

/* like the buttons of pos.usecue.com: square and black, with a border of the same color, so the
   reversed (ghost) button has the same size */
.button,
.small-button {
    display: inline-block;
    height: 40px;
    padding: 0 24px;
    border: 2px solid var(--color-primary);
    border-radius: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
.small-button:hover {
    background: var(--color-primary-dark);
}

/* on top of the space between them in the html */
.button + .button,
.small-button + .small-button {
    margin-left: 6px;
}

.button:disabled {
    opacity: .6;
    cursor: default;
}

/* the focus ring of the browser (Tab), only moved: off the dark buttons, where it does not show, and
   inside the menu items and screen size buttons, whose box would cut it off */
.button:focus-visible,
.small-button:focus-visible {
    outline-offset: 2px;
}

.panel-item:focus-visible,
.mode:focus-visible {
    outline-offset: -2px;
}

.button.small,
.small-button {
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 24px;
}

.button.ghost {
    background: transparent;
    color: var(--color-primary);
}

.button.danger,
.small-button.danger {
    border-color: var(--color-red);
    background: var(--color-red);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.link-button:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.form-group {
    position: relative;
    margin-bottom: 16px;
}

/* a link at the end of the label line ("Forgot password?"); after the field in the html, so Tab
   goes from field to field */
.label-link {
    position: absolute;
    top: 1px;
    right: 0;
    font-size: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
}

/* like the fields of pos.usecue.com: square, a light border and a hint of gray; focused, the
   browser draws its own ring */
.form-control {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
    font: inherit;
    color: inherit;
    background: rgba(0, 0, 0, .02);
}

.form-error {
    margin: 8px 0;
    color: var(--color-red);
    font-size: 14px;
}

/* ---- layout ---------------------------------------------------------------- */

.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px;
}

.container.wide {
    max-width: 1100px;
}

/* the pages (home, log in, invite, password) are light gray like the annotation screen, with white cards on it; the admin is white */
body.home,
body.login {
    min-height: 100vh;
    background: var(--color-bg);
}

.card {
    position: relative;
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.card.narrow {
    max-width: 380px;
    margin: 40px auto;
    padding: 32px 28px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
}

/* room between the introduction of a form and its first field */
.card.narrow p + form {
    margin-top: 32px;
}

/* between a form and the links to the other forms below it */
.card.narrow hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* the links below the line are one group */
.card.narrow hr ~ p {
    margin: 8px 0 0;
}

/* room between the last field and the buttons (submit and Cancel, so they stay aligned) */
.card.narrow form .button {
    margin-top: 8px;
}

.card h2,
.card h4 {
    margin-top: 0;
}

.card-actions {
    float: right;
    margin-left: 12px;
}

/* ---- homepage -------------------------------------------------------------- */

.hero {
    padding: 12vh 0 40px;
    text-align: center;
}

.hero h1 {
    margin: 0 0 13px;
}

.lead {
    margin: 0 auto 32px;
    max-width: 520px;
    color: var(--color-muted);
}

.urlbar {
    display: flex;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: var(--shadow-small);
    overflow: hidden;
    background: var(--color-white);
}

.urlbar input {
    flex: 1;
    min-width: 0;
    padding: 14px 22px;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 16px;
}

/* the focus ring of the browser, like on the fields of the log in page, but around the whole bar:
   the input is only the part before the button, and the bar would cut off its ring */
.urlbar:has(input:focus) {
    outline: auto;
}

/* the height of the bar, inside it */
.urlbar .button {
    height: auto;
    margin: 5px;
    padding: 0 32px;
}

/* ---- dropdown panels ------------------------------------------------------- */

.panel {
    position: fixed;
    top: calc(var(--topbar-height) + 12px);
    right: 12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--topbar-height) - 30px);
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

/* small triangle pointing at the button that opened it, like the comment thread; --pointer is
   its distance to the right side. The list scrolls instead of the panel, so it is not cut off. */
.panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: var(--pointer, 32px);
    margin-right: -6px;
    border: 6px solid transparent;
    border-top-width: 0;
    border-bottom-color: var(--color-white);
}

.panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

.panel-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 4px 0;
    border-radius: 0 0 var(--radius) var(--radius);
    list-style: none;
}

.panel-list li {
    position: relative;
}

.panel-item {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

a.panel-item {
    padding-right: 44px;
}

.panel-item:hover {
    background: var(--color-bg);
}

.panel-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--color-red);
}

.dismissed .panel-dot,
.panel-dot.done {
    background: #c8cbce;
}

/* keeps its place, so the titles stay aligned */
.panel-dot[hidden] {
    display: block;
    visibility: hidden;
}

.dismissed .panel-title {
    color: var(--color-muted);
}

.panel-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.panel-title,
.panel-meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-meta {
    color: var(--color-muted);
    font-size: 13px;
}

.panel-empty {
    padding: 16px;
    color: var(--color-muted);
}

/* the Ctrl hint below the annotations, always in view: only the list above it scrolls */
.panel-footer {
    flex: none;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 13px;
}

.panel-remove {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.panel-remove:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* ---- annotation screen ----------------------------------------------------- */

body.app {
    height: 100vh;
    overflow: hidden;
}

.current-url {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 10vw 0 0;
}

.current-url input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-muted);
    font: inherit;
    font-size: 14px;
    text-overflow: ellipsis;
}

.current-url input:focus {
    border-color: var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
}

.modes {
    display: flex;
    flex: none;
    box-sizing: border-box;
    height: 34px;
    margin-left: auto;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.mode:first-child {
    border-left: 0;
}

.mode svg {
    width: 18px;
    height: 18px;
}

.mode:hover {
    color: var(--color-text);
}

.mode.active {
    background: #e8eaed;
    color: var(--color-primary);
}

.app .topbar-right {
    margin-left: 0;
}

/* same height as the screen size buttons (Share, and Login on the homepage) */
.topbar .button {
    height: 34px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 30px;
}

.stage {
    position: absolute;
    top: var(--topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0;
    overflow: hidden;
    background: var(--color-bg);
}

.frame-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
}

.frame-wrap.loading::after {
    content: "Loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    color: var(--color-muted);
}

.frame-wrap iframe {
    display: block;
    border: 0;
    transform-origin: 0 0;
}

/* the annotations as text for readers that do not run scripts (pages/s(app).phtml), not with "hidden" or
   "display: none", text extractors skip those; app.js removes it */
.transcript {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.thread {
    position: fixed;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-height: min(480px, calc(100vh - var(--topbar-height) - 16px));
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
    transition: opacity .15s;
}

/* small triangle pointing at the dot; data-pointer is the side of the window it is on */
.thread::before {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}

.thread[data-pointer="none"]::before {
    display: none;
}

.thread[data-pointer="left"]::before {
    top: var(--pointer);
    left: -6px;
    margin-top: -6px;
    border-left-width: 0;
    border-right-color: var(--color-white);
}

.thread[data-pointer="right"]::before {
    top: var(--pointer);
    right: -6px;
    margin-top: -6px;
    border-right-width: 0;
    border-left-color: var(--color-white);
}

.thread[data-pointer="top"]::before {
    left: var(--pointer);
    top: -6px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: var(--color-white);
}

.thread[data-pointer="bottom"]::before {
    left: var(--pointer);
    bottom: -6px;
    margin-left: -6px;
    border-bottom-width: 0;
    border-top-color: var(--color-white);
}

.thread.offscreen {
    opacity: .5;
}

/* hidden while Ctrl (or ⌘) is held, to see the page and follow its links; not with display: none,
   which would take the focus from a comment being typed */
.browsing .thread,
.browsing .panel {
    opacity: 0;
    pointer-events: none;
}

.thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 10px 16px;
}

.thread-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-height: 160px;
    overflow: auto;
    padding-top: 4px;
    font-size: 13px;
}

.thread-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-close {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.thread-close:hover {
    background: var(--color-bg);
}

.thread-comments {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-comments:empty {
    display: none;
}

.comment {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg);
}

.comment:last-child {
    border-bottom: 0;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.comment-meta .link-button {
    font-size: inherit;
}

.comment-edit {
    margin: 6px 0 4px;
}

.comment-edit .form-control {
    margin-bottom: 8px;
    resize: vertical;
    font-size: 14px;
    font-weight: 400;
}

.comment-message,
.comment p {
    margin: 2px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-form {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-form .form-control {
    margin-bottom: 8px;
    resize: vertical;
}

.thread-status {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.thread-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 40;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    background: #323232;
    color: var(--color-white);
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

/* ---- admin ----------------------------------------------------------------- */

/* the trail above an admin page (Admin > Users > ...), set by the page like in megagen; one line
   is kept for it on every page, also without a trail (the dashboard), so the titles line up */
.breadcrumbs {
    min-height: 1.5em;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: silver;
}

.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: ">";
    margin: 0 6px;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

/* close to the title below them */
.breadcrumbs + h2 {
    margin-top: 0;
}

/* a text above a table, the tiles or a form, like the explanation on the dashboard, the email
   templates, the crons and the websites */
.admin p + table,
.admin p + .iconlinks,
.admin p + form {
    margin-top: 32px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: var(--color-white);
}

th,
td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

th {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-muted);
}

table.details th {
    width: 120px;
}

table.details tr:last-child th,
table.details tr:last-child td {
    border-bottom: 0;
}

td.url,
p.url {
    word-break: break-all;
}

td.actions {
    text-align: right;
    white-space: nowrap;
}

.comment .card-actions {
    margin-top: 2px;
}

/* the status of a cron run or day, like in megagen: green when all ran, red with errors, orange
   with missed runs, gray while running or still to run today */
.status-dot {
    display: inline-block;
    width: .75em;
    height: .75em;
    margin-right: .5em;
    border-radius: 50%;
    background: #bdc1c6;
}

.status-dot.succeeded {
    background: #1e8e3e;
}

.status-dot.failed {
    background: var(--color-red);
}

.status-dot.missed {
    background: #f29900;
}

/* the errors and the output of a cron run */
pre.log {
    font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

/* the search field above an admin list, like the admin of megagen: the full width, with a magnifier
   on the right instead of the clear button of the browser */
.search {
    margin-bottom: 16px;
}

.search input {
    padding-right: 40px;
    background: rgba(0, 0, 0, .02) url(../img/admin/search-solid-thick.svg) right 8px center / 24px no-repeat;
}

.search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* a checkbox shown as a rounded slider, like "Hide empty sessions" on the sessions page */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch .slider {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--color-border);
    transition: background .15s;
}

.switch .slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s;
}

.switch input:checked + .slider {
    background: var(--color-primary);
}

.switch input:checked + .slider::before {
    transform: translateX(16px);
}

.switch input:focus-visible + .slider {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* the dashboard: a square tile with a Line Awesome icon per admin page, like the admin of megagen */
.iconlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
    list-style: none;
}

.iconlinks a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.iconlinks a:hover {
    border-color: var(--color-primary);
}

.iconlinks img {
    display: block;
    height: 40px;
    margin-bottom: 5px;
    opacity: .8;
}

.iconlinks .badge {
    top: 8px;
    right: 8px;
}

/* the preview of an email template: its paragraphs and lists with the room a mail program gives them */
.email-preview {
    max-width: 640px;
}

.email-preview > :first-child {
    margin-top: 0;
}

.email-preview > :last-child {
    margin-bottom: 0;
}

.email-preview ul,
.email-preview ol {
    margin: 15px 0;
    padding-left: 24px;
}

/* ---- small screens --------------------------------------------------------- */

/* medium screens: the address bar is more useful than the app name */
@media (max-width: 750px) {
    .app .brand {
        display: none;
    }
}

/* small screens: only the screen sizes on the left and the actions on the right */
@media (max-width: 600px) {
    .current-url {
        display: none;
    }

    .modes {
        margin-left: 0;
    }

    .app .topbar-right {
        margin-left: auto;
    }
}

@media (max-width: 600px) {

    .stage {
        padding: 0;
    }

    .thread {
        left: 0 !important;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100%;
        max-height: 60vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }
}