body,
html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  /* Stacks the top-row and bottom-row vertically */
  height: 100vh;
  /* Takes full viewport height */
  width: 100vw;
  /* Takes full viewport width */
  align-items: stretch;
}

.left-pane {
  display: flex;
  flex-direction: column;
  /* Stacks the top-row and bottom-row vertically */
  background-color: #999898;
  max-width: 25vw
}

.middle-pane {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  /* Stacks the top-row and bottom-row vertically */

  justify-content: flex-end;
}

.right-pane {
  display: flex;
  flex-direction: column;
  /* Stacks the top-row and bottom-row vertically */
  background-color: #999898;
  max-width: 90px;
  min-width: 90px;
 

}

.top-pane {
  background-color: #c2bdbd
}

.bottom-pane {
  background-color: #b5b5b5;
  flex-grow: 1;
  justify-content: flex-start;
  display: flex;
  flex-direction: row;
}

.bottom-pane-right {
  background-color: #b5b5b5;
  flex-grow: 1;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.bottom-pane-left {
  background-color: #b5b5b5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

}

#orthography-menu{
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap
}
.orthography-button {
  background-color: #3e93d0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  padding: 4px 4px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.orthography-button.is-selected {
  background-color: #6349e6;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}
.page-number {
  color: #fff;
  padding: 15px 20px;
  background-color: #5ccece;
  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  font-weight: bold;
  font-size: 20px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;

}

.voice-button {
  background-color: #3e93d0;
  border: 0;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  padding: 8px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.voice-button.is-selected {
  background-color: #6349e6;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.15);
}

/* CSS */
.button-71 {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

.button-71:disabled {
  background-color: #787878;
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1);
}

@media (min-width: 500px) {
  .button-71 {
    padding: 10px 20px;
  }
}

#image {
  justify-content: center;
  display: flex;
}

.story-word {
  background-color: #b5b5b5;
  border: 0;
  color: #000000;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 50px;
  font-weight: 600;
  outline: 0;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.story-word.active,
.navigation.active {
  background-color: #b5b5b5;
  color: #9a9898;
}

.story-word-syllabics {
  background-color: #b5b5b5;
  border: 0;
  color: #000000;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 60px;
  font-weight: 600;
  outline: 0;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.story-word-syllabics.active,
.navigation.active {
  background-color: #b5b5b5;
  color: #9a9898;
}

.navigation {
  background-color: #b5b5b5;
  border: 0;
  color: #000000;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  outline: 0;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  left: 0;
}


.hidden {
  opacity: 0;
}

#phrase, #phrase-sro, #phrase-syllabics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#next-page {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

#nav-buttons {
  display: flex;
}

#mennu-bar {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  flex-direction: row;
}

/* Below is for the voice selection button */

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropup {
  position: relative;
  display: inline-block;
}

.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  bottom: 50px;
  z-index: 1;
}

.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropup-content a:hover {
  background-color: #ccc
}

.dropup:hover .dropup-content {
  display: block;
}

.dropup:hover .dropbtn {
  background-color: #2980B9;
}

.left-menu-header{
  background-color: #57595b;
  border: 0;
  border-radius: 0px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  padding: 5px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.right-menu-header{
  background-color: #57595b;
  border: 0;
  border-radius: 0px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 600;
  outline: 0;
  padding: 5px 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#voices-menu, #orthography-menu{
align-items: center;
}