*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  overflow:hidden;
  background:#050510;
  color:white;
}

canvas{
  display:none;
}

/* MENU */

#menu{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:20px;

  background:
  linear-gradient(
    180deg,
    #050510,
    #151540
  );

  z-index:10;
}

#title{

  font-size:80px;

  color:cyan;

  text-shadow:
  0 0 20px cyan,
  0 0 40px cyan;
}

.menuBtn{

  width:280px;

  padding:18px;

  border:none;

  border-radius:15px;

  background:#111;

  color:white;

  font-size:24px;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
  0 0 20px cyan;
}

.menuBtn:hover{

  transform:scale(1.05);
}

/* LEVEL SELECT */

#levelSelect{

  position:absolute;

  inset:0;

  display:none;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:20px;

  background:
  linear-gradient(
    180deg,
    #050510,
    #151540
  );

  z-index:20;
}

#levelTitle{

  font-size:60px;

  color:magenta;

  text-shadow:
  0 0 20px magenta;
}

.levelBtn{

  width:300px;

  padding:18px;

  border:none;

  border-radius:15px;

  background:#111;

  color:white;

  font-size:24px;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
  0 0 20px magenta;
}

.levelBtn:hover{

  transform:scale(1.05);
}

/* SETTINGS */

#settingsMenu{

  position:absolute;

  inset:0;

  display:none;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:25px;

  background:
  linear-gradient(
    180deg,
    #050510,
    #151540
  );

  z-index:30;
}

#settingsTitle{

  font-size:60px;

  color:cyan;

  text-shadow:
  0 0 20px cyan;
}

.settingBox{

  display:flex;

  flex-direction:column;

  gap:10px;

  width:300px;
}

.settingBox label{

  font-size:22px;
}

.settingBox select{

  padding:15px;

  border:none;

  border-radius:10px;

  background:#111;

  color:white;

  font-size:18px;

  box-shadow:
  0 0 15px cyan;
}

/* PAUSE MENU */

#pauseMenu{

  position:absolute;

  inset:0;

  display:none;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:20px;

  background:
  rgba(0,0,0,0.7);

  backdrop-filter:blur(10px);

  z-index:50;
}

#pauseTitle{

  font-size:70px;

  color:white;

  text-shadow:
  0 0 20px cyan;
}

.pauseBtn{

  width:280px;

  padding:18px;

  border:none;

  border-radius:15px;

  background:#111;

  color:white;

  font-size:24px;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
  0 0 20px cyan;
}

.pauseBtn:hover{

  transform:scale(1.05);
}

/* UI */

#fpsCounter{

  position:absolute;

  top:20px;
  left:20px;

  z-index:5;

  font-size:22px;
}

#coinCounter{

  position:absolute;

  top:60px;
  left:20px;

  z-index:5;

  font-size:22px;

  color:gold;
}