@font-face {
    font-family: listicons;
    src: url("https://files.datathistle.com/assets/fonts/listicons.eot?20170224");
    src: url("https://files.datathistle.com/assets/fonts/listicons.eot?20170224#iefix") format("embedded-opentype"), url("https://files.datathistle.com/assets/fonts/listicons.ttf?20170224") format("truetype"), url("https://files.datathistle.com/assets/fonts/listicons.woff?20170224") format("woff"), url("https://files.datathistle.com/assets/fonts/listicons.woff2?20170224") format("woff2"), url("https://files.datathistle.com/assets/fonts/listicons.svg?20170224#listicons") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: robotoregular;
    src: url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.eot?20170224");
    src: url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.eot?20170224#iefix") format("embedded-opentype"), url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.woff2?20170224") format("woff2"), url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.woff?20170224") format("woff"), url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.ttf?20170224") format("truetype"), url("https://files.datathistle.com/assets/fonts/roboto-regular-webfont.svg?20170224#robotoregular") format("svg");
    font-weight:400;
    font-style:normal;
    font-display: swap;
}
@font-face {
    font-family: glegooregular;
    src: url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.eot?20170224");
    src: url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.eot?20170224#iefix") format("embedded-opentype"), url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.woff2?20170224") format("woff2"), url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.woff?20170224") format("woff"), url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.ttf?20170224") format("truetype"), url("https://files.datathistle.com/assets/fonts/glegoo-regular-webfont.svg?20170224#glegooregular") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
    box-sizing: border-box;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited,
.nav-pills .nav-link.active {
    background-color: #83be94 !important;
    border-color: #83be94 !important;
}
.btn-secondary {
    background-color: #1e5673 !important;
}
.nav-link {
    color: #83be94 !important;
}
.nav-link.active {
    color: #fff !important;
}

.modal-header {
    background-color: #1e5673;
}
.modal-title {
    color: #d4d6e0;
}

.nav-tabs {
    border-bottom: 1px solid #ccc !important;

    .nav-item {
        background: #f0f0f0 !important;

        button {
           background: #f0f0f0 !important;
           color: #83be94 !important;
           border-color: #ccc !important;

           &:hover {
                background: #ddd !important;
           }

           &.active {
                background: #fff !important;
                border-bottom-color: #fff !important;
           }
        }
    }
}
.tab-content,
.code-output {
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    margin-bottom: 2rem;
    max-width: 95vw;

    pre {
        background: #fff !important;
        margin: 0 !important;
    }
}
.code-output {
    border-top: 1px solid #ccc;
}

@media screen and (min-width: 576px) {
    max-width: none;
}

.journey h2 {
    min-height: 7.5rem;
}
@media screen and (min-width: 768px) {
    .journey h2 {
        min-height: 6rem;
    }
}
@media screen and (min-width: 992px) {
    .journey h2 {
        min-height: auto;
    }
}

body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #f0f0f0;

    & > header {
        background-color: #34394a;
    }

    & > footer,
    & > footer + aside {
        color: #d4d6e0;
        background-color: #34394a;
        font-family: robotoregular, arial, sans-serif;
        font-size: 0.8rem;
        letter-spacing: .015em;

        ul {
            list-style: none;
            margin: 0.5rem 0;
            padding: 0 0 0.5rem 0;

            li {
                margin: 0 0 0.5rem 0;
            }

            h3 {
                font-family: glegooregular, georgia, serif;
                font-size: 1rem;
                font-weight: 400;
                margin: 0.5rem 0;
            }
        }

        a,
        a:visited,
        a:link {
            color: #d4d6e0;
            text-decoration: none;
        }
        .current > a,
        a:active,
        a:hover {
            color: #83be94;
        }

        & > div {
            padding: 1rem 2rem;

            @media screen and (min-width: 1280px) {
                margin: 0 auto;
                width: 1200px;
            }
        }
    }

    & > footer {
        & > div {
            & > aside {
                text-align: center;

                svg {
                    display: block;
                    margin: 1rem auto;
                }
            }

            & > div {
                & > ul {
                    border-top: 1px solid rgba(191, 215, 189, .25);
                }

                @media screen and (min-width: 600px) {
                    display: flex;
                    gap: 2rem;
                    flex-wrap: wrap;

                    & > ul {
                        flex: calc(50% - 2rem);
                    }
                }

                @media screen and (min-width: 960px) {
                    & > ul {
                        flex: 1;
                    }
                }
            }
        }
    }

    & > footer + aside {
        background-color: #3a4053;
        background-image: linear-gradient(180deg, #3a4053 5%, #34394a 80%);
        font-size: 0.8rem;

        & > div {
            padding: 0 2rem;
        }

        ul {
            display: flex;
            padding: 0;

            li {
                margin-right: 1rem;
            }
        }
    }
}