/*
 * text inputs
 */

input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='url'],
textarea,
select {
  position: relative;
  font-size: 1rem;
  line-height: 1.7rem;
  padding: 0.4rem;
  padding-bottom: 0.5rem;
  color: #000000;
  background-color: transparent;
  border: none;
  border-bottom: 0.1rem solid #d3d3d3;
  transition: border 0.5s, color 0.5s;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
  color: #000000;
  border-bottom: 0.1rem solid #000000;
}

textarea {
  resize: none;
}

select {
  appearance: none;
}

input[type='text']:placeholder-shown,
input[type='number']:placeholder-shown,
input[type='email']:placeholder-shown,
input[type='password']:placeholder-shown,
input[type='url']:placeholder-shown,
textarea:placeholder-shown {
  color: #000000;
}

/*
 * button-type inputs
 */

.button,
button,
input[type='submit'] {
  display: inline-flex;
  margin: 0;
  padding: 0.8rem 1.2rem;
  font-family: 'Arial', 'sans-serif';
  font-size: 0.8rem;
  color: #ffffff;
  background-color: #000000;
  cursor: pointer;
  border: none;
}

select {
  color: #000000;
  background-color: #ffffff;
}

select > option {
  color: #000000;
  background-color: #ffffff;
}