@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("spacing.css");
@import url("flex.css");
@import url("typography.css");
@import url("input.css");
@import url("button.css");
@import url("colors.css");
@import url("header.css");
@import url("toc.css");
@import url("sidebar.css");
@import url("subscribe.css");
@import url("blog.css");
@import url("features.css");
@import url("pricing.css");
@import url("faq.css");
@import url("howto.css");

:root {
    --body-font-size: 0.875rem;
    --paragraph-font-size: 1.025rem;
    --smallest-font-size: 0.725rem;
    --smaller-font-size: 0.75rem;
    --small-font-size: 0.8125rem;

    --font-family-sans: "DM Sans", sans-serif;
    --font-family-serif: "DM Serif Text", serif;
    --font-family-mono: "DM Mono", monospace;

    --body-font-color: #333;

    --gray: #99a1b7;
    --sidebar-gray: #586385;
    --sidebar-gray-light: #6d799d;
    --gray-bg: #ccc;
    --danger: #ff4b4b;
    --danger-light: #fcefef;
    --danger-hover: #da3232;
    --primary-color: #5d83f0;
    --primary-color-light: #e2eaff;
    --primary-color-lighter: #eef2fb;
    --primary-color-hover: #496acb;
    --primary-color-pastel: #e1e7f8;

    --success: #5f9f27;
    --success-light: #eff8e7;
    --placeholder-gray: #c5cdde;
    --lightest-gray: #f5f5f5;

    --link-color: var(--primary-color);
    --link-color-hover: var(--primary-color-hover);

    --sidebar-width: 256px;
    --box-size: 160px;
    --entry-sidebar-width: 240px;
    --editor-width: 720px;
    --content-width: 680px;
    --wrapper-width: 1280px;
    --content-width-small: 580px;

    --box-box-shadow: 2px 2px 4px #eee;
    --primary-box-shadow: 0px 4px 6px 0px rgba(12, 51, 162, 0.2);
    --card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);

    --box-shadow-transition: box-shadow 0.3s ease 0s;

    --wrapper-gap: var(--spacer-5);
    --header-vpadding: var(--spacer-4);
    --header-height: calc(2.4rem + (2 * var(--header-vpadding)));
    --footer-height: 55px;
    --footer-height-mobile: 77px;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: var(--body-font-size);
    font-family: var(--font-family-sans);
    color: var(--body-font-color);
    font-weight: 300;
    padding-top: calc(var(--header-height));
    position: relative;
    padding-left: var(--spacer-4);
    padding-right: var(--spacer-4);
    min-height: 100vh;
    padding-bottom: var(--footer-height-mobile);
}

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

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

.w-100 {
    width: 100%;
}
.maxw-920 {
    max-width: 920px;
}
.maxw-1280 {
    max-width: 1280px;
}

.w-auto {
    width: auto;
}

.position-relative {
    position: relative;
}

.d-block {
    display: block;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}

.border-dashed-2 {
    border-width: 2px;
    border-style: dashed;
}

.border-handdrawn {
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
.border-handdrawn-alt {
    border-radius: 75px 15px 255px 25px/25px 255px 35px 225px;
}

.bg-primary-pastel {
    background-color: var(--primary-color-pastel);
}
.border-primary-pastel {
    border-color: var(--primary-color-pastel);
}

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

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer {
    height: var(--footer-height-mobile);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: var(--spacer-3) var(--spacer-3);
    gap: var(--spacer-1);
    flex-direction: column;
}

@media screen and (min-width: 1200px) {
    body {
        padding-left: var(--spacer-5);
        padding-right: var(--spacer-5);
        padding-bottom: var(--footer-height);
    }

    .content {
        min-width: none;
        width: var(--content-width);
    }

    footer {
        padding: var(--spacer-3) var(--spacer-4);
        flex-direction: row;
        height: var(--footer-height);
    }
}