@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

body{ background-color:#202020;}

.bar{
  margin:0 auto;
  width:575px;
  border-radius:30px;
  border:1px solid #dcdcdc;
  font-family: 'Righteous', cursive;
}
.bar:hover{
  box-shadow: 1px 1px 7px 1px #FF0091;
}
.bar:focus-within{
  box-shadow: 1px 1px 7px 1px #EC0034;
  outline:none;
}
.searchbar{
  height:45px;
  border:none;
  width:500px;
  font-size:16px;
  outline: none;
  background-color: #202020;
  color: #fff;
  font-family: 'Righteous', cursive;
  
}
.zee5{
  height:25px;
  position:relative;
  top:5px;
  left:10px;
}

.button{
  background: linear-gradient(90deg,red 0,#a100ff);
  border:none;
  color:#fff;
  font-size:15px;
  padding: 10px 20px;
  margin:5px;
  margin-top: 25px;
  border-radius:15px;
  outline:none;
  width: 130px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Righteous', cursive;
}


@media only screen and (min-width : 100px) and (max-width : 780px)
{
  {}
  .bar
  {
    width: 85%;
    margin: 0 auto;
  }
}

@media only screen and (min-width : 100px) and (max-width : 780px)
{
  {}
  .searchbar
  {
    width: 78%;
    margin: 0 auto;
    border-radius: 20px;
    
  }
}

@media only screen and (min-width : 100px) and (max-width : 780px)
{
  {}
  .zee5
  {
    margin: 0 auto;
  }
}