table {
  border-collapse: collapse;
  table-layout: fixed;
}
td {
  padding: 0.3rem;
}

form > table {
  width: 100%;
  margin: auto;
  margin-bottom: 1.5rem;
}

article {
  width: 100%;
  margin: 2rem auto;
  display: grid;
  gap: 1rem;
}

input, textarea {
  border: none;
  font-family: var(--stdfont);
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  background: none;
  border-bottom: 2px solid #444444;
  color: gainsboro;
  padding: 0.35rem;
  box-sizing: border-box;
  font-size: .9em;
}
input[type="submit"], input[type="reset"] {
  padding: 0.35rem 0.5rem;
  box-shadow: 2px 2px 6px black;
  margin: 0.3rem;
  display: inline-block;
}
input[type="submit"]:active, input[type="reset"]:active {
  transform: translate(1px, 1px); box-shadow: 0 0 2px black;
}
input[type="submit"]:hover, input[type="reset"]:hover {
  cursor: pointer;
}
.error {
  color: red;
  font-size: 0.85em;
}
.success {
  color: #00ff00;
  font-size: 0.85em;
}
.reply {
  border-left: 3px solid gainsboro;
  padding-left: 1rem;
}
.message {
  padding-top: 1.5rem;
}
@media only screen and (hover: none) {
  form td:first-child {
    text-align: left;
  }
  form td:nth-child(2) {
    padding-left: 0;
    padding-right: 0;
  }
  input[type="text"], input[type="email"], textarea {
    background: none;
    border: 2px solid #00000033;
    border-bottom: 2px solid #888888;
  }
  article {
    margin: 2rem auto;
  }
}
@media (prefers-contrast: more) {
  input[type="text"], input[type="email"], textarea {
    outline: 1px solid white;
    color: white;
  }
  input:focus, textarea:focus {
    outline: 3px solid white;
  }
  input[type="submit"] {
    background: none;
    color: white;
    outline: 1px solid white;
  }
}