:root{
    /* remove tint from neutral colours */
    --tint: 0%;

    /* Change footer background to a neutral colour */
    --footer-bg: var(--grey-800);
}

/* restrict height of logo */
header .logo-link{
    background: #fff;
    border-radius: .5rem;
    display: block;
    padding: .25rem;
    margin: .5rem 0;

    img{
        width: auto;
        max-height: 100px;
        border-radius: .5rem;
    }
}

/* make hero background neutral */
.hero{
    background-image: none;
    background-color: var(--grey-900);
}

/* change borders on home intro */
#intro .home-feature-grid .feature-item:before{
    border-top: 3px solid var(--theme-500);
}

/* remove ladder graphics */
.band .ladder{
    display: none;
}

/* make gradient neutral */
.band.quote-band{
    background: linear-gradient(180deg, var(--theme-500) 0%, var(--grey-900) 94%);
}

/* remove graphic from headings */
.page-title h1 span {
    background: none;
    padding-left: 0;
}

/* change article hover state, headings and no-image */
.article-grid a:hover{
    background: var(--theme-500);
}

.article-grid .holder .article-title h2{
    color: var(--theme-500);
}

.articles article .article-head .date i{
    color: var(--grey-300);
}

.article-grid .holder picture{
    background-image: url("/media/no-image-sub.jpg");
}



/* remove login aside image and replace with --theme-colour */
.login-aside[style]{
    background-image: none!important;
    background: linear-gradient(180deg, var(--theme-500) 0%, var(--grey-900) 94%);
}

.nav-mobile .nav li.active a{
    color: var(--theme-2-500);
}

@media (prefers-color-scheme: dark) {
    .hero{
        background: linear-gradient(180deg, var(--black) 0%, var(--grey-900) 100%);
    }
}