:root {
    
    --main-colour: #0072b5; /* blue */
    --accent1: #a0daa9; /* green */
    --accent2: #7c568f; /* purple */
    --highlight1: #9bb7d4;  /* light blue */
    --default-text: #333;  /* dark grey */
    
}
html, body {
    font: 16px Arial, sans-serif;
    color: var(--default-text);
}
/* helpers */
.clr-head {
    background-color: var(--main-colour);
    color: #fff;
}
.clr-body {
    background-color: var(--accent1);
    color: #000;
}
.clr-foot {
    background-color: var(--accent2);
    color: #fff;
}
.small-banner {
    background-color: var(--highlight1);
    color: var(--default-text);
    padding: 15px;
 }
.clr-default {
    background-color: #fff;
    color: var(--default-text);
}

.course-tabs {
    background-color: var(--highlight1);
}
.courses[aria-hidden='true'] {
    display: none;
}
.btn, /*.btn-on*/ .btn[aria-selected='false'] {
    border: 3px solid transparent;
}
.btn[aria-selected='true'] {
    border-bottom: 3px solid white;
}
.btn-on {                
    border-bottom: 3px solid white;
}
.btn[aria-selected='false']:hover /*.btn-off:hover*/ {
    background-color: var(--highlight1);
    border: 3px solid var(--main-colour);
    border-bottom: 3px solid var(--highlight1);
    color: var(--default-text);
}
.btn[aria-selected='true']:hover /*.btn-on:hover*/ {
    background-color: var(--highlight1);
    border: 3px solid var(--main-colour);
    border-bottom: 3px solid white;
    color: var(--default-text);
}
img {
    max-width: 20%;
    min-width: 100px;
    width: 300px;
}

h1 {
    font-size: 2.2em;
}
h2 {
    font-size: 2.0em;
}
h3 {
    font-size: 1.7em;
}
h4 {
    padding: 0px 2px;
}

/* 
cerulean #9bb7d4 hi
green ash #a0daa9  a1
french blue #0072b5  main
amethyst orchid #926aa6  a2
*/