body {
   text-align: center;
   margin: 30px
}

h1 {
   font-size: 35px;
}

p {
   font-size: 18px;
   color: #777
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.ac {
   display: inline-block;
   margin-top: 50px;
   width: 50%;
   max-width: 400px;
   position: relative;
}

.ac_input {
   display: block;
   background-color: #f9f9f9;
   border: 1px solid #ccc;
   padding: 15px;
   font-size: 20px;
   font-family: inherit;
   width: 100%;
   box-sizing: border-box;
}

.ac_suggestions {
   background-color: #f1f1f1;
   text-align: left;
   font-size: 18px;
   padding: 15px;
   display: none;
   color: grey;
   cursor: pointer;
   max-height: 150px;
   overflow-y: auto;
   overflow-x: hidden;
   position: absolute;
   width: 100%;
   box-sizing: border-box;
}

.ac_suggestions--shown {
   display: block;
}

.ac_suggestions ul {
   margin: -15px;
}

.ac_suggestions li {
   padding: 15px;
   color: black;
}

.ac_suggestions li.hl,
.ac_suggestions li:hover {
   background-color: yellow;
}