body {
  width: 830px;
}

article.settings {
  display: flex;
  align-items: center;
  width: 840px;
  margin: 10px auto;
}

article.settings * {
  margin: 0;
  margin-left: 15px;
}

article.settings h3 {
  margin-right: 25px;
}
article.settings select {
  margin-left: 5px;
}

article.exercise {
  padding: 10px;
  width: 840px;
  margin: 10px auto;
}

div.flex-buttons {
  display: flex;
  width: 810px;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

button.next-word, button.mark {
  margin: 15px;
  font-size: 16px;
  padding: 8px;
}

p.inf {
  margin: 10px auto;
  font-size: 40px;
  font-style: bold;
  width: min-content;
  white-space: nowrap;
}

h4.inf-info {
  margin: 10px auto;
  margin-bottom: 80px;
  font-size: 30px;
  width: min-content;
  white-space: nowrap;
}

div.flex1 {
  display: flex;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  width: min-content;
  gap: 10px;
}





p.correction {
  display: inline;
  color: white;
}

.regular {
  margin-left: 20px;
}


article.case {
  margin: 0;
  padding: 5px;
  width: 400px;
}

article.case h3 {
  margin: 10px;
  margin-right: 2px;
}

article.case div.flex3 {
  display: flex;
  width: min-content;
  white-space: nowrap;
}

article.case p.regular {
  font-size: 12px;
  color: green;
  height: 10px;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

article.case p.irregular {
  font-size: 12px;
  color: red;
  height: 10px;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

article.case p {
  display: inline;
}

article.case button {
  margin: 0;
  align-self: center;
}

div.flex2 {
  display: flex;
  width: 370px;
  justify-content: space-between;
}

div {
  margin: 5px;
}