body {
  margin: 0;
  padding: 20px;
}
table {
  transition: all 0.2s ease;
  max-width: 100%;
}
table[border="1"]:hover {
  border-color: #666 !important;
  background-color: rgba(0,0,0,0.02);
}
a:hover {
  color: #666 !important;
  text-decoration: underline;
}
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus {
  background-color: #e8e8e0 !important;
  outline: 2px solid #666;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #d0d0c8 !important;
  transform: scale(1.02);
}
input[type="submit"]:active,
input[type="reset"]:active {
  transform: scale(0.98);
}
@media (max-width: 820px) {
  body {
    padding: 8px;
  }
  table[width="780"] {
    width: 100% !important;
  }
  table[width="100%"] td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  table[width="100%"] tr {
    display: block;
  }
  font[size="6"] {
    font-size: 20px !important;
  }
  font[size="1"] {
    font-size: 10px !important;
  }
  input[type="text"], select, textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}