* {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.Panel {
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.Label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: auto;
}

.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ccc;
}

#data {
  display: none;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  font: 4vh Arial;
}

#homeFrame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

#titleLabel {
  height: 25%;
}

#sizePanel {
  width: 90%;
  height: 15%;
  display: flex;
}

#minusButton {
  flex: 1;
}

#sizeLabel {
  flex: 2;
}

#plusButton {
  flex: 1;
}

#muteButton {
  width: 90%;
  height: 15%;
}

#startButton {
  width: 90%;
  height: 15%;
}

#playFrame {
  flex: 1;
  display: none;
  flex-direction: column;
}

#headerPanel {
  flex: 2;
  display: flex;
}

#homeButton {
  flex: 3;
}

#scoreLabel {
  flex: 4;
}

#hintButton {
  flex: 3;
}

#cardPanel {
  flex: 3;
  display: flex;
  flex-direction: column;
}

#frontLabel {
  flex: 2;
  font-size: 8vh;
}

#backLabel {
  flex: 1;
}

#footerPanel {
  flex: 2;
  display: flex;
}

#prevButton {
  flex: 3;
}

#questionLabel {
  flex: 4;
}

#nextButton {
  flex: 3;
}

#gridPanel {
  flex: 9;
  display: flex;
}

#gridCanvas {
  flex: 1;
}