/* oNgnissiM 10/28/2024
	Adapted from https://javascript30.com/
	Whack A Mole
	Changed mole class to cirno class
  reduced hole width
  reduced header padding
  added top margin to h1
  centered button
  adjusted game width and height
  Change background color to a light blue
  Changed mole (cirno) image to an animated Cirno gif
  Changed transition from all to top (listening to all tried transitioning images)
*/

html {
  box-sizing: border-box;
  font-size: 10px;
  background: #00aec5;
  width: 100%;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Amatic SC', cursive;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

button {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50px;
  height: 20px;
}

h1 {
  text-align: center;
  font-size: 10rem;
  line-height: 1;
  margin-bottom: 0;
  margin-top: 3rem;
}

.score {
  background: rgba(255, 255, 255, 0.2);
  padding: 0 3rem;
  line-height: 1;
  border-radius: 1rem;
}

.game {
  /*width: 600px;
  height: 400px;*/
  width: 90%;
  height: calc(100% - 13rem - 20px);
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
}

.hole {
  /*flex: 1 0 33.33%;*/
  flex: 1 0 20%;
  overflow: hidden;
  position: relative;
}

.hole:after {
  display: block;
  background: url(images/dirt.svg) bottom center no-repeat;
  background-size: contain;
  content: '';
  width: 100%;
  height: 70px;
  position: absolute;
  z-index: 2;
  bottom: -30px;
}

.cirno {
  /*background: url('mole.svg') bottom center no-repeat;
  background-size: 60%;*/
  background: url('images/rise.gif') bottom center no-repeat;
  background-size: auto 80%;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition: top .4s;
}

.hole.up .cirno {
  top: 0;
}