:root {
    --black: hsla(0, 0%, 0%, 1);
    --grey: hsla(188, 15%, 79%, 1);
    --blue: hsla(192, 88%, 49%, 1);
    --blue-darker: hsla(242, 86%, 23%, 1);
    --green: hsla(87, 100%, 38%, 1);
    --orange-lighter: hsla(60, 100%, 50%, 1);
    --orange: hsla(35, 100%, 47%, 1);
    --orange-darker: hsla(20, 100%, 50%, 1);
    --red: hsla(1, 100%, 44%, 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: linear-gradient(45deg, var(--blue-darker) 75%, var(--blue) 100%); }

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

.burger__up { fill: var(--orange-lighter); }
.burger__mid { fill: var(--orange); }
.burger__low { fill: var(--red); }

.character__image { top: 0 !important; }