:root {
  --body-padding: 1em;
  --list-padding: 1.25em;
  --hr: 4px solid #000;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  min-width: calc(280px - var(--body-padding) * 2); /* Galaxy Fold */
  -webkit-font-smoothing: antialiased;
  margin: var(--body-padding);
}

header {
  align-items: center;
  display: flex;
  gap: 1.5em;
  justify-content: space-between;
  margin-bottom: 0.5em;
}
header > * {
  margin-top: 0;
  margin-bottom: 0;
}

footer {
  color: #666;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  padding-top: 1em;
}
footer a {
  color: #666;
}

:not(.shadow) > a[target]:not(.btn)::after {
  content: url(data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAEALAAAAAAKAAoAAAIVjA+peaFtgJONMlRxhq5zSUHgsgQFADs=);
  line-height: 1;
  margin-left: 0.2rem;
  vertical-align: middle;
}

form a[href]:not(.btn):hover,
.content a[href]:not(.btn):hover,
.tab-content a[href]:not(.btn):hover {
  -webkit-filter: brightness(0.75);
  filter: brightness(0.75);
}

blockquote, dl, p, pre, textarea, ol, ul {
  line-height: 1.4;
}

code {
  color: #666;
  font-family: Consolas, monospace;
  font-weight: bold;
  overflow-wrap: anywhere;
}

h1, h2, h3 {
  font-family: Cambria, serif;
}

main {
  border-top: var(--hr);
  border-bottom: var(--hr);
  padding: 1.5em 1em;
}
:where(main, .tab-content) > :first-child {
  margin-top: 0;
}
:where(main, .tab-content) > :last-child {
  margin-bottom: 0;
}
:where(.content, .tab-content) {
  font-family: Verdana, sans-serif;
  font-size: 80%;
}

.footnote {
  color: #900;
}

.icons {
  text-align: right;
}
.icons a {
  display: inline-block;
  margin: 0 0.25em;
}
.icons img {
  border: 0;
}

.logo {
  vertical-align: middle;
}
.logo-bg {
  background: url(../../i/icon-autofill2@3x.png) no-repeat center left;
  background-size: 32px;
  font-family: Calibri, 'Gill Sans', sans-serif;
  padding-left: 40px;
}

.nowrap {
  white-space: nowrap;
}

.shadow a:focus img,
.shadow a:hover img,
.shadow a.btn:focus,
.shadow a.btn:hover {
  -webkit-filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
}
.shadow a:active img,
.shadow a.btn:active {
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  transform: translateY(2px);
}

.table-wrapper {
  overflow-x: auto;
}

.text-center {
  text-align: center;
}

.title {
  font-family: 'Bahnschrift', 'Segoe UI', Corbel, sans-serif;
  margin-left: 0.25em;
}

/*** MOBILE ***/

@media (max-width: 399px) {
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer a + span {
    display: none;
  }
  footer a:first-of-type ~ a {
    width: 100%;
    display: inline-block;
    margin-top: 0.25em;
  }
}