* {
  font-family: 'Roboto', sans-serif;
}

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

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#txt {
  font-size: 3vmin;
  color: rgb(156, 220, 254);
}

#menuBar {
  display: flex;
}

body {
  background-color: #1e1e1e;
  color: rgb(220, 184, 98);
}

button {
  width: 10vmin;
  height: 10vmin;
  font-size: 3vmin;
  line-height: 1.8vmin;
  margin: 1vmin;
  text-align: center;
  background-color: rgb(60, 60, 60);
  color: rgb(206, 145, 120);
}

svg.svgIcon{
  width: 4vmin;  
  fill: rgb(206, 145, 120);
}

button.ongoing {
  background-color: rgb(90, 90, 90);
}

button.display {
  width: 5vmin;
  height: 5vmin;
  font-size: 1.5vmin;
  line-height: 0.9vmin;
}

.error {
  color: rgb(214, 80, 27);
}

div.mainPart {
  padding: 0 3vmin;
}

div.selectedFunction {
  display: flex;
  align-items: center;
}

div.function {
  color: rgb(206, 145, 120);
  vertical-align: middle;
  height: 100%;
}

div.panel {
  background-color: rgb(51, 51, 51);
}

div.footer {
  margin-top: auto;
}

div.math {
  font-size: 12vmin;
  user-select: none;
  color: rgb(220, 220, 170);
  margin: 0;
  padding: 0;
}

div.history{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

div.history > div.math {
  font-size: 2.4vmin;
  color: rgb(128, 128, 128);
  padding-top: 1vmin;
}

div.historyPre {
  overflow-y: scroll;
}

div.flex {
  display: flex;
  align-items: center;
  padding: 0.2vmin;
}

div.history div.flex {
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  flex: none;
}

div.vertical {
  flex-direction: column;
}

div.fraction {
  border-bottom: 1vmin solid rgb(220, 220, 170);
  height: 0;
  width: 100%;
}

div.history div.fraction {
  border-bottom: 0.3vmin solid rgb(128, 128, 128);
}

div.highlight {
  border: 0.5vmin solid gray;
  border-radius: 2.5vmin;
  margin-left: 1vmin;
  margin-right: 1vmin;
}

li.passive {
  color: gray;
}

div.levels {
  display: flex;
  flex-direction: row;
  color: rgb(156, 220, 254);
  align-items: center;
  font-size: 3vmin;
}

button.level {
  height: 5vmin;
  color: rgb(156, 220, 254);
  font-size: 2.5vmin;
}

button.kontakt{
  color: gray;
  font-size: 1.4vmin;
}

button.video {
  height: 2vmin;
  color: gray;
  font-size: 1.5vmin;
}

button.selectedLevel {
  font-size: 3vmin;
  background-color: rgb(0, 122, 204);
  color: rgb(242, 248, 252);
}

button.exercise {
  height: 8vmin;
  width: auto;
  color: rgb(156, 220, 254);
  font-size: 3vmin;
  line-height: 1;
}

input {
  height: 3vmin;
  width: 30vmin;
}