style.css

*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%}body{background-color:#f7f7f7}.container{width:100%;height:100vh;overflow-y:auto;margin:0px auto;max-width:800px;padding:20px}.container .search-con{height:50px;margin-top:calc(50vh - 100px);min-width:500px;max-width:600px;position:sticky;top:40px;border-radius:8px;background-color:#fff;transition:all .3s ease;line-height:50px;box-shadow:-2px 2px 5px rgba(0,0,0,.02),-5px 10px 10px rgba(0,0,0,.1);display:flex}.container .search-con:hover{box-shadow:-2px 2px 5px rgba(0,0,0,.02),-5px 10px 30px rgba(0,0,0,.1)}.container .search-con input{flex-grow:1;border:none;background-color:transparent;padding-left:20px;font-size:1.2rem;position:relative}.container .search-con input:focus{outline:none}.container .search-con i{width:50px;text-align:center;line-height:inherit}.container .search-con label{transition:all .3s ease;width:100%;background-color:#fff;border-radius:8px;position:absolute;top:calc(100% + 7px);box-shadow:-10px 10px 20px rgba(0,0,0,.1),0px 20px 40px rgba(0,0,0,.1);visibility:hidden;overflow-x:hidden;overflow-y:hidden;opacity:0;height:0}.container .search-con label:hover{overflow-y:auto}.container .search-con input:focus~label:not(.hide),.container .search-con label.show{visibility:visible;opacity:1;height:500px}.container #main-ls{margin-top:calc(50px);list-style:none}.container #main-ls li a{color:#273746;text-decoration:none}.container #main-ls li:hover a{color:#f39c12;font-weight:bold}.search-match{background-color:#f39c12;color:#fff;font-weight:bold;border-radius:2px}#search-res{padding:20px}#search-res ul{list-style:none}#search-res ul li{margin:0px;height:40px;line-height:40px;padding:0 10px;border-radius:8px}#search-res ul li a{text-decoration:none;width:100%;color:#000}#search-res ul li:hover{background-color:rgba(0,0,0,.1)}#mask{transition:all .3s ease;position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.1);left:0;top:0;z-index:0;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);visibility:hidden;opacity:0}#mask.show{visibility:visible;opacity:1}