<commit_before>$max-side: 20rem;
$mid-side: 15rem;
$min-side: 10rem;
$bg-color: #222;
$fg-color: #eee;


*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
     height: 100%;
}

body {
  @extend .flex-center;
  background-color: $bg-color;
    flex-direction: column;
       align-items: center;
       font-family: 'FantasqueSansMonoRegular', sans-serif;
         font-size: 2rem;
            margin: 0;
            height: 100%;
             color: $fg-color;
}

div {
  cursor: pointer;
}

#timer {
  justify-content: space-around;
   flex-direction: column;
    border-radius: 50%;
      align-items: center;
       min-height: $max-side;
        min-width: $max-side;
          display: flex;
           border: .2rem solid $fg-color;
}

.big-text {
  font-size: 5rem;
}

#buttons {
  @extend .flex-center;
  margin-top: 1rem;
       width: $max-side;
}

#buttons > * {
  @extend .flex-center;
  flex-basis: 0;
   flex-grow: 1;
}

.timeControl {
  display: flex;
}

.timeControl > * {
  padding: 0 .1rem;
}

::-moz-selection {
  background-color: $bg-color;
             color: $fg-color;
}

::selection {
  background-color: rgba($bg-color, 0.9);
             color: $fg-color;
}

@media (max-height: 24rem), (max-width: $max-side) {
  #timer {
    min-height: $mid-side;
     min-width: $mid-side;
  }

  .big-text {
    font-size: 3rem;
  }

  #buttons {
    width: $mid-side;
  }
}

@media (max-height: 19rem) {
  #buttons {
    display: none;
  }
}

@media (max-height: $mid-side), (max-width: $mid-side) {
  #tomato,
  #statusIcon {
    display: none;
  }

  #timer {
    min-height: $min-side;
     min-width: $min-side;
  }

  #buttons {
    flex-direction: column;
  }
}

@media (max-height: $min-side), (max-width: $min-side) {
  #timer {
    border: none;
  }

  .big-text {
    font-size: 2rem;
  }
}


/* Auxiliary classes, used for Sass */

.flex-center {
  justify-content: center;
          display: flex;
}<commit_msg>Bug: buttons display property now changes properly<commit_after>$max-side: 20rem;
$mid-side: 15rem;
$min-side: 10rem;
$bg-color: #222;
$fg-color: #eee;


*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
     height: 100%;
}

body {
  @extend .flex-center;
  background-color: $bg-color;
    flex-direction: column;
       align-items: center;
       font-family: 'FantasqueSansMonoRegular', sans-serif;
         font-size: 2rem;
            margin: 0;
            height: 100%;
             color: $fg-color;
}

div {
  cursor: pointer;
}

#timer {
  justify-content: space-around;
   flex-direction: column;
    border-radius: 50%;
      align-items: center;
       min-height: $max-side;
        min-width: $max-side;
          display: flex;
           border: .2rem solid $fg-color;
}

.big-text {
  font-size: 5rem;
}

#buttons {
  @extend .flex-center;
  margin-top: 1rem;
       width: $max-side;
}

#buttons > * {
  @extend .flex-center;
  flex-basis: 0;
   flex-grow: 1;
}

.timeControl {
  display: flex;
}

.timeControl > * {
  padding: 0 .1rem;
}

::-moz-selection {
  background-color: $bg-color;
             color: $fg-color;
}

::selection {
  background-color: rgba($bg-color, 0.9);
             color: $fg-color;
}

/* Auxiliary classes, used for Sass */

.flex-center {
  justify-content: center;
          display: flex;
}

/* Media queries */

@media (max-height: 24rem), (max-width: $max-side) {
  #timer {
    min-height: $mid-side;
     min-width: $mid-side;
  }

  .big-text {
    font-size: 3rem;
  }

  #buttons {
    width: $mid-side;
  }
}

@media (max-height: 19rem) {
  #buttons {
    display: none;
  }
}

@media (max-height: $mid-side), (max-width: $mid-side) {
  #tomato,
  #statusIcon {
    display: none;
  }

  #timer {
    min-height: $min-side;
     min-width: $min-side;
  }

  #buttons {
    flex-direction: column;
  }
}

@media (max-height: $min-side), (max-width: $min-side) {
  #timer {
    border: none;
  }

  .big-text {
    font-size: 2rem;
  }
}

{'fraction_non_alphanumeric': 0.17142142142142142, 'fraction_numerical': 0.018018018018018018, 'mean_word_length': 2.2708674304418985, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7405232', 'n_tokens_mistral': 1655, 'n_tokens_neox': 1567, 'n_words': 320}