*{

      box-sizing:border-box;

      }
      body{
               background-image: repeating-radial-gradient(circle at 0% 30%,#999999 30%,#818181,#353535 25%);
      }
      #searchInput {
        font-size: 30px;
        width: 10em;
      }
   
      .resultItem {
        background: #f8f5f1;
        border-radius: 3px;
        margin: 10px 10px 10px 0;
        padding: 10px;
        text-align: left;
        white-space: normal;
        font-style: italic;
        position: relative;
      }
      .resultItem:hover {
        border-left: 5px solid #443328;
      }
      #result {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        display: none;
        }
        .resultItem:nth-of-type(3n){
         background-image: repeating-linear-gradient(45deg,#bbbbbb 50%,#999999 5%,#cdcdcd);
        border-radius:20px;
        box-shadow:4px 4px 5px rgba(240,240,240,.3),
    -4px -4px 5px rgba(250,250,250,.3), inset 6px 6px 6px rgba(225,225,225,.3), inset -6px -6px 6px rgba(224,224,224,.3);

text-align:center;  
      }
        .resultItem:nth-of-type(-n+2){
         background-image: repeating-linear-gradient(315deg,#aabaaa 50%,#999999 5%,#cdddcd);
        border-radius:20px;
        box-shadow:4px 4px 5px rgba(240,240,240,.3),
        0px 8px 10px 0 rgba(0,0,0,.19),0px 16px 20px 0 rgba(0,0,0,.2),
    -4px -4px 5px rgba(250,250,250,.3), inset 6px 6px 6px rgba(225,225,225,.3), inset -6px -6px 6px rgba(224,224,224,.3);

text-align:center;  
      }
      .resultItem{
         background-image: repeating-linear-gradient(45deg,#bbbbbb 40%,#999999 25%,#cdcdcd);
        border-radius:22px;
        box-shadow:4px4px 5px rgba(240,240,240,.3),
    -4px -4px 5px rgba(250,250,250,.3), inset 6px 6px 6px rgba(225,225,225,.3), inset -6px -6px 6px rgba(224,224,224,.3),inset 0px 8px 10px 0 rgba(224,224,224,.6);

text-align:center;  
      } 

      .search{

display:flex;

flex-flow:row nowrap;

justify-content:space-around;

width:90%;

border:3px solid blue;

border-radius:10px;

height:2.5em;

align-items:center;

}
#search_btn{
border-radius:30px;
margin-left:-40%;
border:none;
display:inline-block;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:gold;
background-color:#9a9a9a;
text-align:center;
cursor:pointer;
white-space:nowrap;

}
.btn:hover{
        box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
        
        
}

input[type="text"]{

outline:none;

border:none;

z-index:;

width:100%;

background-color: transparent;

}
a{
        text-decoration:none;
}