::selection,
::-moz-selection {
    background-color: #5c8128;
    color: #FFF;
}

a {
    color:#5c8128;
}

a:hover,
a:active,
a:focus {
    color: #FFF;
    background-color:#5c8128;
}

.dark-mode a {
    color: #f0a002;
}

.dark-mode a:hover,
.dark-mode a:active,
.dark-mode a:focus {
    background-color: #f0a002;
    color: #333;
}
main > header {
    height: 100vh;
}

main > header,
main > header.has-montage > div {
    background-color: #5c8128;
}

main > header.has-montage > div.logos {
    position: absolute;
}

main > header .logo.colour:hover,
main > header .logo.colour:active,
main > header .logo.colour:focus {
    border-bottom: 5px solid #f0a002;
    background-color: transparent;
}

main > header p a:hover,
main > header p a:active,
main > header p a:focus {
    color:  #5c8128;
}

h1,
h2,
h3,
h4,
h5,
h6,
p[data-num]::before,
ol:not([type]) li::before,
.chart.activated .caption,
table caption,
table th,
main > header p em,
dl.side dt,
dl.side.reverse dd,
.id-navigation > ol > li,
.id-navigation a[data-num]::before {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
}

@media all and ( max-width: 640px ){

    .table.list tbody td::before,
    .table.list tbody th::before {
        font-family: 'Work Sans', sans-serif;
        font-weight: 700;
    }

}

main > header {
    display: flex;
    flex-direction: column;
}

main > header  > div {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    transform: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

main > header .logos {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: left;
}


@media all and (min-width: 700px) {
    main > header .logos {
        flex-direction: row;
        gap: 4em;
        align-items: center;
    }
}

main > header .logos::before {
    content: '';
    display: block;
    border: 2px solid #fff;
    align-self: stretch;
}

main > header .logo:first-of-type {
    order: -1;
}

main > header .logo {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

main > header .logo::before {
    background-image: url('../images/southtynesidecouncil/logo.svg');
    background-position: center;
}

main > header.logo-sths {
    position: relative;
    width: 200px;
}

main > header .logo-sths::before {
    content: '';
    display: inline-block;
    overflow: hidden;

    background-image: url('../images/southtynesidehomes/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

@media all and (min-width: 720px) and (min-height: 540px) {
    main > header .logo-sths::before {
        padding-bottom: 41.34%;
        width: 200px;
    }
}

main > header > div.title {
    align-content: center;
    align-self: stretch;
}

footer .copyright::after {
    width: 200px;
    padding-bottom: calc( 115 / 280 * 200px );
    background-image: url('../images/southtynesidehomes/logo-grey.svg');
    background-size: cover;
}

.id-progress li.selected {
    background-color: #5c8128;
}

.dark-mode .id-progress li.selected {
    background-color: #5c8128;
}

/* DARK STYLES */

.dark-mode ::selection,
.dark-mode ::-moz-selection {
    background-color:#5c8128;
    color: #FFF;
}

.menu-open .id-navigation {
    background-color:  #5c8128;
    z-index: 99;
}

.id-navigation ol ol {
    border-left: 5px solid #FFF;
}

.id-navigation a,
.dark-mode .id-navigation a {
    color: #FFF;
}

.id-navigation a:hover,
.id-navigation a:active,
.id-navigation a:focus,
.dark-mode .id-navigation a:hover,
.dark-mode .id-navigation a:active,
.dark-mode .id-navigation a:focus {
    color: #f0a002;
    background-color: #243310;
}

section > header {
    background-color: #5c8128;
    color: #fff;
}

section:first-of-type > header {
    border-top: 5px solid #fff;
}