/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
#canvas {
  background-color: black;
  margin: auto;
  display: block;
  padding: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}

html {
  height: 100%;
}

#game-description {
  color: rgb(4, 6, 10);
  background-color: rgb(230, 227, 23);
  padding: 50px;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  top: 20%;
  left: 10%;
  right: 10%;
  font-family: "Common Pixel", sans-serif;
  border-radius: 100px;
}

/* #Game-over-screen{
    color: rgb(4, 6, 10);
    background-color: rgb(230, 227, 23);
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: fixed;
    align-items: center;
    top: 20%;
    left: 10%;
    right: 10%;
    font-family: 'Common Pixel', sans-serif;
    border-radius: 100px;
} */
#winning-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #212121;
  font-family: "Common Pixel", sans-serif;
}

#winning-screen h1 {
  font-size: 5rem;
  color: #81c784;
  text-shadow: 2px 2px 0px #000000;
}

#winning-screen button {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #81c784;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 1px 1px 0px #000000;
}

#winning-screen button:hover {
  background-color: #a5d6a7;
}

#main-menu-button {
  background-color: #757575;
}

#main-menu-button:hover {
  background-color: #999999;
}

#Game-over-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #333333;
  font-family: "Common Pixel", sans-serif;
}

#Game-over-screen h1 {
  font-size: 5rem;
  color: #ff6666;
  text-shadow: 2px 2px 0px #000000;
}

#Game-over-screen button {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #ff6666;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 1px 1px 0px #000000;
}

#Game-over-screen button:hover {
  background-color: #ff9999;
}

#Game-over-screen button:last-child {
  margin-top: 1rem;
  background-color: #333333;
  color: #ffffff;
}

#Game-over-screen button:last-child:hover {
  background-color: #666666;
}

button {
  padding: 5px 20px;
  margin: 5px 5px;
  background-color: transparent;
  font-family: "Common Pixel", sans-serif;
  border-radius: 10px;
  position: relative;
}

#game-instruction {
  align-items: center;
  text-align: center;
}

#canvas {
  display: none;
}

#game-instruction {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 40%;
  left: 35%;
  align-items: center;
  font-family: "Common Pixel", sans-serif;
}

#icons {
  flex-direction: row;
}

#img1 {
  width: 47px;
  height: 47px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

#img2 {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 20%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}