* {
  transition-duration: 0.3s;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_text {
  color: steelblue;
  font-size: 40px;
  margin-bottom: 10px;
}

.settings__container {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 80vw;
  max-width: 1920px;
}

.settings__field-text {
  text-align: center;
  font-size: 30px;
  color: steelblue;
}

.settings__level-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

.settings__easy-level,
.settings__medium-level,
.settings__hard-level {
  margin-top: 10px;
  width: 120px;
  height: 30px;
  font-size: 20px;
  color: steelblue;
  background: #f5f5f5;
  border: 1px solid steelblue;
  border-radius: 5px;
  margin: 0 10px;
}

.settings__easy-level:hover,
.settings__medium-level:hover,
.settings__hard-level:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.settings__field-container {
  width: 250px;
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

.settings__field-label {
  font-size: 20px;
  color: steelblue;
}

.settings__field-input {
  height: 30px;
  width: 45px;
  color: #a1c4fd;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  border: 1px solid #a1c4fd;
  border-radius: 10px;
  text-align: center;
  outline: none;
  margin-left: 5px;
}

.settings__mines {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 80vw;
  max-width: 1920px;
}

.settings__start-game-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 460px;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

.settings__start-game-button {
  width: 200px;
}

.settings__resume-game-button {
  width: 160px;
}

.settings__start-game-button,
.settings__resume-game-button {
  margin: 10px 20px 0px 20px;
  height: 30px;
  font-size: 20px;
  color: steelblue;
  background: #f5f5f5;
  border: 1px solid steelblue;
  border-radius: 5px;
}

.settings__start-game-button:hover,
.settings__resume-game-button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.statistic__container {
  width: 80vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.statistic {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  width: auto;
}

.statistic__timer,
.statistic__moves,
.statistic__mines,
.statistic__flags,
.statistic__score {
  margin-right: 20px;
  font-size: 20px;
  color: steelblue;
}

.statistic__restart,
.statistic__sound,
.statistic__score {
  width: 25px;
  height: 25px;
  position: relative;
  z-index: 4;
  margin-right: 20px;
}

.statistic__restart:hover,
.statistic__score:hover,
.statistic__sound:hover,
.statistic__color:hover {
  cursor: pointer;
  text-decoration: underline;
}

.statistic__restart:hover {
  transform: rotate(180deg);
}

.statistic__sound:hover {
  transform: scale(1.1);
}

.statistic__color {
  display: flex;
  justify-content: end;
  width: 40px;
  height: 25px;
  border: 1px solid #FFA500;
  background: #f0f0f0;
  border-radius: 12px;
  position: relative;
  z-index: 4;
}

.statistic__color-switcher {
  width: 25px;
  height: 25px;
  background: #FFA500;
  border-radius: 12px;
  margin-left: 10px;
}

.end-game {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  height: 0px;
  position: relative;
  width: auto;
}

.end-game__background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  /*background: rgba($color: #000000, $alpha: 0.5);*/
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  top: 0px;
  z-index: -1;
}

.end-game__background-screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  top: 0px;
  z-index: 2;
}

.end-game__text:hover {
  cursor: pointer;
}

.end-game__text {
  color: #B22222;
  font-size: 7.5vw;
  position: relative;
  top: 200px;
  width: 80vw;
  text-align: center;
  z-index: 3;
}

.field {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 0 auto;
}

.field__container {
  display: grid;
  justify-items: center;
  align-items: center;
}

.field__cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  border: 1px dotted #A2CFFB;
}

.field__cell:hover {
  cursor: pointer;
}

.field__marked-cell {
  width: 50px;
  height: 50px;
  z-index: 1;
}

.results {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 0 auto;
}

.results__container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(6, 2fr);
  grid-template-rows: 2fr repeat(11, 1fr);
  justify-items: center;
  align-items: center;
}

.results__text {
  color: steelblue;
  margin-bottom: 5px;
  font-size: 16px;
  text-align: center;
}

.results__back-to-game {
  grid-column: 1/8;
  width: 200px;
  height: 30px;
  font-size: 20px;
  color: steelblue;
  background: #f5f5f5;
  border: 1px solid steelblue;
  border-radius: 5px;
  margin-bottom: 5px;
}

.results__back-to-game:hover {
  cursor: pointer;
  transform: scale(1.1);
}

@media (max-width: 1279.98px) {
  .header_text {
    font-size: 30px;
  }
  .statistic__timer,
  .statistic__moves,
  .statistic__mines,
  .statistic__flags,
  .statistic__score {
    font-size: 15px;
  }
  .field__marked-cell {
    width: 35px;
    height: 35px;
  }
}
@media (max-width: 767.98px) {
  .header_text {
    font-size: 25px;
  }
  .statistic__timer,
  .statistic__moves,
  .statistic__mines,
  .statistic__flags,
  .statistic__score {
    font-size: 12px;
  }
  .statistic__color-switcher,
  .statistic__sound,
  .statistic__restart,
  .statistic__score {
    width: 15px;
    height: 15px;
  }
  .statistic__color {
    width: 25px;
    height: 15px;
  }
  .statistic__color-switcher,
  .statistic__color,
  .statistic__score {
    border-radius: 7px;
  }
  .statistic__timer,
  .statistic__moves,
  .statistic__mines,
  .statistic__flags,
  .statistic__score,
  .statistic__score,
  .statistic__restart,
  .statistic__sound {
    margin-right: 10px;
  }
  .results__text {
    font-size: 10px;
  }
  .field__marked-cell {
    width: 25px;
    height: 25px;
  }
}
.hidden {
  height: 0;
  width: 0;
  overflow: hidden;
}

.invisible {
  display: none;
  overflow: hidden;
}

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