form.css

@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans');

h1 {
  font-size:250px;
}

html {
  font-family: 'Bubblegum Sans';
  position:float;
}

form {
    left: 65%;
    top: 70%;
    margin-left: -20%;
    position: absolute;
    margin-top: -25%;
    font-size:25px;
}

form input {
  font-family: 'Bubblegum Sans';
  border: none;
  border-bottom: 1px solid;
  background:transparent;
  outline:none;
  box-sizing: border-box;
  width:150px;
  transition: width .5s ease, background-color .5s ease;
  opacity: 0.3;
  font-size:15px;
}

form select {
  border: none;
  border-bottom: 1px solid;
  background:transparent;
  outline: none;
  box-sizing: content-box;
  width:150px;
  transition: width .5s ease, background-color .5s ease;
  opacity: 0.3;
  font-size:15px;
}

form input:hover, form input:focus {
  border-bottom-color:lightsalmon;
  width: 250px;
  opacity: 1;
  font-size: 20px;
  font-family: 'Bubblegum Sans';
}

form select:hover, form select:focus {
  border-bottom-color:lightsalmon;
  width: 250px;
  opacity: 1;
  font-size: 20px;
  font-family: 'Bubblegum Sans';
}

input::-webkit-input-placeholder {
  font-size: 15px;
}

form button {
  font-family: 'Bubblegum Sans';
  font-size: 22px;
  border-bottom:1px solid;
}