body {
  font-family: Roboto, Arial; }

.text {
  display: inline-block;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff; }
  .text_theme_low {
    background-color: #f99; }
  .text_theme_middle {
    background-color: #ff9; }
  .text_theme_high {
    background-color: #9f9; }

.article {
  width: 100%;
  margin: 0 0 30px; }
  .article__topics {
    margin: -10px 0 0 -10px; }
    .article__topics button {
      margin: 10px 0 0 10px; }

.article-results {
  width: 100%;
  margin: 0 0 30px; }
  .article-results__base-views {
    margin: 0 0 30px; }
  .article-results__bonuses {
    display: flex;
    overflow: auto;
    flex-direction: column;
    max-height: 300px; }
  .article-results__bonus + .article-results__bonus {
    margin: 10px 0 0; }
  .article-results__views {
    margin: 30px 0 0; }

.interview {
  width: 100%;
  margin: 0 0 30px; }
  .interview__options-count {
    margin: 0 0 20px; }
  .interview__dialog {
    display: flex; }
  .interview__options {
    width: 300px;
    margin: 0 30px 0 0; }
    .interview__options button + button {
      margin: 10px 0 0; }

.game {
  overflow: auto;
  width: 800px;
  height: 80vh;
  padding: 20px;
  background-color: #ccdde8;
  background-position: center;
  background-size: cover; }
  .game__text {
    margin: 0 0 20px; }
  .game__options {
    display: flex;
    flex-direction: column;
    width: 300px; }
    .game__options button + button {
      margin: 10px 0 0; }
  .game mark {
    padding: 2px;
    border-radius: 3px;
    background-color: rgba(23, 143, 214, 0.2); }

@media (max-width: 800px) {
  .game {
    width: 100%; } }

html,
body,
#__next,
.index-page {
  height: 100%; }

.index-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edece8; }
  .index-page__title {
    font-weight: 300; }