.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/** Display */
.block {
    display: block;
}

.inline {
    display: inline;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-gap-1 {
    gap: 1rem;
}

.jc-between {
    justify-content: space-between;
}

.jc-center {
    justify-content: center;
}

.jc-start {
    justify-content: start;
}

.jc-end {
    justify-content: end;
}

.ai-center {
    align-items: center;
}

.ai-start {
    align-items: start;
}

.ai-end {
    align-items: end;
}

.strikethrough {
    text-decoration: line-through;
    color: gray;
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: table;
}

/** Typography */
.mono {
    font-family:Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace; 
}

.font-xs {
    font-size: 0.75rem;
}

.font-sm {
    font-size: 0.875rem;
}

.font-normal {
    font-size: 1rem;
}

.font-lg {
    font-size: 1.25rem;
}

.font-xl {
    font-size: 1.375rem;
}

.font-italic {
    font-style: italic;
}

.font-bold {
    font-style: bold;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

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

.current-color {
    color: currentColor;
}

.underline {
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

/** Spacing */
.m-0, .mar-0 {
    margin: 0;
}

.m-1, .mar-1 {
    margin: 1rem;
}

.mt-0, .mar-top-0 {
    margin-top: 0;
}

.mt-1, .mar-top-1 {
    margin-top: 1rem;
}

.mt-2, .mar-top-2 {
    margin-top: 2rem;
}

.mb-0, .mar-bot-0 {
    margin-bottom: 0;
}

.mb-1, .mar-bot-1 {
    margin-bottom: 1rem;
}

.mb-2, .mar-bot-2 {
    margin-bottom: 2rem;
}

.p-0, .pad-0 {
    padding: 0;
}

.p-1, .pad-1 {
    padding: 1rem;
}

.pt-0, .pad-top-0 {
    padding-top: 0;
}

.pt-1, .pad-top-1 {
    padding-top: 1rem;
}

.pb-0, .pad-bot-0 {
    padding-bottom: 0;
}

.pb-1, .pad-bot-1 {
    padding-bottom: 1rem;
}

.py-0, .pad-block-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1, .pad-block-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.px-0, .pad-inline-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1, .pad-inline-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.border-1 {
    border: 1px solid var(--highlight-color);
}

.svg-icon {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
    fill: transparent;
    stroke-width: 2px;
    vertical-align: sub;
}

.svg-icon--check {
    fill: none;
}

.svg-icon--inbox {
    width: 50px;
    height: 50px;
}

.svg-icon--frown {
    width: 100px;
    height: 100px;
    stroke-width: 1px;
    stroke-dasharray: 100 100;
}

.svg-icon--wifi-off {
    width: 100%;
    height: 50px;
}

.form--centered {
    max-width: 40rem;
    margin: 0 auto;
}

.w-full {
    width: 100%;
}

.width-80 {
    max-width: 80rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.width-60 {
    max-width: 60rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.width-40 {
    max-width: 40rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.flex-row {
    display: flex;
    gap: 1rem;
    align-items-center;
}

/* Personal utilities */
.highlight-note {
    --highlight-color: var(--primary-color);
}

.highlight-article {
    --highlight-color: var(--secondary-color);
}

.highlight-like {
    --highlight-color: var(--like-color);
}

.highlight-boost {
    --highlight-color: var(--boost-color);
}

.highlight-reply {
    --highlight-color: var(--reply-color);
}

.highlight-bookmark {
    --highlight-color: var(--bookmark-color);
}

.highlight-recipe {
    --highlight-color: var(--recipe-color);
}