/* based from https://www.w3schools.com/css/tryit.asp?filename=trycss_template3 */
/* I also like https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_start_page&stacked=h */

/* Light mode */
:root {
  --background: #ddd;
  --header-background: #bbb;
  --nav-background: #444;
  --top-background: #fff;
  --color: #000;
  --nav-color: #eee;
  --link-color: #00d;
  --link-visited-color: #608;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #333;
    --header-background: #666;
    --nav-background: #bbb;
    --top-background: #000;
    --color: #ddd;
    --nav-color: #333;
    --link-color: #bbf;
    --link-visited-color: #b9f;
  }
}

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  background-color: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: var(--nav-background);
  color: var(--nav-color);
}

.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #fff;
  color: #000;
}

.content,
.active-nav {
  background-color: var(--background);
  color: var(--color);
}

.content {
  padding: 10px;
}

.top {
  padding: 3px;
  background-color: var(--top-background);
  color: var(--color);
}

.content a:link,
.top a:link {
  color: var(--link-color);
}

.content a:visited,
.top a:visited {
  color: var(--link-visited-color);
}

.touch-pad {
  background-color: var(--header-background);
  display: block;
  height: 100px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  -webkit-user-select: none;
  /* -webkit-user-select: none; hides Copy|Lookup|Share when using touch straight key in Safari 
  https://stackoverflow.com/questions/14816031/disabling-the-copy-feature-in-ipad-safari-browser/14816364 
  Perhaps it should only be done on the touch pad and not the whole body. */
}

.touch-paddle-container {
  display: flex;
}

.touch-paddle {
  flex: 1;
}

.touch-paddle:first-child {
  margin-right: 10px;
}

textarea {
  width: 100%;
}

.station {
  min-width: 200px;
  border-radius: 6px;
  margin: 4px 0;
  padding: 1px;
  border-style: solid;
  border-width: 2px;
}

h3 {
  padding: 0 2px;
  background: var(--header-background);
  margin: auto;
  font-weight: normal;
  font-size: medium;
}

h4 {
  padding: 2px;
  margin: 10px 0px 2px;
  background: var(--header-background);
}

ul {
  margin: 0px;
  padding: 0px 0px 0px 20px;
}

li {
  margin: 4px;
}

.right {
  float: right;
  padding: 0 1px;
}

.decode {
  font-family: monospace;
  font-size: large;
}
.prosign {
  font-weight: bold;
  text-decoration: overline;
  font-family: monospace;
  font-size: large;
}

.live {
  border-color: red;
}

.char {
  color: #000;
}

.inter_char {
  vertical-align: super;
  color: green;
}

.inter_word {
  vertical-align: sub;
  color: green;
}

.inter_element {
  _vertical-align: sub;
  color: red;
}

.dah_element {
  vertical-align: sub;
  color: blue;
}

.dit_element {
  vertical-align: super;
  color: blue;
}

canvas {
  border: 1px solid #000;
  width: 100%;
  height: 30px;
}