html {
  background-color: indigo;
}

body {
  background-color: white;
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#border {
  height: 100%;
  background-color: indigo;
  border: 2em solid white;
  padding: .25em;
  border-image: url(/images/border.png) 21% round;
}

#consonants4 {
  padding-bottom: 1.5em;
}

h1 {
  background-color: white;
  border-radius: 10%;
  font-size: 2em;
}

.active,
.collapsible {
  margin: 0;
  padding: 0;
  background-color: white;
  color: darkblue;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 1.4rem;
}

.collapsible:hover {
  background-color: white;
  text-decoration: underline;
}

.content {
  padding: 0;
  width: 100%;
  display: none;
  overflow: hidden;
  background-color: white;
}

button {
  text-align: center;
  margin: .1em;
  padding: 0;
  width: 3em;
  height: 3em;
  align-items: center;
  font-size: 4em;
  border-width: .025em;
  border-style: solid;
  border-color: silver;
  font-weight: bold;
  background-color: white;
}

button.ton {
  color: orange;
  border-radius: 100%;
}

button.ton:hover {
  background-color: orange;
  color: white;
  border-radius: 100%;
}

button.vol {
  color: red;
  border-radius: 25%;
}

button.vol:hover {
  background-color: red;
  color: white;
  border-radius: 25%;
}

button.con {
  color: blue;
  border-radius: 5%;
}

button.con:hover {
  background-color: blue;
  color: white;
  border-radius: 5%;
}

.comment {
  background-color: indigo;
  color: white;
  font-size: small;
  font-size: 1.25em;
  padding-top: 1em;
}