section#exercise {
  display: flex;
  gap: 15px;
  flex-direction: column;
  width: var(--website-width);
  max-width: 600px;
}
section#discord_info{
  max-width: 600px;
}
section#exercise form, section#exercise form #answer-container {
  display: flex;
  gap: 15px;
  flex-direction: column;
}

section#exercise h2,
section#exercise h3 {
  text-align: center;
}
section#exercise p#question {
  text-align: center;
}
section#exercise p#question strong {
  font-size: 1.2em;
}
section#exercise div#buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
section#exercise div#result {
  min-height: 60px;
  text-align: center;
}
section#exercise div#options {
  margin: 0 auto;
}
section#exercise div#options h3,
section#exercise div#options label {
  text-align: center;
}

div#stats {
  display: flex;
  justify-content: center;
  gap: 30px;
}

div#other-info p#subtitle {
  text-align: center;
}


input[type="text"] {
  padding: 10px 15px;
  border: none;
  border-radius: 25px;
  font-size: .8em;
  transition: .1s;
  outline: none;
}
input[type="text"]:hover,
input[type="text"]:focus {
  box-shadow: 0 0 10px #0002;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
  padding: 10px;
  border: none;
  border-radius: 25px;
  background-color: var(--bg-color);
  color: #333;
  font-size: .8em;
  letter-spacing: 1px;
  transition: .1s;
  outline: none;
}
#buttons > input[type="button"],
#buttons > input[type="submit"],
#buttons > input[type="reset"] {
  flex: 1 1 140px;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  background-color: #c4ddfe;
  box-shadow: 0 0 10px #0002;
  color: var(--text-color);
  cursor: pointer;
}

.fetching-data {
  cursor: wait;
}


#special-signs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
#special-signs > .special-sign {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
#special-signs > .special-sign.hidden {
  display: none;
}


input[type="text"].correct {
  background-color: #bffeb5;
}
input[type="text"].incorrect {
  background-color: #fcbfbf;
}