.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(64, 63, 61, 0.8);
}
.modal-overlay .modal {
  display: flex;
  position: fixed;
  justify-content: center;
  padding: 5px;
  max-width: 480px;
  width: 100%;
  left: 50%;
  top: 50%;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  z-index: 3;
  background-color: var(--modal-bc, antiquewhite);
  box-shadow: 0 0 15px 5px #fff;
}
.modal-overlay .modal .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  width: 100%;
}
.modal-overlay .modal .modal-content .modal-content__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  font-size: 35px;
  font-weight: bold;
  color: var(--modal-title-color, black);
}
.modal-overlay .modal .modal-content .modal-content__timer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0px 15px;
  padding: 5px;
  width: 100%;
}
.modal-overlay .modal .modal-content .modal-content__timer .modal-content__timer_title {
  padding: 0px 15px 0px 0px;
  font-size: 20px;
  font-weight: bold;
  color: var(--modal-timer-title, black);
}
.modal-overlay .modal .modal-content .modal-content__timer .modal-content__timer_value {
  padding: 0px 0px 0px 15px;
  font-size: 30px;
  font-weight: bold;
  color: var(--modal-timer-value, black);
}
.modal-overlay .modal .modal-content .modal-content__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  margin: 0px 0px 15px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  background-color: var(--modal-button-bc, rgb(2, 159, 174));
  font-family: "Amatic SC", sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: black;
  transition: all 0.6s ease;
}
.modal-overlay .modal .modal-content .modal-content__button:hover {
  background-color: var(--modal-button-hover, rgb(28, 199, 214));
}

.modal-save {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  width: 100%;
  left: 0px;
  top: -40px;
  border-radius: 5px;
  transition: all 0.7s ease;
}
.modal-save.show {
  transition: all 0.7s ease;
  top: 0px;
}
.modal-save .modal-save__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  font-size: 30px;
  font-weight: bold;
  color: var(--modal-title-color, black);
}

.hidden {
  display: none;
}

.modal-score {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal-score .modal-score__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  max-width: 480px;
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: var(--modal-bc, antiquewhite);
  box-shadow: 0 0 15px 5px #fff;
}
.modal-score .modal-score__wrapper .modal-score__item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  width: 100%;
  color: var(--modal-title-color, black);
}

.hidden {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--body-bc, gray);
  font-family: "Amatic SC", sans-serif;
}
body.dark-theme {
  --body-bc: black;
  --title-color: #00ff00;
  --title-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
  --box-shadow: inset 0 0 5px #00ff00;
  --box-shadow-white: inset 0 0 5px white;
  --level-button-width: 80px;
  --level-button-br: 43%;
  --level-button-bc1: rgb(246, 172, 172);
  --level-button-bc2: rgb(243, 146, 146);
  --level-button-bc3: rgb(240, 120, 120);
  --level-button-bc4: rgb(238, 95, 95);
  --level-button-bc5: rgb(238, 70, 70);
  --level-button-bc6: rgb(232, 46, 46);
  --level-button-bc7: rgb(229, 22, 22);
  --level-button-bc8: rgb(226, 0, 0);
  --level-button-bc9: rgb(233, 0, 0);
  --level-button-bc10: rgb(235, 0, 0);
  --level-button-bc11: rgb(236, 0, 0);
  --level-button-bc12: rgb(233, 20, 20);
  --level-button-bc13: rgb(211, 0, 0);
  --level-button-bc14: rgb(189, 0, 0);
  --level-button-bc15: rgb(170, 0, 0);
  --option-button-bc: #4257ca;
  --option-button-br: 43%;
  --option-button-width: 80px;
  --option-button-score-width: 130px;
  --empty-cell-bc: black;
  --emptu-cell-timer-bc: black;
  --emptu-cell-color: #00ff00;
  --top-tips-cell-bc: black;
  --top-tips-color: #00ff00;
  --left-tips-cell-bc: black;
  --left-tips-color: #00ff00;
  --game-field-bc: black;
  --cell-cross-bc: rgb(161, 0, 0);
  --black-bc: #57b141;
  --modal-bc: black;
  --modal-title-color: #00ff00;
  --modal-timer-title: #00ff00;
  --modal-timer-value: #00ff00;
  --modal-button-bc: #4257ca;
  --modal-button-hover: rgb(170, 0, 0);
}

.container {
  max-width: 1440px;
  width: 100%;
}
.container .title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0px 0px;
  font-size: 50px;
  font-weight: bold;
  color: var(--title-color);
  text-shadow: var(--title-text-shadow, none);
}
.container .main-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.container .main-wrapper .level-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px 0px 10px;
  max-width: 425px;
  padding: 2px;
}
.container .main-wrapper .level-buttons .button {
  margin: 2px;
  padding: 4px;
  width: var(--level-button-width, 70px);
  height: 35px;
  border-radius: var(--level-button-br, 5px);
  border: none;
  font-family: "Amatic SC", sans-serif;
  font-size: 22px;
  font-weight: bold;
  opacity: 1;
  transition: all 0.5s ease;
  cursor: pointer;
}
.container .main-wrapper .level-buttons .button:hover {
  opacity: 0.6;
}
.container .main-wrapper .level-buttons .button__bc-1 {
  background-color: var(--level-button-bc1, #ffff92);
}
.container .main-wrapper .level-buttons .button__bc-2 {
  background-color: var(--level-button-bc2, #ffff66);
}
.container .main-wrapper .level-buttons .button__bc-3 {
  background-color: var(--level-button-bc3, #ffff50);
}
.container .main-wrapper .level-buttons .button__bc-4 {
  background-color: var(--level-button-bc4, #ffff33);
}
.container .main-wrapper .level-buttons .button__bc-5 {
  background-color: var(--level-button-bc5, #fbff00);
}
.container .main-wrapper .level-buttons .button__bc-6 {
  background-color: var(--level-button-bc6, #ffd86e);
}
.container .main-wrapper .level-buttons .button__bc-7 {
  background-color: var(--level-button-bc7, #ffd04e);
}
.container .main-wrapper .level-buttons .button__bc-8 {
  background-color: var(--level-button-bc8, #ffc524);
}
.container .main-wrapper .level-buttons .button__bc-9 {
  background-color: var(--level-button-bc9, #ffc21b);
}
.container .main-wrapper .level-buttons .button__bc-10 {
  background-color: var(--level-button-bc10, #ff9d09);
}
.container .main-wrapper .level-buttons .button__bc-11 {
  background-color: var(--level-button-bc11, #ff6666);
}
.container .main-wrapper .level-buttons .button__bc-12 {
  background-color: var(--level-button-bc12, #ff4d4d);
}
.container .main-wrapper .level-buttons .button__bc-13 {
  background-color: var(--level-button-bc13, #ff3333);
}
.container .main-wrapper .level-buttons .button__bc-14 {
  background-color: var(--level-button-bc14, #ff1a1a);
}
.container .main-wrapper .level-buttons .button__bc-15 {
  background-color: var(--level-button-bc15, #ff0000);
}
.container .main-wrapper .game-block {
  max-width: var(--game-block-width);
  width: 100%;
  height: var(--game-block-height);
  display: grid;
  grid-template-columns: var(--game-block-empty) repeat(var(--gtc-rep-quantity), var(--gtc-width));
  grid-template-rows: var(--game-block-empty) repeat(var(--gtr-rep-quatity), var(--gtr-height));
  justify-content: center;
  gap: var(--gap-game-block, 8px);
}
.container .main-wrapper .game-block .empty-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: var(--empty-cell-bc, white);
  box-shadow: var(--box-shadow, none);
}
.container .main-wrapper .game-block .empty-cell .empty-cell__timer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  max-width: 80%;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 5px;
  background-color: var(--emptu-cell-timer-bc, antiquewhite);
}
.container .main-wrapper .game-block .empty-cell .empty-cell__timer-wrapper .empty-cell__timer-wrapper_minutes,
.container .main-wrapper .game-block .empty-cell .empty-cell__timer-wrapper .empty-cell__timer-wrapper_seconds {
  font-size: 40px;
  font-weight: bold;
  color: var(--emptu-cell-color, black);
}
.container .main-wrapper .game-block .top-tips {
  display: grid;
  grid-template-columns: repeat(var(--top-tips-col), 1fr);
  grid-template-rows: repeat(var(--top-tips-row), 1fr);
  gap: var(--gap-top-tips, 4px);
  border-radius: 5px;
  font-size: var(--font-size, 28px);
  font-weight: bold;
  color: var(--top-tips-color, black);
  grid-column: var(--gc-top-tips);
}
.container .main-wrapper .game-block .top-tips .top-tips__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--top-tips-cell-width);
  height: var(--top-tips-cell-height);
  padding: 3px;
  border-radius: 5px;
  background-color: var(--top-tips-cell-bc, antiquewhite);
  box-shadow: var(--box-shadow, none);
}
.container .main-wrapper .game-block .left-tips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(var(--left-tips-row), 1fr);
  gap: var(--gap-left-tips, 4px);
  border-radius: 5px;
  font-size: var(--font-size, 28px);
  font-weight: bold;
  color: var(--left-tips-color, black);
  grid-row: var(--gr-left-tips);
}
.container .main-wrapper .game-block .left-tips .left-tips__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--left-tips-cell-width);
  height: var(--left-tips-cell-height);
  border-radius: 5px;
  background-color: var(--left-tips-cell-bc, antiquewhite);
  box-shadow: var(--box-shadow, none);
}
.container .main-wrapper .game-block .game-field {
  max-width: var(--game-field);
  width: 100%;
  height: var(--game-field);
  display: grid;
  grid-template-columns: repeat(var(--game-field-col), 1fr);
  gap: var(--gap-game-field, 4px);
}
.container .main-wrapper .game-block .game-field .cell {
  position: relative;
  border-radius: 5px;
  background-color: var(--game-field-bc, white);
  width: var(--game-field-cell-width);
  height: var(--game-field-cell-height);
  box-shadow: var(--box-shadow-white, none);
}
.container .main-wrapper .game-block .game-field .black {
  background-color: var(--black-bc, rgb(2, 159, 174));
}
.container .main-wrapper .game-block .game-field .cell-cross::before,
.container .main-wrapper .game-block .game-field .cell-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  background-color: var(--cell-cross-bc, black);
  transform: translate(-50%, -50%) rotate(45deg);
}
.container .main-wrapper .game-block .game-field .cell-cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.container .main-wrapper .option-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 425px;
  width: 100%;
  margin: 10px 0px 0px;
  padding: 2px;
}
.container .main-wrapper .option-buttons .button {
  margin: 2px;
  padding: 4px;
  height: 35px;
  border-radius: var(--option-button-br, 5px);
  text-align: center;
  border: none;
  font-family: "Amatic SC", sans-serif;
  font-size: 22px;
  font-weight: bold;
  opacity: 1;
  transition: all 0.5s ease;
  cursor: pointer;
}
.container .main-wrapper .option-buttons .button:hover {
  opacity: 0.6;
}
.container .main-wrapper .option-buttons .reset-button,
.container .main-wrapper .option-buttons .save-button,
.container .main-wrapper .option-buttons .random-button,
.container .main-wrapper .option-buttons .continue-button,
.container .main-wrapper .option-buttons .solution-button {
  width: var(--option-button-width, 70px);
  background-color: var(--option-button-bc, rgb(211, 102, 211));
}
.container .main-wrapper .option-buttons .scoreboard-button {
  margin: 10px 0px 0px 0px;
  width: var(--option-button-score-width, 115px);
  background-color: var(--option-button-bc, rgb(211, 102, 211));
}
.container .wrapper__theme-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0px 10px;
  position: relative;
}
.container .wrapper__theme-button .theme-button {
  max-width: 30px;
  width: 100%;
  height: 30px;
  margin: 0px 44px 0px 0px;
  padding: 2px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  animation: rotateback 0.5s linear forwards;
}
.container .wrapper__theme-button .active {
  transition: transform 0.5s ease-in-out;
  animation: rotate 0.5s linear forwards;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
    background-color: black;
  }
  to {
    transform: rotate(180deg);
    background-color: #00ff00;
  }
}
@keyframes rotateback {
  from {
    transform: rotate(180deg);
    background-color: #00ff00;
  }
  to {
    transform: rotate(0deg);
    background-color: black;
  }
}/*# sourceMappingURL=style.css.map */