html, body {
    /* Allows .background-image to get full height also. */
    height: 100%;
}

html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

.large { font-size: 1.2rem; }

.background-image {
    background-image: url(../images/background-922x558.jpg);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    /* Cover stretches the image if the browser's width is too big. The bottom alignment always shows the image's fading. */
    background-size: cover;
    height: 100%;
    max-height: 558px; /* The real size should be the maximum. */
    /* Pushes the div into the background where it should expand to the maximum available size. */
    position: absolute;
    width: 100%;
    z-index: -1;
}

.mt-nav { margin-top: 3.7rem; }

/* https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header#13184714 */

a.bookmark-spacer {
    display: block;
    position: relative;
    top: -4.6rem;
}

.navbar-brand {
    padding-bottom: 0;
    padding-top: 0;
}

.navbar-brand .logo {
    font-size: 1.8rem;
    margin-right: .25rem;
}

.navbar-brand .fas:last-of-type {
    font-size: .66em; /* 66% of parent span.logo */
    margin-left: -.33rem;
    vertical-align: super;
}

.navbar-brand .name { font-size: 1.4rem; }

.captcha {
    margin: .25rem;
    width: 4rem;
}

.captcha:hover {
    background-color: inherit;
    color: #6c757d;
}

@media (max-width: 395px) {
    .background-image {
        background-image: url(../images/background-395x222.jpg);
        max-height: 222px;
    }

    .mt-nav { margin-top: 2.75rem; }

    a.bookmark-spacer { top: -3.7rem; }

    /* Squeeze toogle button (for navigation bar) a little more than Bootstrap did. */
    .navbar-toggler { padding: 0.25rem 0.25rem; }

    /* Less padding than default (especially on the left and right). */
    .navbar { padding: 0.4rem; }

    .navbar-brand .logo { font-size: 1.3rem; }

    .navbar-brand .name { font-size: 1.25rem; }

    /* Half the margin on the end of the navigation title. */
    .navbar-brand { margin-right: 0.5rem; }
}

/*Bootstrap 'lg' breakpoint.*/

@media (min-width: 992px) {
    .background-image {
        background-image: url(../images/background-1920x1080.jpg);
        max-height: 1080px;
    }

    .mt-nav { margin-top: 5.7rem; }

    a.bookmark-spacer { top: -6.7rem; }

    .navbar.fixed-top {
        padding-bottom: .6rem;
        padding-top: .6rem;
    }

    .navbar-brand .logo {
        font-size: 3rem;
        margin-right: .5rem;
    }

    .navbar-brand .name { font-size: 2rem; }
}


.flashing { animation: fadein 3s infinite; }

@keyframes fadein {
    0% { opacity: 0.25; }

    50% { opacity: 1; }

    100% { opacity: 0.25; }
}