@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body{
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Roboto',sans-serif;
  background:#f8f9fa;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wrap{
}
.wrap-box{
  width:30%;
  height:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:30px;
  border: 2px solid #000;
}
h2{
  font-size:1.7rem;
}
p{
  font-size:1.1em;
  margin:20px auto;
  font-weight:100;
  text-align:center;
}
[type=text],[type=text]:focus{
  width:100%;
  height:5vh;
  border-right:none;
  border-left:none;
  border-top:none;
  border-bottom:1.7px solid #000;
  /* border-left:1.7px solid #000; */
  margin: 20px auto;
  font-size:0.8rem;
  text-align:center;
}
[type=text]::placeholder{
  text-align:center;
  font-size:0.7rem;
  font-weight:100;
}
.buttons{
  display:flex;
  justify-content:space-between;
}
.btn{
  width:10vw;
  height:7vh;
  color:#000;
  background:transparent;
  border:1px solid #000;
  border-radius:2px;
  padding:10px auto;
  font-size:0.8rem;
  margin:10px 20px 0px 20px ;
  transition:500ms;
}
.btn:hover{
  background:#000;
  color:#fff;
}