$color-tiny: #dbd3d8;
$color-small: #fac748;
$color-medium: #87d68d;
$color-large: #27abd6;
$color-xlarge: #e18335;
$color-2xlarge: #db4c40;
$color-3xlarge: #8d6a9f;
$dotted-border-color: #e5e7e6;

body {
    background: #0f2a3d;
    font-family: 'Public Sans', sans-serif; // Aquila font
    padding: 24px;
}

.docs-inverse-container {
    background: #e5e7e6;
    padding: 24px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #0f2a3d;
    }
}

// GRID STYLES
.docs-grid-colored-grid {
    @media only screen and (min-width: 0) and (max-width: 319px) {
        background-color: darken($color-tiny, 40%);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background-color: darken($color-small, 40%);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background-color: darken($color-medium, 40%);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background-color: darken($color-large, 30%);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background-color: darken($color-xlarge, 30%);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background-color: darken($color-2xlarge, 40%);
    }

    @media only screen and (min-width: 1760px) {
        background-color: darken($color-3xlarge, 40%);
    }
}

.docs-grid-colored-col {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;

    @media only screen and (min-width: 0) and (max-width: 319px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-tiny 0%, $color-tiny 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-small 0%, $color-small 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-medium 0%, $color-medium 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-large 0%, $color-large 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-xlarge 0%, $color-xlarge 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-2xlarge 0%, $color-2xlarge 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    @media only screen and (min-width: 1760px) {
        background-image: linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%), linear-gradient(to bottom, $color-3xlarge 0%, $color-3xlarge 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted $dotted-border-color;
    }

    outline-offset: -1px;
}

.docs-grid-colored-offset {
    @media only screen and (min-width: 0) and (max-width: 319px) {
        background: linear-gradient(to right, darken($color-tiny, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background: linear-gradient(to right, darken($color-small, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background: linear-gradient(to right, darken($color-medium, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background: linear-gradient(to right, darken($color-large, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background: linear-gradient(to right, darken($color-xlarge, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background: linear-gradient(to right, darken($color-2xlarge, 20%) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1760px) {
        background: linear-gradient(to right, darken($color-3xlarge, 20%) 50%, transparent 50%);
    }
}

.docs-grid-text-tiny {
    font-weight: 700;
    color: $color-tiny;
}

.docs-grid-text-small {
    font-weight: 700;
    color: $color-small;
}

.docs-grid-text-medium {
    font-weight: 700;
    color: $color-medium;
}

.docs-grid-text-large {
    font-weight: 700;
    color: $color-large;
}

.docs-grid-text-xlarge {
    font-weight: 700;
    color: $color-xlarge;
}

.docs-grid-text-2xlarge {
    font-weight: 700;
    color: $color-2xlarge;
}

.docs-grid-text-3xlarge {
    font-weight: 700;
    color: $color-3xlarge;
}
