html,body{
  margin:0;
  padding:0;
  overflow:hidden;
  font-family:"Press Start 2P",monospace;
}

canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  background:url("images/background-1.png") center/cover no-repeat;
  z-index:0;
  pointer-events:none;
}

#menu,
#settings{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
}

img.btn{
  position:absolute;
  cursor:pointer;
  image-rendering:pixelated;
  transform:translate(-50%,0);
  transition:0.1s;
  width:min(42vw,360px);
  max-width:360px;
  height:auto;
}

#ui{
  position:absolute;
  top:5%;
  width:100%;
  text-align:center;
  color:white;
  font-size:16px;
  text-shadow:2px 2px 2px black;
  z-index:11;
}

#winner{
  margin-top:12px;
  color:#ffe66d;
}

#settings{
  display:none;
  background:url("images/background-2.png") center/cover no-repeat;
  color:black;
  text-align:center;
}


.settings-content-wrapper {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 480px;
  height: 340px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.settings-content {
  font-size: 2.2em;
}

#settings p {
  font-size: 1.1em;
  margin-bottom: 18px;
}

#settings #timeInput {
  font-size: 1.1em;
  margin-bottom: 24px;
}

#timeInput{
  font-family:"Press Start 2P",monospace;
  width:120px;
  text-align:center;
}

#b2{
  top:55%;
  left:50%;
}

#b3{
  top:65%;
  left:50%;
}

#b4{
  top:75%;
  left:50%;
}

#startBtn,
#backBtn{
  width:min(34vw,280px);
}


#startBtn{
  top:270px;
  left:50%;
}

#backBtn{
  top:340px;
  left:50%;
}

@media (max-width: 768px){
  img.btn{
    width:min(70vw,360px);
  }

  #startBtn,
  #backBtn{
    width:min(58vw,280px);
  }
}