h2,
h3{
    margin-bottom: 3.2rem;
}

h4,
h5,
h6{
    margin-bottom: 0.8rem;
}
h2 {
    font-size: 2.4rem;
    font-weight: 700;
}

h3 {
    font-size: 2.1rem;
    font-weight: 400;
}

h4 {
    font-size: 1.8rem;
    font-weight: 700;
}

h5 {
    font-size: 1.8rem;
    font-weight: 500;
}

h6 {
    font: 1.6rem italic 700 var(--color-brand-teal);
}

main {
    min-height: 50vh;
}


main a:visited {
    color: var(--color-brand-teal);
}

main a:not(.button, .non-inline-link)[href]:hover,
main a:not(.button, .non-inline-link)[href]:active {
    background: var(--color-brand-orange-disabled);
    text-decoration: none;
}

main a:not(.button):visited {
    text-decoration: underline !important;
    color: var(--color-brand-teal);
}

.hidden {
    display: none !important;
}

.visibility-hidden{
    visibility: hidden;
}
.underline{
    text-decoration: underline !important;
}
.highlight-yellow:hover {
    background: var(--color-brand-highlight);
}

.orange-bold {
    color: var(--color-brand-orange);
    font-weight: bold;
}


.breadcrumb-container a:hover,
.side-bar-nav a:hover{
    background: none !important;
    text-decoration: underline !important;
}

/*TODO bandaid fix for weird icon filling*/
.st1{
    fill: var(--color-primary-white) !important;
}