@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap");
@import url("spacing.css");
@import url("flex.css");
@import url("input.css");
@import url("header.css");
@import url("typography.css");
@import url("button.css");
@import url("colors.css");
@import url("blog.css");

:root {
    --body-font-size: 1.625rem;
    --blog-font-size: 1.5rem;

    --font-family-mono: "Inconsolata", monospace;

    --body-font-color: #333;

    --lime-green: #7fffc5;
    --lime-green-dark: #69e7ae;
    --placeholder-gray: #ccc;
    --gray: #999;

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

    --footer-height: 66px;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-size: var(--body-font-size);
    font-family: var(--font-family-mono);
    font-weight: 300;

    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    color: var(--body-font-color);
    padding-top: calc(1rem + var(--header-height));
    position: relative;
    padding-left: var(--spacer-4);
    padding-right: var(--spacer-4);
    min-height: 100vh;
    padding-bottom: var(--footer-height);
}

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

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

.w-100 {
    width: 100%;
}

footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: var(--spacer-4) var(--spacer-4);
    font-size: 0.8rem;

    align-items: flex-start;
    justify-content: start;
    flex-direction: column;
    gap: var(--spacer-2);
}

.position-relative {
    position: relative;
}

.constrained {
    width: 100%;
    max-width: 780px;
}

.d-block {
    display: block;
}

.bottom-line:after {
    content: "";
    width: 20px;
    position: absolute;
    height: 1px;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid var(--lime-green);
}
.separator {
    display: none;
}

.masonry {
    column-count: 2;
    column-gap: 1rem;
    width: 100%;
    max-width: 1024px;
}

.masonry figure {
    margin: 0;
}
.masonry img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    break-inside: avoid;
    box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 12%);
    min-height: 50px;
}

.numenon-promo {
    border-right: 2px solid var(--lime-green);
}

.numenon-promo:before,
.numenon-promo:after {
    content: "";
    position: absolute;
    width: 60px;
    right: 0;
    border: 1px solid var(--lime-green);
}

.numenon-promo:before {
    top: 0px;
}
.numenon-promo:after {
    bottom: 0px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    :root {
        --body-font-size: 1.625rem;
        --footer-height: 66px;
    }

    body {
        padding-top: calc(1rem + var(--header-height));
    }

    footer {
        align-items: center;
        justify-content: end;
        flex-direction: row;
        height: var(--footer-height);
    }

    .separator {
        display: block;
    }

    .masonry {
        column-count: 3;
        column-gap: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #eee;
    }

    .signatures img,
    .product img {
        filter: invert(1);
    }
}