/* Styling for the Home page: the decorative hero arrows and the difficulty picker. */

.hero-arrow {
    width: 100%;
    height: 3em;
}

.hero-arrow-up polygon {
    fill: var(--bs-success);
}

.hero-arrow-down polygon {
    fill: var(--bs-danger);
}

.difficulty-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: center;
}