@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');:root {
  --color-page-1: #5c529e;
  --color-page-2: #C3C3E5;
  --color-page-3: #6997ac;
  --color-page-4: #F1F0FF;
  --color-page-5: #e4e4f5;
  --text-color-1: #000000;
  --text-color-2: #282828;
  --text-color-3: #505050;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background-color: var(--color-page-1);
  font-family: 'Dosis', 'Times New Roman', Times, serif;
}

button {
  background-color: var(--color-page-4);
  border: 3px outset white;
  border-radius: 3px;
}button:hover {
  background-color: white;
}button:active {
  background-color: #eee;
}

p {
  margin: 0;
}



/* - - - general - - - */

.flex {
  display: flex;
}.flex-item-auto {
  flex: 1 1 auto;
}.flex-item-no-basis {
  flex: 1 1 0;
}.flex-item-no-grow {
  flex: 0 0 auto;
}

.flex-h-center {
  justify-content: center;
}.flex-h-start {
  justify-content: flex-start;
}.flex-h-end {
  justify-content: flex-end;
}.flex-justify-between {
  justify-content: space-between;
}.flex-justify-around {
  justify-content: space-around;
}
.flex-v-center {
  align-items: center;
}.flex-v-start {
  align-items: flex-start;
}.flex-v-end {
  align-items: flex-end;
}

.flex-row {
  flex-direction: row;
}.flex-column {
  flex-direction: column;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}



/* - - - game related - - - */
.board {
  flex-direction: column;
  width: 95vw;
  max-width: 1500px; /*temporal solution*/
  background-color: darkred;
}
.row {
  display: flex;
  flex: 1 1 auto;
}
.tile {
  display: flex;
  flex: 1 1 0;
  aspect-ratio: 1/1;
  border: 4px outset #fff;
  background-color: #ddd;
  justify-content: center;
}.tile.hover {
  background-color: #eee;
}.tile.active {
  background-color: #ccc;
  border-style: inset;
}.tile.revealed {
  transition: 250ms;
  background-color: #ccc;
  border: 4px solid #bbb;
}

.tile-image {
  width: 100%;
}

.boom1 {
  transition: ease-in-out 300ms;
  transform: scale(200%);
  box-shadow: 0 0 20px darkred;
}.boom2 {
  transition: ease-in-out 350ms;
  transform: scale(40%);
  box-shadow: 0 0 30px white;
}.boom3 {
  transition: ease-in-out 400ms;
  transform: scale(150%);
  box-shadow: 3px 3px 10px black;
}.boom4 {
  transition: ease-in-out 600ms;
  transform: scale(80%);
  box-shadow: 0 0 0px black;
}.boom5 {
  transition: ease-in-out 800ms;
  transform: scale(100%);
  /* box-shadow: 0 0 50px white; */
}
.z9 {
  z-index: 9;
}.z8 {
  z-index: 8;
}.z7 {
  z-index: 7;
}.z6 {
  z-index: 6;
}.z5 {
  z-index: 5;
}.z4 {
  z-index: 4;
}.z3 {
  z-index: 3;
}.z2 {
  z-index: 2;
}.z1 {
  z-index: 1;
}

.shrink {
  transform: scale(0%);
}
.game-start {
  animation: growing 500ms;
}
@keyframes growing {
  from {
    transform: scale(0%);
  }
  to {
    transform: scale(100%);
  }
}
.background-boom {
  animation: exploding 5s;
}
@keyframes exploding {
  from {
    background-color: rgba(255, 0, 0, 0);
  }
  15% {
    background-color: rgba(150, 0, 0, 1);
  }
  50% {
    background-color: rgba(150, 0, 0, .7);
  }
  75% {
    background-color: rgba(150, 0, 0, .4);
  }
  to {
    background-color: rgba(255, 0, 0, 0);
  }
}

/*preventing animation inconsistency*/
.tile.revealed-no-transition { 
  background-color: #ccc;
  border: 4px solid #bbb;
}.revealed.mine {
  background-color: darkred;
  border-color: darkred;
}



/* - - - specifics - - - */


/*interface*/

header {
  background-color: var(--color-page-1);
  /* padding: 3px; */
  box-shadow: 0 0 5px black;
  z-index: 98;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
}

.language-selector {
  --width: 75px;
  background-color: var(--color-page-3);
  border-color: var(--color-page-1);
  font-size: 18px;
  width: var(--width);
  margin-left: calc(var(--width)*-1);
}

.content {
  background-image: url(./media/images/wallpaper.jpg);
  background-size: cover;
  background-blend-mode: darken;
}

.button-menu {
  --size: 25px;
  z-index: 1;
  width: var(--size);
  height: var(--size);
  margin-right: calc(var(--size)*-1);
}

.dropdown-menu {
  position: absolute;
  z-index: 97;
  background-color: var(--color-page-3);
  padding: 30px 0 0 0;
  transition: 200ms;
}.dropdown-option {
  font-family: 'Dosis', 'Times New Roman', Times, serif;
  font-size: 18px;
  padding: 10px;
  background-color: var(--color-page-4);
  border: 1px solid var(--color-page-3);
  border-radius: 0;
}.dropdown-option:hover {
  background-color: var(--color-page-2);
  transition: 200ms;
}.dropdown-option:active {
  background-color: var(--color-page-4);
  transition: 50ms;
}.hidden-dropdown{
  margin-top: -150px;
  transition: 200ms;
}

.play-area {
  background-color: #ddd;
  border: 5px ridge white;
  box-shadow: 0 5px 20px #312c55;
}

.top-board {
  border-bottom: 4px ridge white;
  padding: 2px 7px;
}

.face {
  width: 30px;
  height: 30px;
}

.display-numbers{
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 5px;
  background-color: #333;
  border: 3px inset white;
  
}.display-numbers>img {
  /* flex: 1 1 auto; */
  width: 15px;
}

/*prompts*/

.hidden {
  display: none;
}

.full-screen-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  box-shadow: inset 0 0 20px black;
}

.prompt {
  position: absolute;
  z-index: 99; /*prevents animations to appear on top*/
  width: 400px;
  border-radius: 16px;
  box-shadow: 3px 3px 10px black;
}
.prompt-top {
  font-weight: 600;
  padding: 2px;
  border-radius: 15px 15px 0 0;
  background-color: var(--color-page-3);
  padding: 5px 10px;
  font-size: 20px;
}.prompt-button-x {
  --size: 30px;
  margin-left: auto;
  border: 2px solid var(--color-page-2);
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size)*-1);
}.prompt-center {
  background-color: var(--color-page-4);
  padding: 15px;
  flex: 1 1 auto;
  font-weight: 600;
}.prompt-bottom {
  background-color: var(--color-page-4);
  margin-top: auto;
  padding: 10px;
  border-radius: 0 0 15px 15px;
}.prompt-bottom>button {
  display: flex;
  flex: 0 0 auto;
  width: 100px;
  justify-content: center;
}
.how-to-play {
  height: 500px;
  overflow-y: auto;
  padding: 20px;
  font-size: 18px;
  color: var(--text-color-3);
}.how-to-play>img{
  width: 90%;
  margin: 20px 0;
}

fieldset {
  margin: 5px;
  background-color: var(--color-page-5);
  border: 3px ridge white;
  box-shadow: 2px 2px 0 var(--color-page-2);
}
legend {
  border: 2px ridge white;
  padding: 2px 5px;
  background-color: var(--color-page-5);
  box-shadow: 2px 2px 0 var(--color-page-2);
}
input[type="range"]{
  appearance: none;
  margin-bottom: 10px;
  border-radius: 3px;
  height: 10px;
  background-color: var(--color-page-2);
  border: 3px inset white;
}input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb
{
  appearance: none;
  border-radius: 3px;
  width: 50px;
  transform: scale(110%);
  border: 3px outset white;
  background-color: var(--color-page-5);
}

/*prompt content*/

.options{
  font-size: 20px;
  color: var(--text-color-2);
}
.win-message,
.lose-message{
  color: var(--text-color-2);
  font-size: 50px;
  text-align: center;
}
.about>ul {
  padding: 0 20px;
  list-style-type: none;
}.about>ul>li {
  padding: 10px 0;
}.github-logo {
  width: 12px;
}

.checkboxes {
  display: grid;
  grid-template-columns: 1fr 10fr;
  gap: 10px;
}
input[type="checkbox"]{
  transition: 150ms;
  appearance: none;
  box-shadow: inset 0 0 0 8px var(--color-page-4);
  border: 2px solid gray;
  border-radius: 3px;
  width: 1.5em;
  height: 1.5em;
}input[type="checkbox"]:hover {
  border-color: #999;
}input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 2px var(--color-page-4);
  background-color: var(--color-page-1);
  transition: 150ms;
}

/*for testing*/
** {
  box-shadow: inset 0 0 1px black;
}