input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #2C3E50;
    border-radius: 4px;
    font-size: 16px;
    background-color: #D7DADB;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 5px 20px 5px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
ul {
    /*background: #3399ff;
    padding: 20px;*/
    list-style-type: none;

}

li {
    transition: all 0.3s ease;
    padding: 20px;
    margin-left: 35px;
    list-style-type: none;
    
}
li:hover{
	background-color: #FC4349;
}

li {
    background: #D7DADB;
    margin: 3px;
}
a{
    color: rgb(27, 34, 44);
    font-size: 2rem;
    text-decoration: none;
}
a:hover{
	
	text-decoration: none;
}
body{
	background-color: #2C3E50;
}
h1{
    margin: auto;
    padding: 2px 2px 2px 10px;
    color: #D7DADB;

}
h2{
    color:#D7DADB;

}