#meal-wrapper {
    position: fixed;
    bottom: 5%;
    left: 3%;

    display: grid;
    grid-auto-flow: row;
    gap: 20px;
}

#meal-wrapper button {
    width: 100px;
    height: 100px;

    background-color: antiquewhite;
    border: 3px solid var(--style);

    border-radius: 50px;
}

#meal-wrapper button img {
    width: 100%;
    height: 100%;
}

#meal-wrapper:not(:hover) > *:not(:last-child) {
    display: none;
}

@media only screen and (max-width: 800px) {
    #general-dice-throw-wrapper .d6 {
        width: 50px;
    }
}

#ingredient-menu,
#feast-menu,
#meal-menu {
    
    position: absolute;
    width: 60%;
    height: max-content;
    min-width: fit-content;

    display: grid;
    justify-content: center;

    text-align: center;
    top: 100px;
    bottom: 0;
    margin: 20px;
    margin-top: 0;
}
#meal-menu {
    top: 50px;
    bottom: 0;
}

#meal-menu input {
    height: 100%;
    width: 150px;
}
#meal-menu div {
    vertical-align: top;
}

#ingredient-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.picked-ingredient-list,
.ingredient-list:not(#main-ingredient-list) {
    max-width: 400px;
    min-width: 400px;
    height: 250px;
}

#ingredient-list-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

#ingredient-list-parent .ingredient-list,
#snack-list {    
    width: 100%;
}

#meal-name-wrapper {
    margin: 10px;
    gap: 10px;
}

.eat-button {
    position: absolute;
    right: 5px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

#meal-name {
    font-size: xx-large;
}
li#main-ingredient-list > .list-element {
    padding-right: 100px;
}

@media only screen and (max-width: 1500px) {
}

@media only screen and (max-width: 800px) {
    #ingredient-list-parent {
        grid-template-columns: 1fr;
    }
    .picked-ingredient-list,
    .ingredient-list:not(#main-ingredient-list) {
        max-width: 300px;
        min-width: 300px;
        height: 250px;
    }
}

.scroll {
    overflow-y: scroll;
}