:root{
    --main-color:#1f1f1f;
    --sub-color:#fee101;
    --point-color:#ffff55;
}

/* wrap */
.wrap {display:table;width:100%;height:calc(100vh - 103px);background:var(--sub-color);}
.content {display:table;width:100%;height:100%;margin:0 auto;max-width:650px;padding:0 20px;box-sizing:border-box}
.search-wrap {display:table-cell;vertical-align:middle}
.search {margin:40px 0;text-align:center}

/* btn */
.btn {width:80px;line-height:40px;padding:0 10px;border-radius:10px;box-sizing:border-box;transition:0.3s;vertical-align:bottom}
.btn-search {background:var(--main-color);color:var(--sub-color);font-weight:bold;border:2px solid rgba(0,0,0,0)}
.btn:hover {background:var(--point-color);color:var(--main-color);border-color:var(--main-color)}

/* input */
#searchText {width:calc(100% - 100px);line-height:50px;border-bottom:1px solid #000;background:none}

/* header */
.header {border-bottom:2px solid #fff;background:var(--main-color);height:80px;color:var(--sub-color)}
.title {margin-left:30px;line-height:80px;font-size:40px;text-align:left;font-weight:bold}
.title--body {margin-bottom:100px;font-size:30px;text-shadow: 5px 10px 5px #999;text-align:center}

/* footer */
.footer {font-size:14px;height:20px;line-height:20px;text-align:center;border-top:1px solid var(--main-color)}