:root {
    --black: hsla(0, 0%, 7%, 1);
    --grey: hsla(188, 15%, 79%, 1);
    --blue: hsla(192, 88%, 49%, 1);
    --blue-darker: hsla(232, 88%, 50%, 1);
    --green: hsla(87, 100%, 38%, 1);
    --orange-lighter: hsla(60, 100%, 50%, 1);
    --orange: hsla(43, 100%, 50%, 1);
    --orange-darker: hsla(20, 100%, 50%, 1);
    --red: hsla(0, 89%, 50%, 1);

    --header-background: black;
    --header-link-color: var(--grey);
    --header-link-highlighted: var(--light-gray);
    --footer-background: black;

    --button-cta-color: var(--orange-darker);
    --button-cta-highlighted: black;
    --button-research-color: black;
    --button-research-background: var(--orange);
}

body { background: url("../images/SF0/background-t5rAEBG.avif") no-repeat scroll top black; }

*:focus-visible { box-shadow: 0 0 0 2px var(--red); }

.burger__up { fill: var(--red); }
.burger__mid { fill: var(--green); }
.burger__low { fill: var(--blue-darker); }