emoji {
    width: 6rem;
    font-size: 4rem;
}

body {
    height: 100vh;
    margin: unset;

    align-items: center;
    justify-content: center;
}

b {
    width: 21rem;

    font-size: 4rem;
    font-weight: 200;
}

input {
    font-size: 4rem;
    text-align: center;
    color: var(--gray20);
}

/* Input boxes */

#wl-wins,
#wl-losses,
#wl-average {
    width: 50rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#wl-wins input,
#wl-losses input {
    height: 7rem;
    width: 7rem;
}

#wl-average b {
    width: auto;
}

#wl-average span {
    width: 40rem;
    height: 3rem;

    background-color: gray;
    border-radius: 3rem;
}

@media (max-width: 860px) {
    emoji {
        width: 12vw;
    }

    b {
        width: 42vw;
    }

    emoji,
    b,
    input {
        font-size: 8vw !important;
    }

    #wl-wins,
    #wl-losses,
    #wl-average {
        width: 92vw;
    }

    #wl-wins input,
    #wl-losses input {
        height: 14vw;
        width: 14vw;
    }

    #wl-average span {
        width: 75vw;
        height: 6vw;
        border-radius: 6vw;
    }
}

@media (max-height: 380px) {
    body {
        justify-content: unset;
    }
}