.word {
  display: inline;
}
.letter {
  font-size: 20pt;
  font-family:"Inconsolata", Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
.letter.correct {
  background-color: #ccc;
}
.letter.wrong {
  background-color: salmon;
  color: white;
}
.letter.current {
  background-color: lightgreen;
}

p {
	margin-top: -20px;
	opacity: 0.7;
}

h1 {
	opacity: 0.7;
}

.article {
  padding: 0% 5% 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.article p{
  opacity:1;
}

input[type='checkbox'] { display: none; } .wrap-collabsible { margin: 1.2rem 0; } .lbl-toggle { display: block; font-weight: bold; font-family: monospace; font-size: 1.2rem; text-transform: none; text-align: center; padding: 1rem; color: #DDD; background: rgba(128, 128, 128, 0.773); cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } .lbl-toggle:hover { color: #FFF; } .lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } .toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } .collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } .toggle:checked + .lbl-toggle + .collapsible-content { max-height: 350px; } .toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .collapsible-content .content-inner { background: grey(0, 105, 255, .2); border-bottom: 1px solid grey; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } .collapsible-content p { margin-bottom: 0; }