@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        local('Roboto Bold'),
        local('Roboto-Bold'),
        url('/assets/fonts/Roboto-Bold-webfont.woff') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src:
        local('Roboto Bold Italic'),
        local('Roboto-Bold-Italic'),
        url('/assets/fonts/Roboto-BoldItalic-webfont.woff') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src:
        local('Roboto Italic'),
        local('Roboto-Italic'),
        url('/assets/fonts/Roboto-Italic-webfont.woff') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local('Roboto'),
        local('Roboto-Regular'),
        url('/assets/fonts/Roboto-Regular-webfont.woff') format('woff2');
}

:root {
    --font-size-base: 12;
    --line-height: 1.4;

    /* Semrush (Intergalactic) color palette */
    --Gray-50: #f4f5f9;
    --Gray-500: #6c6e79;
    --Gray-700: #2b2e38;
    --Gray-800: #191b23;
    --Blue-200: #8ecdff;
    --Blue-500: #006dca;
    --Violet-200: #dcb8ff;
    --Violet-500: #8649e1;

    --color-text: var(--Gray-800);
    --color-background: var(--Gray-50);
    --color-link: var(--Blue-500);
    --color-link-visited: var(--Violet-500);

    --color-dark-text: var(--Gray-50);
    --color-dark-background: var(--Gray-700);
    --color-dark-link: var(--Blue-200);
    --color-dark-link-visited: var(--Violet-200);
}

body {
    box-sizing: border-box;
    min-width: 320px;
    margin: 0;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: calc(var(--font-size-base) / 12 * 100%);
    line-height: var(--line-height);
}
@media (prefers-color-scheme: dark) {
    body {
        background: var(--color-dark-background);
        color: var(--color-dark-text);
    }
}

a {
    color: var(--color-link);
}
a:visited {
    color: var(--color-link-visited);
}
@media (prefers-color-scheme: dark) {
    a {
        color: var(--color-dark-link);
    }
    a:visited {
        color: var(--color-dark-link-visited);
    }
}

p,
ul,
ol,
dl,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
figure {
    margin-block: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}
ul,
ol {
    padding-left: 1rem;
}
hr {
    display: block;
}
img,
video {
    max-width: 100%;
}
figure {
    margin-inline: 0;
}
figure a {
    display: inline-block;
}
sup a {
    text-decoration: none;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.justify-center {
    justify-content: center;
}
.shrink-0 {
    flex-shrink: 0;
}

.max-w-sm {
    max-width: 30rem;
}

.mx-auto {
    margin-inline: auto;
}

.pt-1 {
    padding-top: 1rem;
}
.pl-0 {
    padding-left: 0;
}
.px-1 {
    padding-inline: 1rem;
}
.py-1 {
    padding-block: 1rem;
}

.gap-1 {
    gap: 1rem;
}

.list-style-none {
    list-style-type: none;
}

.custom-rich p,
.custom-rich ul,
.custom-rich ol,
.custom-rich dl,
.custom-rich h2,
.custom-rich h3,
.custom-rich h4,
.custom-rich h5,
.custom-rich h6,
.custom-rich blockquote {
    padding-block: 0.5rem;
}
.custom-rich hr {
    margin-block: 0.5rem;
}

@media (width >= 48rem) {
    .md\:inline {
        display: inline;
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:px-2 {
        padding-inline: 2rem;
    }
}