/* xs */
@media (min-width: 0px) {
  .header > .col {
    max-width: 100%;
  }
  .header i {
    font-size: 35px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 35px;
  }
  .exercise {
    font-size: 60px;
  }
  .exercise .error-message {
    font-size: 30px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 80px;
    height: 80px;
    font-size: 45px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 270px;
  }
  .settings-panel .settings {
    width: 100%;
  }
  .settings-panel button.select {
    height: 50px;
    width: 50px;
    font-size: 20px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 0px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 0px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 50px;
    font-size: 18px;
  }
  .settings-panel .bound label {
    font-size: 18px;
  }
}
/* sm */
@media (min-width: 576px) {
  .header > .col {
    max-width: 100%;
  }
  .header i {
    font-size: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 60px;
  }
  .exercise {
    font-size: 100px;
  }
  .exercise .error-message {
    font-size: 30px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 150px;
    height: 150px;
    font-size: 70px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 550px;
  }
  .settings-panel .settings {
    width: 800px;
  }
  .settings-panel button.select {
    height: 65px;
    width: 65px;
    font-size: 30px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 576px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 576px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 65px;
    font-size: 20px;
  }
  .settings-panel .bound label {
    font-size: 20px;
  }
}
/* md */
@media (min-width: 768px) {
  .header > .col {
    max-width: 1100px;
  }
  .header i {
    font-size: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 60px;
  }
  .exercise {
    font-size: 100px;
  }
  .exercise .error-message {
    font-size: 50px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 150px;
    height: 150px;
    font-size: 70px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 550px;
  }
  .settings-panel .settings {
    width: 800px;
  }
  .settings-panel button.select {
    height: 75px;
    width: 75px;
    font-size: 30px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 768px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 75px;
    font-size: 20px;
  }
  .settings-panel .bound label {
    font-size: 25px;
  }
}
/* lg */
@media (min-width: 992px) {
  .header > .col {
    max-width: 100%;
  }
  .header i {
    font-size: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 60px;
  }
  .exercise {
    font-size: 100px;
  }
  .exercise .error-message {
    font-size: 50px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 150px;
    height: 150px;
    font-size: 70px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 550px;
  }
  .settings-panel .settings {
    width: 800px;
  }
  .settings-panel button.select {
    height: 80px;
    width: 80px;
    font-size: 35px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 992px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 992px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 80px;
    font-size: 20px;
  }
  .settings-panel .bound label {
    font-size: 25px;
  }
}
/* xl */
@media (min-width: 1200px) {
  .header > .col {
    max-width: 1100px;
  }
  .header i {
    font-size: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 60px;
  }
  .exercise {
    font-size: 100px;
  }
  .exercise .error-message {
    font-size: 50px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 150px;
    height: 150px;
    font-size: 70px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 550px;
  }
  .settings-panel .settings {
    width: 800px;
  }
  .settings-panel button.select {
    height: 80px;
    width: 80px;
    font-size: 35px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 1200px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 1200px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 80px;
    font-size: 20px;
  }
  .settings-panel .bound label {
    font-size: 25px;
  }
}
/* xxl */
@media (min-width: 1400px) {
  .header > .col {
    max-width: 1100px;
  }
  .header i {
    font-size: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header i.settings {
    color: #0d6efd;
    -webkit-text-stroke: 1px;
  }
  .header i.settings:hover {
    color: #0b5ed7;
  }
  .header i.correct {
    color: green;
  }
  .header i.incorrect {
    color: red;
  }
  .header button.settings {
    --bs-btn-border-color: none;
  }
  .header p.counter {
    font-size: 60px;
  }
  .exercise {
    font-size: 100px;
  }
  .exercise .error-message {
    font-size: 50px;
  }
  .exercise .correct {
    color: green;
  }
  .exercise .incorrect {
    color: red;
  }
  .keyboard button {
    width: 150px;
    height: 150px;
    font-size: 70px;
    max-width: 100%;
    max-height: 100%;
  }
  .keyboard .keyboard-col {
    width: 550px;
  }
  .settings-panel .settings {
    width: 800px;
  }
  .settings-panel button.select {
    height: 80px;
    width: 80px;
    font-size: 35px;
    border-radius: 0.5em;
    border-width: 2px;
    border-color: #dee2e6;
    color: black;
    cursor: pointer;
  }
  .settings-panel button.select:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 1400px) and (hover: hover) {
  .settings-panel button.select:hover {
    border-color: #0d6efd;
    background-color: white;
  }
  .settings-panel button.select:hover:active {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
}
@media (min-width: 1400px) {
  .settings-panel button.select.selected {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: white;
  }
  .settings-panel button.select.error {
    border-color: #dc3545;
    background-color: white;
    color: black;
  }
  .settings-panel .bound input {
    height: 80px;
    font-size: 20px;
  }
  .settings-panel .bound label {
    font-size: 25px;
  }
}

/*# sourceMappingURL=styles.css.map */