/* Table of Contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1.  Global Styles
2.  Layout
3.  Special Templates
4.  Site Header
5.  Site Navigation
6.  Post Feed
7.  Single Post
  7.1. Subscribe Form
  7.2. Post Footer
     7.2.1 Single Author Byline
     7.2.2 Multiple Author Byline
  7.3. Comments
  7.4. Related Posts
  7.5. Floating Header
  7.6. Koenig Styles
8.  Author Template
9.  Error Template
10. Subscribe Overlay
11. Site Footer

*/

/* 1. Global - Set up the things
/* ---------------------------------------------------------- */

body {
    background: #f4f8fb;
}

.img {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    border-radius: 100%;
}

/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Full width page blocks */

/* Centered content container blocks */

/* Usage:

<div class="outer">
    <div class="inner">
        Centered content
    </div>
</div>

*/

/* 3. Special Template Styles
/* ---------------------------------------------------------- */

@media (min-width: 900px) {
    /* Bast */
    /* .home-template .post-feed, */
    /* Bast */
    /*
    .home-template .site-nav {
        position: relative;
        top: -70px;
    }
    */
}

/* 4. Site Header
/* ---------------------------------------------------------- */

/* Baguette: Was simplified as its only role is now to be a dark container for
the Bootstrap menu */

.site-header {
    position: relative;
    padding: 12px 4vw;
    color: #fff;
    background: #090a0b no-repeat center center;
}

/* 5. Site Navigation
/* ---------------------------------------------------------- */

/* Baguette: Was simplified as its only role is now to be a dark container for
the Bootstrap menu */

.bootstrap .navbar {
    max-width: 1040px;
    margin: auto;
    padding-right: 0;
    padding-left: 0;
}

.bootstrap .navbar .navbar-brand {
    margin-right: 24px;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1em;
    font-weight: bold;
    letter-spacing: -0.5px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.bootstrap .navbar a.nav-item {
    text-transform: uppercase;
    margin-right: 8px;
    color: #fff !important;
    opacity: 0.7 !important;
    font-size: 1.3rem;
}

.bootstrap .navbar a.nav-item:hover {
    opacity: 1 !important;
}

.bootstrap .navbar a.btn {
    font-size: inherit;
    padding-right: 20px;
    padding-left: 20px;
}

/* 6. Post Feed
/* ---------------------------------------------------------- */

/* Special Styling for home page grid (below):

The first post in the list is styled to be bigger than the others and take over
the full width of the grid to give it more emphasis. Wrapped in a media query to
make sure this only happens on large viewports / desktop-ish devices.

 */

/*
@media (min-width: 795px) {
    .post-card-large {
        flex: 1 1 100%;
        flex-direction: row;
    }

    .post-card-large .post-card-image-link {
        position: relative;
        flex: 1 1 auto;
        border-radius: 5px 0 0 5px;
    }

    .post-card-large .post-card-image {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .post-card-large .post-card-content {
        flex: 0 1 357px;
    }

    .post-card-large h2 {
        font-size: 2.6rem;
    }

    .post-card-large p {
        font-size: 1.8rem;
        line-height: 1.55em;
    }

    .post-card-large .post-card-content-link {
        padding: 30px 40px 0;
    }

    .post-card-large .post-card-meta {
        padding: 0 40px 30px;
    }
}
*/

/* Adjust some margins for smaller screens */

/* 7. Single Post
/* ---------------------------------------------------------- */
/* ^ Required to make .post-full-content:before/after z-index stacking work */

/* Full bleed images (#full)
Super neat trick courtesy of @JoelDrapper

Usage (In Ghost edtior):

![img](/some/image.jpg#full)

*/

/* Image captions

Usage (In Ghost editor):

![img](/some/image.jpg)
<small>Your image caption</small>

*/

/* Override third party iframe styles */

/* Some grouped styles for smaller viewports */

/* Tables */

/* 7.1. Subscribe Form
/* ---------------------------------------------------------- */

/* Baguette addition:
   On large screens, display a newsletter background visual and align the text
   to the left */

/* Baguette addition:
   On large screens, align the form to the left, so that it matches the text */

/* Baguette addition:
   Make the subscribe button match the - famous - Baguette style */

/* Baguette addition: hover style */

/* 7.2. Post Footer
/* ---------------------------------------------------------- */

/* 7.2.1 Single Author Byline
/* ---------------------------------------------------------- */

/* 7.2.2 Multiple Author Byline
/* ---------------------------------------------------------- */

/* 7.3. Comments
/* ---------------------------------------------------------- */

/* 7.4. Related posts
/* ---------------------------------------------------------- */

/* 7.5. Floating Header
/* ---------------------------------------------------------- */

.progress {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    border: none;
    color: var(--blue);
    background: transparent;

    appearance: none;
}

.progress::-webkit-progress-bar {
    background-color: transparent;
}

.progress::-webkit-progress-value {
    background-color: var(--blue);
}

.progress::-moz-progress-bar {
    background-color: var(--blue);
}

/* 7.6. Koenig Styles
/* ---------------------------------------------------------- */

/* Preventing full-width image overlap with post image.  */

/* keep existing <pre> styles for code cards with captions */

/* 8. Author Template
/* ---------------------------------------------------------- */

/* 9. Error Template
/* ---------------------------------------------------------- */

/* 10. Subscribe Overlay
/* ---------------------------------------------------------- */

/* Baguette addition:
   On large screens, display a newsletter background visual and increase left
   padding */

/* Baguette addition:
   On large screens, increase top margin */

/* 11. Site Footer
/* ---------------------------------------------------------- */