search.css

#container {
    height: 50%;

   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
   
}

 #box{

    
    margin-top: 70px;
    margin-left: 20px;

}
.modal-body{
    margin-top: -128px;
    position: relative;
    background-color: white;
    z-index: 9999;
    display: block;
    animation: right 0.5s;
}
@keyframes right{
    from {
      transform: translateY(-300px);
    }
    to {
        transform: translateY(0);
    }
  }

 #grey {
    color: grey;
    margin-left: 24px;
    font-size: 10px;
    font-family: sans-serif;
    
 }



 #search_box {
    
    width: 90%;
color: #000;
background: none;
border: none;
margin-left: 25px;
border-bottom: 2px solid #ddd;
font-weight: 700;
padding: 6px 0 20px;
height: auto;
text-transform: lowercase;
font-size: 36px;
outline: none;
cursor :pointer;

 }

 #search_icon {
    font-size: 20px;
 }

#delete_icon {
    font-size: 25px;

}

#icon_div {
    margin-top: 60px;
    height: 20px;
    width: 20px;
   margin-left: 1140px;
    
}

.btn-secondary{
border: none;
color: none;
background-color:white;
}

#btn1 {
    border: none;
    background-color: white;
    margin-left: 1200px;
}

#results {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-left: 23px;
    border-right-width: 100px;
}

.effect:hover {
    color: orange;
}
/* 
#box {
    row-gap: 2px;
} */