akibisuto-stylus 0.1.10

$display__max: 102.4rem;
$display__max--pixel: 1024px;

:root {
    --var-base: 230;

    --var-blue: 200;
    --var-green: 110;
    --var-purple: 262;
    --var-red: 12;
    --var-yellow: 50;

    --color-white-100: hsl(var(--var-base), 10%, 50%);
    --color-white-200: hsl(var(--var-base), 10%, 60%);
    --color-white-300: hsl(var(--var-base), 10%, 70%);
    --color-white-400: hsl(var(--var-base), 10%, 80%);
    --color-white-500: hsl(var(--var-base), 10%, 90%);

    --color-gray-100: hsl(var(--var-base), 10%, 10%);
    --color-gray-200: hsl(var(--var-base), 10%, 15%);
    --color-gray-300: hsl(var(--var-base), 10%, 20%);
    --color-gray-400: hsl(var(--var-base), 10%, 25%);
    --color-gray-500: hsl(var(--var-base), 10%, 30%);

    --color-blue-100: hsl(var(--var-blue), 50%, 50%);
    --color-blue-200: hsl(var(--var-blue), 50%, 60%);
    --color-blue-300: hsl(var(--var-blue), 50%, 70%);

    --color-green-100: hsl(var(--var-green), 40%, 45%);
    --color-green-200: hsl(var(--var-green), 40%, 55%);
    --color-green-300: hsl(var(--var-green), 40%, 65%);

    --color-purple-100: hsl(var(--var-purple), 25%, 60%);
    --color-purple-200: hsl(var(--var-purple), 25%, 70%);
    --color-purple-300: hsl(var(--var-purple), 25%, 80%);

    --color-red-100: hsl(var(--var-red), 60%, 60%);
    --color-red-200: hsl(var(--var-red), 60%, 70%);
    --color-red-300: hsl(var(--var-red), 60%, 80%);

    --color-yellow-100: hsl(var(--var-yellow), 50%, 60%);
    --color-yellow-200: hsl(var(--var-yellow), 50%, 65%);
    --color-yellow-300: hsl(var(--var-yellow), 50%, 70%);
}

@import "font";

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    align-items: center;
    background: var(--color-gray-100);
    color: var(--color-white-300);
    display: flex;
    line-height: 1.2rem;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 1.4rem;
    justify-content: center;
    margin: 0;
    min-height: 90vh;
    padding: 0;
}

// body :not(.exclude) {
//     -webkit-filter: grayscale(100%);
//     -moz-filter: grayscale(100%);
//     filter: grayscale(100%);
// }

a {
    &:link,
    &:visited {
        text-decoration: none;
        color: var(--color-blue-300);
    }
    &:hover {
        text-decoration: underline;
    }
    &:active {
        color: var(--color-blue-200);
    }
}

hr {
    background: var(--color-gray-300);
    border: none;
    box-shadow: none;
    height: 0.1rem;
    margin: 1rem 0;
}

main {
    background: var(--color-gray-200);
    padding: 0.5rem 1rem;
    min-width: 25rem;
}

p {
    font-size: 1.3rem;
    line-height: 1.8rem;
    margin: 1rem 0;
}

#container {
    margin: auto;
    max-width: $display__max;
    min-width: 20rem;
    padding: 0;

    @media all and (min-width: $display__max--pixel) {
        padding: 1rem 0;
    }
}

@import "button";
@import "card";
@import "grid";
@import "helpers";
@import "input";
@import "label";
@import "media_object";
@import "navigation";
@import "pagination";
@import "progress";
@import "tile";
@import "tooltip";