@font-face {
  font-family: puff;
  src: url(Chewy-Regular.ttf);
}
html{
  overscroll-behavior: contain;
}
body {
  background-color: #737a7a;
  font-family: puff;
  background-image:  repeating-linear-gradient(45deg, #435c2e 25%, transparent 25%, transparent 75%, #435c2e 75%, #435c2e), repeating-linear-gradient(45deg, #435c2e 25%, #3c5229 25%, #3c5229 75%, #435c2e 75%, #435c2e);
  background-position: 0 0, 23px 23px;
  background-size: 46px 46px;
  overscroll-behavior-y: contain;
}

h2{
  font-size: 40px;
  color:#e34141;
  text-shadow: 2px 1px 0 #ffb677;
  text-shadow: #ffb677 2px 1px 1px , #0a0a0a 4px 4px 0px;
}
h1{
  text-align: center;
  font-size: 12vw;
  color:#e34141;
  text-shadow: #ffb677 2px 1px 1px , #0a0a0a 5px 5px 0px;
}

#canvas{
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    overscroll-behavior: contain;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}

.popup {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; right:0;
    top: 0; bottom:0;
    margin:0;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    background-color: #000;
    background-color: rgba(0,0,0,0.75);
    display:none;
    justify-content:center;
    align-items:center;
}

#puzzles, #gameOver{
  display: block;
  text-align: center;
  background-color: #3c5229;
  opacity: 1;
  background-image:  repeating-linear-gradient(45deg, #435c2e 25%, transparent 25%, transparent 75%, #435c2e 75%, #435c2e), repeating-linear-gradient(45deg, #435c2e 25%, #3c5229 25%, #3c5229 75%, #435c2e 75%, #435c2e);
  background-position: 0 0, 23px 23px;
  background-size: 46px 46px;
}

#gameOver{
  display:none;
  background-image: none;
  background-color: rgba(0,0,0,0);

}

#titol{
  background-image: url("../img/titol.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 200px; width: 100%;
}

#nav {
    position: absolute;
    display:flex;
    top: 20px;
    margin-left:  auto;
    margin-right: auto;
}

.btn {
    padding: 12px 24px;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    background-color: #FF3333;
    color : white;
    border: 2px solid black;
    border-radius: 15px;
    font-family: puff;
    font-size: 20px;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 80%; /* Full-width */
  height: 30px; /* Specified height */
  background: #6c8956; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 15px;
  border: 3px solid #ffb677;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 30px; /* Set a specific slider handle width */
  height: 30px; /* Slider handle height */
  background: #c13535; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  border: 3px solid #ffb677;
}

.slider::-moz-range-thumb {
  width: 30px; /* Set a specific slider handle width */
  height: 30px; /* Slider handle height */
  background: #c13535; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  border: 3px solid #ffb677;
}