@charset "UTF-8";

:root,
html[data-theme='dark'] {
  /* Text color style */
  --text-main: 245, 245, 245;

  /* Background color style */
  --bg-level-0: 21, 21, 27;
  --bg-level-1: 29, 29, 36;
  --bg-level-2: 43, 43, 51;
  --bg-modal: 29, 29, 36;
  --bg-telegram-header: #1d1d24;

  /* Shadows style */
  --shadow-base: 2px 2px 5px rgba(10, 10, 10);
  --shadow-level-1: 5px 2px 5px rgba(0, 0, 0);
  --shadow-level-2: 5px 2px 5px rgba(6, 6, 6);

  /* Borders style */
  --border-level-1: 53, 53, 53;
  --border-level-2: 69, 69, 69;
}

.appHeader {
  background-color: rgba(var(--bg-level-0));
  border-bottom: 1px solid rgba(var(--border-level-1), 0.5);
  box-shadow: 0 7px 5px -7px rgba(8, 8, 8);
}

.appHeader .headerButton {
  background: rgba(var(--bg-level-1));
  border: 1px solid rgba(var(--border-level-1), 0.7);
  border-radius: var(--border-radius-circle);
  box-shadow: var(--shadow-base);
}

.form-group.boxed .form-control {
  background: rgba(var(--bg-level-1));
  border: 1px solid rgba(var(--border-level-2));
}

.form-group.boxed .form-control:focus {
  border-color: rgba(var(--primary)) !important;
}

.puzzles-game-page .form-group.boxed .form-control {
  box-shadow: var(--shadow-level-1);
}

.is-animated:hover {
  transform: translateY(-3px);
}

.is-animated:active {
  transform: scale(0.99);
}

.is-animated.btn-primary:active,
.is-animated.btn-secondary:active {
  color: rgba(var(--primary)) !important;
}