:root {
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;
    /** Dark theme primary colors */
    --clr-primary-a0: #6ba993;
    --clr-primary-a10: #7cb29e;
    --clr-primary-a20: #8cbcaa;
    --clr-primary-a30: #9dc5b6;
    --clr-primary-a40: #adcfc2;
    --clr-primary-a50: #bdd8ce;
    /** Dark theme surface colors */
    --clr-surface-a0: #121212;
    --clr-surface-a10: #282828;
    --clr-surface-a20: #3f3f3f;
    --clr-surface-a30: #575757;
    --clr-surface-a40: #717171;
    --clr-surface-a50: #8b8b8b;
    /** Dark theme tonal surface colors */
    --clr-surface-tonal-a0: #1b1f1d;
    --clr-surface-tonal-a10: #303432;
    --clr-surface-tonal-a20: #464a48;
    --clr-surface-tonal-a30: #5e615f;
    --clr-surface-tonal-a40: #777978;
    --clr-surface-tonal-a50: #909391;
}

body {
    color: var(--clr-primary-a50);
    background-color: var(--clr-surface-a0);
    font-family: "Gill Sans", sans-serif;
}

h2 {
    text-align: center;
}

hr {
    border: 1px solid var(--clr-primary-a50);
}

.champion-grid {
    line-height: 0;
    margin: 0 auto;
    text-align: center;
}

.champion-grid > li {
    display: inline-block;
    vertical-align: top;
}

.champion-grid > li > button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    line-height: inherit;
    padding: 0;
    outline: inherit;
}

.champion-grid > li > button > img {
    border: 2px solid;
    border-color: var(--clr-surface-tonal-a20);
}

.champion-grid > li > button:focus > img {
    border-color: var(--clr-surface-tonal-a50);
}

.champion-grid > li.selected > button > img {
    border-color: var(--clr-primary-a0);
}

.champion-grid > li.selected > button:focus > img {
    border-color: var(--clr-primary-a30);
}

.matchup-information {
    text-align: center;
}

.matchup-information > .versus > img {
    border: 2px solid;
}

.matchup-information > .versus > img.ally {
    border-color: cyan;
}

.matchup-information > .versus > img.enemy {
    border-color: red;
}

.matchup-information > p {
    font-size: large;
    padding: 10px;
}

.matchup-information > .versus > span {
    font-size: xx-large;
    font-weight: bold;
}