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

}

html,body{
    height: 100%;
    width: 100%;
}
.d1{

height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.d2{
width: 100%;
  display: flex;
  justify-content: space-around;
}
.input{

  width: 55%;
  padding: 10px;
  border-radius: 10px;
  border-color: blueviolet;
}
.input:hover{

  border-color: blueviolet;

}

@media screen and (max-widh:640px) {
  
.input{

  width: 75%;
}

}