html {
   box-sizing: border-box;
   background: black;
   font-family: 'helvetica neue';
   font-size: 20px;
   font-weight: 200;
}

*, *:before, *:after {
   box-sizing: inherit;
}

input {
   width: 100%;
   padding: 15px;
}

.search-form {
   max-width: 400px;
   margin: 15px auto;
}

input.search {
   background: black;
   color: yellow;
   margin: 0;
   text-align: center;
   outline: 0;
   border: 8px solid yellow;
   width: 120%;
   left: -10%;
   position: relative;
   top: 10px;
   z-index: 2;
   border-radius: 5px;
   font-size: 40px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 2px rgba(0, 0, 0, 0.25);
}

.suggestions {
   margin: 0;
   padding: 0;
   position: relative;
}

.suggestions li {
   background: white;
   list-style: none;
   border-bottom: 1px solid #D8D8D8;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
   margin: 0;
   padding: 20px;
   transition: background 0.2s;
   display: flex;
   justify-content: space-between;
   text-transform: capitalize;
}

.suggestions li:nth-child(even) {
   transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
   background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%);
}

.suggestions li:nth-child(odd) {
   transform: perspective(100px) rotateX(-3deg) translateY(3px);
   background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%);
}

span.population {
   font-size: 15px;
}

.h1 {
   background: yellow;
}