html {
    min-height: 100vh;

    body {
        background-color: var(--bg-color);
        display: flex;
        flex-direction: column;
        padding-top: 3.5rem;
        font-family: 'open_sansregular';
        font-weight: 400;
        min-height: 100vh;
        color: var(--font-color);

        &.is-accessible {
            font-family: 'lucioleregular';
        }

        footer.footer {
            margin-top: auto;
            padding: 2rem 0.7rem 1.5rem;
            background-color: var(--footer-color);
        }

        a {
            color: var(--link-color);
            cursor: pointer;

            &:hover {
                color: var(--link-hover-color);
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--font-color);
        }

        h1 {
            margin-top: 2rem;
        }
    }
}

.layout-maxed {
    @include respond-to("small") {
        padding: 0 0.7rem;
    }
}

.is-hidden {
    display: none;
}

:root {
    --default-color: rgb(255, 255, 255);
    --bg-color: rgb(242, 244, 248);
    --font-color: rgb(76, 86, 106);
    --footer-color: rgb(251, 251, 252);
    --link-color: rgb(123, 136, 161);
    --link-hover-color: rgb(76, 86, 106);
    --input-color: rgb(76, 86, 106);
    --input-active-color: rgb(229, 233, 240);
    --navbar-color: rgb(242, 244, 248);

    --primary-bg-color: rgb(136, 192, 208);
    --primary-bg-hl-color: rgb(121, 184, 202);
    --primary-font-color: rgb(59, 66, 82);

    --default-hl-color: #dbdbdb;
    --secondary-color: #485fc7;
    --secondary-hl-color: #3e56c4;
    --danger-color: #d73455;
    --danger-hl-color: #d70933;
    --bg-light-color: #fafafa;
    --disabled-color: #7a7a7a;


    --heading-color: #292922;
}

[data-theme="dark"] {
    --default-color: rgb(76, 86, 106);
    --bg-color: rgb(36, 41, 51);
    --font-color: rgb(236, 239, 244);
    --footer-color: rgb(59, 66, 82);
    --link-color: rgb(171, 185, 207);
    --link-hover-color: rgb(236, 239, 244);
    --input-color: rgb(236, 239, 244);
    --input-active-color: rgb(36, 41, 51);
    --navbar-color: rgb(59, 66, 82);

    --primary-bg-color: rgb(136, 192, 208);
    --primary-bg-hl-color: rgb(121, 184, 202);
    --primary-font-color: rgb(59, 66, 82);
}