/* ### START: Reset browser specific styling ### */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
  background:#dddddd;
  color:#444444;
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

header {
  top: 0px;
  position: sticky;
  background:#cccccc;
  padding:1rem;
  filter: drop-shadow(#3d3d3d 0px -2px 8px);
}

#app {
  padding:1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  column-gap: 15px;
}

h1 {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size:1.3rem;
}

img#logo {
  width:24px;
  height:24px;
  margin:5px 8px 0 0;
  vertical-align:text-bottom;
}

h2 {
  margin-top:30px;
  font-size:1.1rem;
}

h2 > span {
  font-size:0.8rem;
  float:right;
  text-align:bottom;
  padding-top:0.3rem;
}

textarea {
  border: 1px solid #888;
  border-radius:4px;
  background-color:eeeeee;
  height: 90px;
  width: 100%;
  margin:3px 3px 3px 0;
  font-family: "IBM Plex Mono", monospace;
  resize: vertical;
}

textarea.highlight {
  border:2px solid #888;
  background-color: #ffffcc;
}

#otplength {
  width:66px;
  font-family: "IBM Plex Mono", monospace;
  margin-right:3px;
}