:root {
    --pink-jinx: hsla(318, 87%, 57%, 1);
    --orange-lighter: hsla(31, 100%, 64%, 1);
    --orange: hsla(24, 100%, 50%, 1);
    --blue-braum: hsla(209, 65%, 83%, 1);
    --blue-yasuo: hsla(208, 49%, 59%, 1);
    --purple-ahri: hsla(293, 97%, 85%, 1);
    --green: hsla(120, 39%, 54%, 1);
    --green-ekko: hsla(161, 73%, 70%, 1);
    --red-darius: hsla(0, 82%, 68%, 1);
    --yellow: hsla(77, 89%, 69%, 1);
    --yellow-illaoi: hsla(45, 77%, 64%, 1);
    --grey: hsla(210, 7%, 11%, 1);

    --header-background: hsla(0, 0%, 7%, 1);
    --header-link-color: white;
    --header-link-highlighted: var(--light-gray);
    --footer-background: hsla(0, 0%, 7%, 1);

    --button-cta-color: var(--yellow);
    --button-cta-highlighted: black;
    --button-research-color: black;
    --button-research-background: var(--yellow);

    --versus-sign: var(--pink-jinx);

    --color-table-even:     var(--grey);
    --color-table-odd:      var(--header-background);
    --color-table-hover:    hsla(210, 10%, 30%, 1);
}

*:focus { box-shadow: 0 0 0 2px var(--yellow); }
*:focus-visible { outline: 1px solid var(--yellow); }

body { background-color: var(--grey); }

.burger__up, .burger__low { fill: var(--yellow); }
.burger__mid { fill: var(--pink-jinx); }