@font-face {
  font-family: Mulish-Regular;
  src:url(../assets/Mulish-Regular.woff) format("woff");
}

@font-face {
  font-family: Mulish-Bold;
  src:url(../assets/Mulish-Bold.woff) format("woff");
}

html{
  font-size: 20px;
}

body {
  font-family: Mulish-Bold, Times, serif;
  -webkit-tap-highlight-color:transparent;
  background:white;
}

#container{
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow: hidden;
  background: #edf1f2;
}
#instructions{
  position: absolute;
  top:60%;
  left:50%;
  /* height:100%; */
  /* width:100%; */
  background: rgba(255,255, 255, 1);
  color:darkbrown;
  padding:2%;
  padding-top: 50vh;
  text-align: center;
  white-space: nowrap;
  /* background: url('../assets/background.jpg'); */
  background-color: transparent;
  background-size:100% 100%;
  font-size: clamp(5px, 4.2vh, 6vw);
  z-index: 1000;

  padding: 1em;
  /* background-color: rgba(74,193, 224, .4); */
  border-radius: .5em;

}
#instructions p{
  margin-top:.5em;
  font-size: .8em;
  font-family: Mulish-Regular;
  line-height: 1.1em;

}
.info-container{
  position: absolute;
  display: table;
  top: 0;
  width: 100%;
  height: 5vh;
  pointer-events: none;
  padding: 3% 4%;

  background: rgb(7 33 44);
}
#score,#time{
  opacity: 0;
  font-family: Mulish-Regular;
  font-size: 3vh;
  width:50%;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  pointer-events: none;
  color: #edf1f2;
}
#time{
  text-align: right;
  color: #edf1f2;
}
#time-message{
  position: absolute;
  top:55%;
  white-space: nowrap;
  text-align: center;
  left:50%;
  transform:translate(-50%, -50%);
  pointer-events: none;
  font-size: 1.3rem;
  opacity: 0;
  color:#FD545E;
}
button{
  font-size: clamp(5px, 3vh, 4.5vw);
  font-family: Mulish-Bold;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  /* background: green; */
  background-image: linear-gradient(to right, #00CE7C  , #4AC1E0);

  border-radius: 10px;
  /* min-width: 220px; */
  border:none;
  color: white;
  padding:.7em 1.9em;
  white-space: nowrap;
  
  /* padding: 5px; */
}

.background{
  width:100%;
  position: absolute;
  top:calc(5vh - 1px);
  left:0;
  pointer-events: none;
}
.background:nth-of-type(2){
  top:auto;
  bottom:0;
  z-index: 20;
}

.mole-row{
  position: absolute;

  width:100%;
  height:23%;
  max-height: 150px;
  min-height: 120px;
  padding:0 8%;

  opacity: 0;
}

.holes-cover, .holes-background{
  top:0;
  left:0;
  width:100%;
  position: absolute;
  pointer-events: none;
}

.holes-background{
  top:50%;
}

.holes-cover{
  top:64%;
  /* background:red; */
}

#back-row{
  top:40%;
}

#front-row{
  top:58%;
}


.pointer-events-none{
    pointer-events: none;
}

.mole-hole{
  position: relative;
  width:33.33%;
  height:100%;
  /* background: white; */
  float: left;
  overflow: hidden;
}
.mole-img{
  width:60%;
  position: absolute;
  top:0;
  left:50%;
  transform:translate(-50%,200px);
  opacity:0;
}
.mole-img[src="assets/moles/cookiegrinch.png"]{
  top:5%;
}

#logo{
  position: absolute;
  top:12%;
  width:33%;
  left:50%;
  transform:translate(-50%,-50%)
  
}

.final {
  position: absolute;
  font-size: clamp(5px, 4.2vh, 6vw);
  width: 100%;
  top:54%;
  pointer-events: none;
}


#final-score{
  /* position: absolute;
  left:50%;
  transform:translateX(-50%); */
  width:auto;
  bottom: 37vh;
  text-align: center;
  opacity:0;
    font-size: 1.2em;
  /* font-size: 40px; */
 
  white-space: nowrap;
  pointer-events: none;

  padding: .25em;
  /* background-color: rgba(74,193, 224, .4); */
  border-radius: .5em;
}

#final-text{
  /* position: absolute;
  left:50%;
  transform:translateX(-50%); */
  margin-top:1em;
  width:auto;
  text-align: center;
  opacity:0;
  font-size: .8em;
  font-family: Mulish-Regular;
  line-height: 1.1em;
  pointer-events: none;
  padding: .25em;
  /* background-color: rgba(74,193, 224, .4); */
  border-radius: .5em;
}

#play{
  bottom:-4.5em;
  width: 9em;
    height: 2.8em;
    border: .1em solid transparent;
}


#visit-site{
  position: relative;
  pointer-events: none;
  width: 11.5em;
  height: 2.8em;
  margin-top:.5em;
  opacity: 0;
  background-image: linear-gradient(to right, #00CE7C  , #4AC1E0);
}

#reset{
  display:none;
  opacity:0;

  position: relative;
  background-color: transparent;
  border: .1em solid #00CE7C;
  color: #00CE7C;
  width: 11.5em;
    height: 2.8em;
margin-top:1.2em;
  background-image: unset;
}
#mute{
  position: absolute;
  width:6%;
  left:20px;
  top: 10vh;
  z-index: 22;
}
#mute svg{
  position: absolute;
  width:100%;
  left:0;
  top:0;
  pointer-events: none;
}
#mute svg:nth-of-type(1){
  position: relative;
}

#mute svg * {
  visibility: inherit;
}

#mute-off{
  visibility: hidden;
}


.feedback{
  position: absolute;
  z-index: 20;
  pointer-events: none;
}
.points{
  position: absolute;
  z-index: 22;
  text-align:center;
  pointer-events: none;
  font-size: 1.2rem;
}

.snowflake{
  position: absolute;
  pointer-events: none;
}

@media (min-height:700px) {
  /* #logo{
    top:11%;
  } */

}


/* NEW */


.logo {
  position: absolute;
  left: 50%;
  top: -3.2em;
  height: 10vh;
  display: none;
}

.end-logo {
  position: absolute;
  left:50%;
  transform:translateX(-41%);
  height: 8vh;
  bottom: 44vh;
  opacity:0;

  display: none;
}