@media screen and (max-width:768px) {
    #container {
        display: inline-block;
        width: 98vw;
        margin: 0 auto;
         margin-top: 50px;
    }
    nav {
        height: auto;
        margin-top: 50px;
        display: none;
    }
    #logo-container {
        margin-right: 0;
        vertical-align: middle;
    }
    #search {
        height: 50px;
        width: calc(100vw - 200px);
        display: inline-block;
        margin: 0 auto;
    }
    #search_box {
        width: 75%;

    }
    #ham {
        cursor: pointer;
        position: absolute;
        right: 8px;
        top: 8px;
        padding: 1px;
        display: inline-block;
        border: 1px #ddd solid;
        border-radius: 4px;
    }
    #rect1 {
        border-radius: 15px;
        margin: 5px;
        height: 2px;
        width: 25px;
        background-color: #ddd;
    }
    #rect2 {
        border-radius: 15px;
        margin: 5px;
        height: 2px;
        width: 25px;
        background-color: #ddd;
    }
    #rect3 {
        border-radius: 15px;
        margin: 5px;
        height: 2px;
        width: 25px;
        background-color: #ddd;
    }
    nav {
        position: fixed;
        display: none;
        z-index: 1;
    }
    #nav {
        padding: 0;
        display: block;
    }
    #result {
        width: 95%;
        margin: 0 auto;
    }
    li {
        width: 100vw;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.85);
        display: inline-block;
        text-align: center;
        font-size: 18px;
        border-top: 1px #ddd solid;
        padding: 5px 0;
        background-color: hsl(276, 53%, 40%);
        text-align: center;
        list-style-type: none;
    }
    .card {
        vertical-align: top;
        margin: 2%;
        width: 29%;
        display: inline-block;
    }
    #cat_scroll , #sch_scroll{
        width: 100%;
        overflow: auto;
    }
    .cat,
    .sch {
        display: none;
        background-color: hsl(276, 53%, 30%);
        width: 100%;
    }
    .card,
    .pan {
        margin: 3% auto;
        display: block;
        width: 90%;
        
    }
    #top {
        display: none;
    }
}