body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: gray;
}

#canvas {
  display: block;
  background-color: white;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

#menu-container {
  position: relative;
  display: flex; /*flex*/
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: Gainsboro;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 15px solid black;
  border-radius: 15px;
}

#game-container {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
}

.editor-panel {
  width: 20%;
  height: 100%;
  background-color: darkgoldenrod;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
}

#level-editor-container {
  position: relative;
  display: none; /*flex*/
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: sandybrown;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: center;
  border: 15px solid black;
  border-radius: 15px;
  overflow-y: auto;    /* vertical scrollbar appears when needed */
  overflow-x: hidden;  /* prevents horizontal scroll */
}

.level-editor-btn {
  position: relative;
  display: flex;
  width: 80%;
  height: 12.5%;
  margin: 1%;
  background-color: black;
  color: white;
  font-size: 3vh;
  justify-content: center;
  align-items: center;
  border: 5px solid white;
  border-radius: 15px;
}

.level-editor-text {
  font-size: 2vh;
  color: white;
  display: flex;
}

.level-editor-btn:hover {
  background-color: darkgray;
  cursor: pointer;
}

#level-editor-canvas {
  position: relative;
  display: flex;
  background-color: lightgray;
}

.entity-canvas {
  position: relative;
  display: flex;
  background-color: black;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 5px;
}

.entity-canvas:hover {
  cursor: pointer;
}

.entity-drag-preview {
  position: absolute;
  pointer-events: none;  /* prevents capturing clicks */
  z-index: 1000;
  width: 72px;           /* display size */
  aspect-ratio: 1 / 1;
}


#level-selector-container {
  position: relative;
  display: none; /*flex*/
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: whitesmoke;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  border: 15px solid black;
  border-radius: 15px;
  overflow-y: auto;    /* vertical scrollbar appears when needed */
  overflow-x: hidden;  /* prevents horizontal scroll */
}

.level-selector-btn {
  position: relative;
  display: flex;
  width: 50%;
  height: 12.5%;
  margin: 1%;
  background-color: black;
  color: white;
  font-size: 3vh;
  justify-content: center;
  align-items: center;
  border: 8px solid darkorange;
  border-radius: 15px;
}

.level-selector-text {
  font-size: 2vh;
}

.level-selector-btn:hover {
  background-color: darkgray;
  cursor: pointer;
}

.menu-text {
  font-size: 3vh;
  color: yellow;
  text-shadow: 1px 1px 3px red;
}

.menu-big-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6vh;
  color: white;
  text-shadow: 3px 3px 6px black;
}

.menu-btn {
  position: relative;
  display: flex;
  width: 85%;
  height: 12.5%;
  margin: 1%;
  background-color: black;
  color: white;
  font-size: 4vh;
  justify-content: center;
  align-items: center;
  border: 15px solid lime;
  border-radius: 15px;
}

.menu-btn:hover {
  background-color: darkgray;
  cursor: pointer;
}

#difficulty-container {
  position: relative;
  display: none; /*flex*/
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: Gainsboro;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 15px solid black;
  border-radius: 15px;
}

.difficulty-btn {
  position: relative;
  display: flex;
  width: 50%;
  height: 12.5%;
  margin: 1%;
  background-color: black;
  color: white;
  font-size: 3vh;
  justify-content: center;
  align-items: center;
  border: 8px solid darkorange;
  border-radius: 15px;
}

.difficulty-btn:hover {
  background-color: darkgray;
  cursor: pointer;
}

.difficulty-text {
  font-size: 6vh;
}

#timer {
  position: absolute;
  top: 2vh;
  left: 2vw;
  width: 15%;
  height: 5%;
  padding: 10px 20px;
  background-color: rgba(100, 100, 0, 0.4);
  color: white;
  font-size: 5vh;
  z-index: 10;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer:hover {
  background-color: rgba(100, 100, 0, 0.2);
  cursor: default;
}