*{
  margin: 0;
  padding: 0;
  border: 0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  background-color:#fffec7;
}


.containerCells {
display: grid;
grid-template-columns: repeat(var(--columnAmmount), 40px);
border: rgb(160, 172, 0) 1px solid;
width: 100%;
height: 100%;
}

@media(max-width: 350px){
  .containerCells{
    grid-template-columns: repeat(var(--columnAmmount), 25px);
  }
}

@media(max-width: 450px){
  .containerCells{
    grid-template-columns: repeat(var(--columnAmmount), 30px);
  }
}


.containerField{
  position: relative;
  border: yellowgreen 2px solid;
  margin: 40px 0 0 0;
}

p {
  display: flex;
  justify-content: center;
  align-items:center;
  position: relative;
  height: 40px;
  width: 40px;
  font-size: 24px;
  border: rgb(4, 168, 72) 1px solid;
  color:black;
  background-color:rgb(252, 252, 218)
}

@media(max-width: 350px) {
  p {
    height: 25px;
    width: 25px;
  }
}

@media(max-width: 450px) {
  p {
    height: 30px;
    width: 30px;
  }
}

img {
  height: inherit;
  width: inherit;
}

.timeClickContainer {
  display: flex;
  justify-content: space-around;
  border: rgb(55, 120, 240) 1px solid;
  width: inherit;
  font-size: 40px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: rgba(94, 146, 224, 0.986);
}

@media(max-width: 500px){
  .timeClickContainer {
    flex-direction: column;
  }
}

.displayClickContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  border: rgb(55, 120, 240) 1px solid;
  background-color: rgb(222, 238, 1);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
@media(max-width: 350px){
  .displayClickContainer {
    font-size: 25px ;
  }
}

.cellDark {
  border: rgb(4, 168, 72) 1px solid;
  color: rgb(226, 220, 136);
  background-color: rgb(14, 13, 69);
}

.colorCode0{
  background-color: rgb(215, 216, 211);
}

.colorCode1{
  background-color: rgb(252, 199, 85);
  color: green;
}

.colorCode2{
  background-color: rgb(241, 138, 70);
  color: rgb(202, 251, 68);
}

.colorCode3{
  background-color: rgb(234, 93, 0);
  color: rgb(227, 253, 155);
}

.colorCode4{
  background-color: rgb(196, 9, 40);
  color: rgb(244, 175, 194);
}

.colorCode5{
  background-color: rgb(160, 18, 255);
  color: rgb(71, 238, 168);
}

.colorCode6{
  background-color: rgb(18, 22, 255);
  color: rgb(62, 231, 88);
}

.colorCode7{
  background-color: rgb(7, 203, 252);
  color: rgb(20, 9, 98);
}

.colorCode8{
  background-color: rgb(7, 252, 68);
  color: rgb(243, 54, 21);
}

.windowOver{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items:center;
  top:0;
  width: 100%;
  height: 100%;
  padding: 150px 0 0 0;
  background-color: aqua;
  z-index: 2;
  font-size: 25px;
}

.buttonRepeat {
  width: 80px;
  height: 40px;
  background-color:darkgoldenrod;
  text-align: center;
  font-size: 30px;
  margin: 30px 0 0 0;
  border: 4px rgb(196, 9, 40) solid;
}

.windowWinner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items:center;
  top:0;
  width: 100%;
  height: 100%;
  padding: 200px 0 0 0;
  background-color: rgb(199, 252, 9);
  z-index: 2;
  font-size: 25px;
}

.buttonWinner {
  width: 80px;
  height: 40px;
  background-color:rgb(46, 184, 11);
  text-align: center;
  font-size: 30px;
  margin: 30px 0 0 0;
  border: 4px rgb(211, 85, 106) solid;
}

.buttonStyle {
  background-color:rgb(226, 247, 152);
  border: yellowgreen 2px solid;
  width: 100%;
  font-size: 30px;
  padding: 0 0 3px 0;
  color: rgb(73, 92, 128);
}
@media(max-width: 350px){
  .buttonStyle {
    font-size: 25px;
  }
}

.optionMode {
  display: flex;
  width: 100%;
  font-size: 30px;
  color: rgb(73, 92, 128);
}
@media(max-width: 350px){
  .optionMode {
  flex-direction: column;
  }
}

.windDifficult {
  position: absolute;
  top:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 40px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: rgb(59, 255, 20);
  width: 100%;
  height: 100%;
  padding: 40px 0 0 0;
  background-color:rgb(74, 113, 241);
  z-index: 3;
}
@media(max-width:360px){
  .windDifficult {
  font-size: 30px;
  }
}

.containerButttons {
  display: flex;
}

.buttonEasy {
  font-size: 45px;
  background-color:rgb(82, 82, 241);
  margin: 50px 30px 0 30px;
  padding: 3px 12px 3px 12px;
  border:2px greenyellow solid;
}

.buttonMedium {
  font-size: 45px;
  background-color:rgb(167, 98, 231);
  margin: 50px 30px 0 30px;
  padding: 3px 12px 3px 12px;
  border:2px greenyellow solid;
}

.buttonHard {
  font-size: 45px;
  background-color:rgb(255, 46, 46);
  margin: 50px 30px 0 30px;
  padding: 3px 12px 3px 12px;
  border:2px greenyellow solid;
}

@media(max-width:635px) {
  .buttonEasy {
    font-size: 30px;
    margin: 50px 10px 0 10px;
  }
  .buttonMedium {
    font-size: 30px;
    margin: 50px 10px 0 10px;
  }
  .buttonHard {
    font-size: 30px;
    margin: 50px 10px 0 10px;
  }
}

@media(max-width:390px) {
  .buttonEasy {
    font-size: 20px;
  }
  .buttonMedium {
    font-size: 20px;
  }
  .buttonHard {
    font-size: 20px;
  }
}


.choiseAmmountMines {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 40px;
  padding: 30px;
  color:rgb(213, 208, 218);
}

@media(max-width:340px){
  .choiseAmmountMines {
    font-size: 30px;
  }
}
.selectAmmount {
  width:25%;
  align-self: center;
  font-size: 30px;
  text-align: center;
  color: rgb(255, 3, 3);
  border: 2px rgb(255, 3, 3) solid;
  height: 40px;
  background-color:rgba(7, 59, 7, 0.945);
  margin: 25px;
}
@media(max-width:340px){
  .selectAmmount {
    width:35%;
  }
}
.optionTag{
  
}

.scoreFlagMode {
  display: flex;
  flex-direction: row;
}

.windowScore {
  position: absolute;
  top:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color:yellowgreen;
}

.buttonCloseScore {
  width:20%;
  height: 55px;
  font-size: 30px;
  background-color:darkblue;
  border: 2px rgb(239, 71, 245) solid;
  color: aliceblue;
  margin: 50px 0 40px 0;
}

.lineScore {
  color: rgb(95, 66, 13);
  padding: 10px;
  font-size: 30px;
}
@media(max-width: 350px) {
  .lineScore {
    font-size: 15px;
  }
}

.saveLoadMuteContainer {
  display: flex;
  flex-direction: row;
}

@media(max-width:350px) {
  .saveLoadMuteContainer {
    flex-direction: column;
  }
}

.buttonSave {

}

.buttonLoad {

}

.buttonRestyle {
  background-color:rgb(116, 116, 248)!important;
  color: beige!important;
}

.buttonDark {
background-color: rgb(45, 113, 141);
border: #3e5908 2px solid;
color: rgb(176, 204, 255);
}

.displayClickContainerDark {
  border: rgb(164, 192, 242) 1px solid;
  background-color: rgb(115, 122, 20);
  color: #a4c561;
}

.bodyDark {
  background-color:#4d6461;
}