body {
    font-family: 'Raleway', sans-serif;
    background-color: #F5F5F5;
}

h1,
h2 {
    text-align: center;
}

.pexeso {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 120px);
    grid-gap: 1em;
    margin: 0 auto;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;

}

.pexeso__card {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.4s cubic-bezier(.25, .8, .25, 1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.pexeso__card--playing {
    background-color: #E53935;
}

.pexeso__card--playing:hover {
    background-color: #C62828;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.pexeso__card--selected {
    background-color: #1E88E5
}

.pexeso__card--selected:hover {
    background-color: #1976D2
}

.pexeso__card--active {
    background-color: #43A047;
}

.pexeso__card--active:hover {
    background-color: #388E3C;
}