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

body{
  background-color: rgb(223, 226, 181);
  font-family:Arial, Helvetica, sans-serif;
  padding:100px 20px;
}

#header{
    background-color: brown;
    display:flex;
    align-items:center;
    justify-content: space-evenly;
    position:fixed;
    z-index:1000;
    top:0;
    right:0;
    left:0;
    height:80px;
    column-gap: 10px;

}

.header1{
    flex:0 0 auto;
    margin-left:30px;
}

.header1 img{
    width:130px;
}

.header2{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex:1 0 0%;
}

.header2 input{
    height:40px;
    max-width: 50vw;
    flex:1 0 auto;
    padding:15px;
    background-color:bisque;
    color:black;
    border-radius:20px 0px 0px 20px;
    border:1px solid brown;
    margin-right:-1;
    font-size: medium;
    font-weight:bold;
  
}

.header2 input:focus{
  outline:none;
}

.header2 input::placeholder{
  font-size: medium;
}

.header2 img{
    background-color: gold;
    padding:3px;
    height:40px;
    flex:0 0 auto;
    margin-left:-1;
    border:1px solid brown;
    border-radius: 0px 20px 20px 0px;
}

.header3{
    color:white;
    font-size:small;
    font-weight:bold;
    flex:0 0 auto;
    margin:0px 50px 0px 10px;
}

.header4{
    flex:0 0 auto;
    margin-right:40px;
    position:relative;
}

.header4 img{
  width:60px;
  height:40px;
}

.header4 b{
  position: absolute;
  color:rgb(0, 255, 0);
  font-size: 20px;
  top:-8px;
  left:50%;

}

@media (max-width:425px)
{
    body{
        padding:50px 10px;
    }
    
    #header{
        height: 40px;
        column-gap: 5px;
    }
    
    .header1{
        margin-left: 10px;
    }
    
    .header1 img{
        width:45px;
    }
    
    .header2 input{
        height:22px;
        padding:5px;
        font-size:6px ;
        font-weight:normal;
        max-width:40vw;
        border-radius:5px 0px 0px 5px;
        
    }
    
    .header2 input::placeholder{
        font-weight:normal;
        font-size:x-small;
    }
    
    .header2 img{
        height:22px;
        border-radius:0px 5px 5px 0px;
    }
    
    .header3{
        margin:0px 5px 0px 1px;
        font-size:1px;
        font-weight:200;
    }
    
    .header3 span{
        font-size:10px !important;
    }
    
    .header4{
        margin-right:10px;
    }
    
    .header4 img{
        width:45px;
        height:20px;
    }

    .header4 b{
        font-size:10px;
        top:-4px;
        left:50%;
    }
    
    
}

