/* Google Font */
.lato-thin {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lato-black {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.lato-thin-italic {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.lato-light-italic {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.lato-regular-italic {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.lato-bold-italic {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.lato-black-italic {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* Garruk Army rules */

.garruk-name {
    display: inline-block;
    width: 300px;
}

#game-container {
    display: none;
}

.garruk-army {
    display: none;
}

#help-rules {
    display: none;
}

#game-board {
    margin: 10px;
    width: 100%;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.card, .garruk-army {
    width: 300px;
    flex: 0 0 calc(25% - 10px);
    min-height: 50px;
    margin: 5px;
}