main {
    width: var(--all-width);
    margin: .4rem auto;
    background-color: rgb(46, 46, 46);
    border-radius: .2667rem;
    padding: .4rem;
    color: #fff;
    display: flex;
    flex-direction: column;
}

main h2 {
    font-size: .56rem;
    margin-bottom: .1067rem;
}

main section {
    margin-bottom: .3733rem;
}

.title {
    margin-bottom: 20px;
}

.title p {
    font-size: .4rem;
}

.foodList {
    display: flex;
    font-size: 21px;
    flex-wrap: wrap;
    color: rgb(255, 252, 55);
    font-weight: 700;
    padding: .2667rem 0;
}

.foodList li {
    padding: .2133rem;
    border-radius: .1067rem;
    color: #fff;
    background-color: rgb(133, 133, 133);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.delete {
    color: #fff;
    padding: .2667rem .8rem;
    font-size: 22px;
    background-color: #fff;
    color: #000;
    font-weight: 700;
    border-radius: .2667rem;
}

.addFoods form {
    width: var(--searchBar);
    display: flex;
}

.addFoods input {
    flex: 1;
    height: var(--button);
    padding: 0 .2667rem;
    font-size: 15px;
    border-radius: .2667rem 0 0 .2667rem;
}

.addFoods button {
    padding: 0 .2667rem;
    color: #000;
    background-color: #fff;
    border-radius: 0 .2667rem .2667rem 0;
    font-size: .4rem;
    font-weight: bold;
    border-left: 1px solid #00000025;
}

.count input {
    width: 2.6667rem;
    padding: .2667rem;
    height: var(--button);
    font-size: .4rem;
}

.success {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.start {
    width: 100%;
    background-color: #000;
    padding: .5333rem;
    color: #fff;
    border-radius: .4rem;
    font-size: .8rem;
    margin-bottom: 10px;
}

.ok {
    flex: 1;
    border-radius: .5333rem;
    background-color: #00000057;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7467rem;
    border: 1px dashed gray;
}

@media screen and (min-width:770px) {
    .foodList li {
        width: calc((100% - 2.88rem) / 10);
        margin-right: .32rem;
        margin-bottom: .32rem;
    }

    .foodList li:nth-of-type(10n) {
        margin-right: 0;
    }
}

@media screen and (max-width:769px) {
    .foodList li {
        width: calc((100% - .8rem) / 4);
        margin-right: .2667rem;
        margin-bottom: .2667rem;
        font-size: .4rem;
    }

    .foodList li:nth-of-type(4n) {
        margin-right: 0;
    }

    .ok {
        min-height: 5.8667rem;
    }
}