*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  font-size: 11px;
}
body {
  background: whitesmoke;
  padding: 1em;
}

header {
  margin: 0em 0em 5em 0em;
  text-align: center;
}
.container {
  text-align: center;
}
.container .row {
  margin-bottom: 4em;
}
footer {
  text-align: center;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 1em;
}

a {
  color: inherit;
  text-decoration: none;
  text-shadow: 1px 1px 2px #3c3b3b;
}

.text-container {
  display: block;
  height: 15em;
  position: relative;
}
textarea {
  top: 0; left: 0; 
  height: 100%;
  width: 100%;
  margin: auto;
  resize: none;
  background-color: rgba(0,0,0,0.02);
  font-family: monospace;
  position: absolute;
  z-index: 10;
}
textarea + div {
  top: 0; left: 0; 
  line-height: 8.9em;
  font-size: 3em;
  padding-right: 0.1em;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
  text-align: right;
  color: rgba(0,0,0,0.04); 
}

button {
  display: block;
  margin: auto;
}
.status {
  display: block;
  text-align: center;
  padding: 0.5em;
  min-height: 4em;
}

#player {
  min-height: 1em;
}
#playStatus {
  display: none;
  font-family: monospace;
  font-size: 1.4em;
  letter-spacing: -1px;
  margin: auto;
}
#playStatus span {
  display: inline-block;
  height: 1.3em;
  width: 6em;
  margin: -7px;
}
#currentChar {
  max-width: 1em;
  margin: -20px;
  padding-right: 0.4em!important;
  white-space: pre-wrap;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  letter-spacing: -15px;
  font-weight: bold;
}
#prevChar {
  text-align: right;
  white-space: pre;
}
#nextChar {
  text-align: left;
  white-space: pre;
}

.controlContainer div {
  margin-bottom: 1em;
}

.icon {
  display: inline-block;
  cursor: pointer;
  font-size: 1.3em;
  width: 1.2em;
}
.control {
/*  transform: rotate(270deg);*/
  width: 5em;
  height: 1em;
}

.charset {
  padding: 0em 1em;
}
.charset p {
  margin-bottom: 0.5em;
}
.charset:first-child {
  text-align: right;
}
.charset:last-child {
  text-align: left;
}

.tableContainer table {
  margin-top: 1em;
  margin-bottom: 5em;
}

.morseTable {
  margin: auto;
  width: 100%;
  max-width: 20em;
  border-collapse: collapse;
  margin-top: 0.5em;
}
.morseTable th {
  font-weight: normal;
  line-height: 2em;
}
.morseTable tr:hover {
  background-color: #F0F0F0;
}
.morseTable tbody tr:last-child td {
  border-bottom: none;
}
.morseTable tr * {
  text-align: center;
  width: 50%;
  padding: 0;
}
.morseTable tr *:first-child {
  text-align: center;
  width: 50%;
  padding: 0;
  border-right: 1px solid #E1E1E1;
}

@media screen and (max-width: 550px) {
  .text-container {
    height: 8em;
  }
  textarea + div {
    line-height: 4.2em;
  }
}