* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  margin: 0;
}

h1 {
  font-size: 45px;
  color: #fff;
}

h2 {
  margin-top: 5px;
  text-align: center;
}

canvas {
  background: #f0f0f0;
  display: block;
  border-radius: 5px;
  width: 90%;
  max-width: 800px;
  z-index: -1;

}
.checkbox{
  width: 15px;
  height: 15px;
  border-radius: 100%;
}
.btn {
  cursor: pointer;
  border: 0;
  width: 60px;
  height: 60px;
  background: white;
  color: black;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50%;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.9);
}

.rules-btn {
  position: absolute;
  top: 30px;
  left: 30px;
}
.close-btn{
  z-index: 10;
}

.rules {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.527);

  color: #fff;
  min-height: 100vh;
  width: 90%;
  max-width: 500px;
  padding: 20px;
  line-height: 1.5;
  transform: translateX(-110%);
  transition: transform 1s ease-in-out;
}
.rules-info{
  background-color: white;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.rules.show {
  transform: translateX(0);
}

.win{
  position: absolute;
  top: 50%-100px;
  left: 50%-200px;
  width: 45%;
  padding: 20px;
  line-height: 1.5;
  transform: translateX(-200%);
  transition: transform 1s ease-in-out;
  background: rgba(255, 255, 255, 0.527);
  text-align: center;
  color: black;
  border-radius: 5%;
}
.win.show{
  transform: translateX(0);
}

.win h2{
  margin: 0;
  padding: 0;
}

.blur {
  filter: blur(10px);
}

.btn-grup{
  display: flex;
  margin-top: 30px;
  width: 30%;
  justify-content: space-between;
}
.display-none{
  display: none;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/* @media all and (max-width: 1000px){
  .btn-grup{
    display: flex;
    margin-top: 30px;
    width: 30%;
    justify-content: space-between;
  }
} */