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

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

.comment {
  width: 100%;
  margin: 2rem auto;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    'gb-name gb-date gb-index'
    'gb-cool gb-cool gb-cool'
    'gb-found gb-found gb-found'
    'gb-message gb-message gb-message'
    'gb-reply gb-reply gb-reply';
}
.comment :is(h1,h2,h3,h4,h5,h6) {
  border: none;
  padding-left: initial;
}

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: lime;
  font-size: 0.85em;
}
.warning {
  color: yellow;
  font-size: 0.85em;
}
.reply {
  padding: calc(var(--stdpadding) * 1.5);
  margin: 0;
  margin-bottom: initial;
  border-left: var(--stdaccentborder);
  background-color: var(--blockbg);
  margin-bottom: var(--stdpadding);
}
.reply > :last-child {
  margin-bottom: 0;
}
.message {
  padding-top: 1.5rem;
}
.gb-date {
  text-align: center;
}
.gb-index {
  text-align: right;
}
.gb-cool, .gb-found {
  word-break: break-all;
}
.gb-name, .gb-date, .gb-index {
  min-width: calc((var(--bodywidth) / 3) - (var(--stdpadding) * 2))
}
@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;
  }
  .comment {
    margin: 2rem auto;
  }
  @media (max-width: 43rem) {
    .comment {
      grid-template-areas:
        'gb-name gb-name gb-index'
        'gb-date gb-date gb-date'
        'gb-cool gb-cool gb-cool'
        'gb-found gb-found gb-found'
        'gb-message gb-message gb-message'
        'gb-reply gb-reply gb-reply';
    }
  }
}
@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;
  }
}