:root {
    --educator: #da5283;
    --educatorLight: #f8dce6;
}

header { border-top: 0.625em solid var(--educator); }
nav, .navigation { background: var(--educator); }

h1 { background: var(--educatorLight); color: var(--educator); border-top: 3px solid var(--educator); }
h2 { color: var(--educator); }
.accordion>h2:first-of-type { border-bottom: 1px solid var(--educator); position: relative; }
.accordion>h2:first-of-type:hover { cursor: pointer; }
.accordion>h2:first-of-type::before { content: ''; position: absolute; height: 1em; width: 1em; top: 0; right: 0; background: url('../assets/purpletriange.svg') no-repeat center center; transform: rotate(180deg); transition: transform 0.3s ease-in-out; }
.accordion.active>h2:first-of-type::before { transform: rotate(0deg); }

.content nav a.is-active, .dialog button, .dialog a { background: var(--educator); }
.content div.information-panel, nav.mobile a.is-active { background: var(--educatorLight); }

.featured { border-top: 3px solid var(--educator); }
footer { border-top: 1.85em solid var(--educatorLight); }

legend { border-bottom: 1ox solid var(--educator); color: var(--educator); }
input, textarea { border: 1px solid var(--educator); }
input[type="checkbox"] { border: 1px solid var(--educator); }
input[type="checkbox"]::before, input[type="radio"]::before { box-shadow: inset 1.6em 1.6em var(--educator); }
input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:checked, input[type="radio"]:focus  { border: 1px solid var(--educator); }
input[type="submit"] { background: var(--educator); }
input[type="submit"]:hover { background: var(--educatorLight); }