:root {
    --hoverColor: #b1d9bc;
    --hoverBorderColor: #261e14;
}

label {
    height: 100%;
}

.card:hover {
    cursor: pointer;
}

.card-input-element:checked + .card {
    background-color: var(--hoverColor);
    border-color: var(--hoverBorderColor);
}

.skipMeal:checked + .card {
    background-color: #ec9b85;
    border-color: var(--hoverBorderColor);
}

#alert {
    display: none;
}

.skipMeal {
    height: fit-content;
}

@media screen and (max-width: 1200px) {
    .selection-container {
        padding-bottom: 1rem;
        display: flex;
        overflow-x: scroll;
    }

    .selection-container .card-item {
        margin-right: 0.75rem;
    }

    .selection-container .card-item:last-child {
        margin-right: 0;
    }
}

@media screen and (min-width: 1201px) {
    .selection-container .card-item {
        margin-bottom: 2rem;
    }

    .card-container .card-box {
        margin-bottom: 1rem;
    }

    .card-container .card-box:last-child {
        margin-bottom: 0rem;
    }

    .selection-container .card-item:last-child {
        margin-bottom: 0;
    }
}

.card {
    width: 240px;
}

.card-container {
    overflow-x: auto;
}

.skip-card {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 240px;
    height: 280px;
}

.card-box{
    padding: 4px 4px;
}

#ingredients-table th {
    font-size: 1.25rem;
    background-color: #b1d9bc;
    border-color: #b1d9bc;
    border: none;
}

tr:nth-child(odd){
    background-color: #eee;
}

td:nth-child(odd){
    text-align: right;
}