.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
}

.mdl-card {
  margin: 0.5em;
}

.key {
  width: 100%;
  height: 6em;
}

.center {
  text-align: center;
}

.maximize {
	position: absolute;
	bottom: 0;
	right: 0;
}
.maximized .key {
	height: 90vh;
}
.maximized {
	width: 90vw;
}

.wide {
  width: 100%;
}

#errors {
    color: rgba(127, 0, 0, .54);
    max-height: 5em;
    overflow-y: scroll;
}

@keyframes yellow-fade {
	0% {background: yellow;}
	100% {background: none;}
}
#errors p {
    margin: 0;
    animation: yellow-fade 2s ease-in 1;
}

kbd {
    background-color: #eee;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 9pt;
    padding: .1em .6em;
}

code {
  background-color: #333;
  color: #fff;
  padding: 0.1em;
}

img {
  max-width: 20em;
}

.mdl-card__supporting-text {
	max-height: 20em;
	overflow-y: scroll;
}
.mdl-card__supporting-text.long {
	max-height: inherit;
}


.morsetree {
	width: 100%;
}
.morsetree tr {
	height: 1.4em;
	text-align: center;
	font-family: monospace;
}
.morsetree tr,
.morsetree td:nth-child(n+2) {
	background: #eee;
}
.morsetree tr:nth-child(n+2) {
	background: #ddd;
}