index.css

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body{
  border: 10px solid black;
}
.container{
  margin:5px;
  padding:5px;
  font-family: cursive;
  filter: drop-shadow(2px 2px 8px plum); 
  min-width: 100%; 
}
ul{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: .5rem;
  margin: .5rem 0;
  justify-content: space-evenly;
  list-style-type: none;
}

li{
  background-color: bisque;
  border: 2px solid gray;
  margin: 2px;
  padding:1px;
}

.input-grp{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

input[type=text]{
  width:130px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:hover{
  width:200px;
  background-color: powderblue;
}

.top{
  display: flex;
  justify-content: space-between;
}