/* * {
  border: 1px solid blue;
} */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EEF2F7;
  font-family: Raleway, sans-serif;
}

/* Information available on hover -------------------------------------------------------------------- */
.info-hover {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.info-container {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #BB2649;
}

.instructions {
  max-width: 400px;
  padding: 5px 50px 0px 0px;
}

.unhide {
  display: block;
  color: black;
}

/* The game frame. Include top info, grid container, game controls container ------------------------- */
.game-frame {
  width: 800px;
  height: 600px;
  background-color: #BB2649;
  display: flex;
  flex-direction: column;
  border-radius: 50px;
  justify-content: center;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);

}

/* The top info items: brush and game info ---------------------------------------------------------------- */
.top-info {
  display: flex;
  width: 600px;
  align-self: center;
  justify-content: space-between;
}

.top-info div,
.color-mode,
.info {
  color: #EEF2F7;
}

.color-mode,
.info {
  font-weight: 900;
}

/* Container holding the dinamically genetared divs -------------------------------------------------------- */
.grid-container {
    /*box-sizing: content-box;*/
    width: 600px;
    height: 400px;
    border: 3px solid #9a9a9a;
    border-style: inset;
    margin: 10px auto;
    display: flex;
    flex-flow: row wrap;
}

/* Dinamically genetared divs inside grid-container --------------------------------------------------------- */
.grid-container div {
    display: flex;
    background-color: #a6a6a6;
    box-sizing: border-box;
    /*flex-basis of 10px comes from size of the container / number of initial divs inside*/
    /*moved border and flex values from css class to DOM applied styling with a function*/
    /*border: 1px solid lightgrey;*/
    /*flex: 1 1 15px;*/
}

/* The game controls container ------------------------------------------------------------------------------ */
.controls {
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  margin: 25px 10px 10px 10px;
}


/* Colorpicker styling -------------------------------------------------------------------------------------- */
.color-picker {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: center;
}

#colorpick {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.colorpick-label {
  /*display: inline-block;*/
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #EEF2F7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
   inset 20px 20px 60px #bebebe,
   inset -20px -20px 60px #ffffff;
}

.colorpick-label div {
  font-size: medium;
  font-weight: 600;
}

/*.colorpick-label:hover,
#colorpick:focus + .colorpick-label {
  border-color: black;
}

#colorpick:active + .colorpick-label {
  filter: brightness(90%);
} */

/* The Random button styling --------------------------------------------------------------------------- */
#random {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  border: none;
  background-color: #EEF2F7;
  font-size: medium;
  box-shadow:
   inset 20px 20px 60px #bebebe,
   inset -20px -20px 60px #ffffff;
}

/* Slider to increase/ decrease number of divs ---------------------------------------------------------- */

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #EEF2F7;
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #EEF2F7;
  cursor: pointer;
}

.slidecontainer p,
.range-output {
  color: #EEF2F7;
}

.range-output {
  font-weight: 900;
}

/* Grid toggle switch ----------------------------------------------------------------------------------- */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
  border-radius: 50%;
}

/* Toggle switch text */
.switch p {
  width: 90px;
  color: #EEF2F7;
}

/* The Eraser button styling --------------------------------------------------------------------------- */
#eraser {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  border: none;
  background-color: #EEF2F7;
  font-size: medium;
  box-shadow:
   inset 20px 20px 60px #bebebe,
   inset -20px -20px 60px #ffffff;
}

/* The Reset button styling --------------------------------------------------------------------------- */
#reset {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  border: none;
  background-color: #EEF2F7;
  font-size: medium;
  box-shadow:
   inset 20px 20px 60px #bebebe,
   inset -20px -20px 60px #ffffff;
}

/* Shaking features --------------------------------------------------------------------------- */
.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: skew-y-shakeing 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}

@keyframes skew-y-shakeing{
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }
 }

/* Class to hide elements ----------------------------------------------------------------------------- */
.hide {
  display: none;
}