.app header{
  width: 100%;
  margin-bottom: 1vh;
}

.version1,
.version2,
.version3{
 font-size: 1rem;
 color: whitesmoke;
 cursor: pointer;
 border-radius: 20px;
 
}



.version1 .tool,
.version2,
.version3{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.version1 .search-engine{
  display: flex;
  align-items: center;
  padding: 10px;
}

.version1 .search-engine i{
    margin-right: 10px;
}

.version1 .search-engine input{
    flex: 1;
    height: 40px;
    min-width: 150px;
    outline: none;
    border-radius: 10px;
    text-align: center;
    border: none;
    border: 1px solid;
    font: inherit;
    font-size: 1.3rem;
}


.version1{
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right,hsl(300, 100%, 25%),hsl(300, 100%, 40%));
 
}

.version2{
  display: none;
  background: linear-gradient(hsl(39, 100%, 50%),hsl(39, 100%, 80%));
}


.version3{
   display: none;
   background: linear-gradient(hsl(180, 100%, 70%) 5%,hsl(180, 100%, 50%) 40%,hsl(180, 100%, 25%));
}


#notification1{
    position: absolute;
    left:5.5%;
    top:30px
}
#notification2{
    position: absolute;
    left: 10px ;
    top:50px;
    opacity:0.8;
    cursor: pointer;
    padding: 5px;
    
}

@media screen and (max-width: 750px){
  #notification2{
    position: absolute;
    left: 20px ;
    top:30px;
    opacity:0.8;
    cursor: pointer;
    padding: 5px;
    
}
}