#background-container {
    background: $background;
}

#header {
    width: 100%;
    background: $warning;
    border: thick $warning-darken-1;
    padding: 0 0;
}

#header-components {
    width: auto;
    height: auto;
 }
    
#search-input {
    width: 50;
}

#recipe-list {
    layout: grid;
    grid-size: 3;
    grid-gutter: 1;
    grid-rows: 15;
    margin: 1 0;

}

RecipeCard {
    height: 100%;
    width: 100%;
    border: thick $accent;
    background: $primary-background;
    margin: 0 1;
}

.invisible {
    visibility: hidden;
}


.recipecard-label {
    text-style: bold italic underline;
    padding: 0 0 1 1;
}

.rule-color {
    color: $accent;
}

.card {
    padding: 0 2;
}

.recipe-highlighted {
    background: $primary-background-lighten-2;
}