body {
  margin:0 ;
  overflow:hidden ;
}

.screen {
  width:100vw ;
  height:100vh ;
  overflow:hidden ;
}

#menu {
  background-color:lime ;
  color:green ;
  font-family:cursive ;
  text-align:center ;
}

#menu h1 {
  background-color:green ;
  color:lime ;
  border-radius:25px ;
  padding:5px ;
  width:100% ;
}

#menu img {
  width:15% ;
  cursor:pointer ;
  transition:0.1s ;
}

#menu img:hover {
  transform:rotate(-10deg) ;
}

#preview {
  width:100% ;
  height:100% ;
  background-image:url("images/grid.png") ;
}

#openClose {
  position:absolute ;
  margin:10px ;
  margin-left:125px ;
  width:50px ;
  height:50px ;
  font-size:2rem ;
  background-color:white ;
  border: 1px outset #222222 ;
  cursor:pointer ;
}

#openClose:active {
  background-color:lightgrey ;
  border: 1px inset #222222 ;
}

.btm {
  position:absolute ;
  margin:10px ;
  width:100px ;
  height:50px ;
  font-size:2rem ;
  background-color:white ;
  border: 1px outset #222222 ;
  cursor:pointer ;
}

.btm:active {
  background-color:lightgrey ;
  border: 1px inset #222222 ;
}

nav {
  position:absolute ;
  width:300px ;
  height:100% ;
  background-color:white ;
  margin-left:100% ;
  border-left: 1px outset #222222 ;
  overflow:auto ;
  transition:0.1s ;
  text-align:center ;
}

#create {
  font-family:system-ui ;
}

.entity {
  position:absolute ;
}

#newObjectPrompt {
  position:absolute ;
  width:50% ;
  height:50% ;
  background-color:white ;
  margin-left:25vw ;
  margin-top:25vh ;
  border: 1px outset #222222 ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  display:none ;
  z-index:2 ;
}

#textureEditor {
  position:absolute ;
  width:50% ;
  height:50% ;
  background-color:white ;
  margin-left:25vw ;
  margin-top:25vh ;
  border: 1px outset #222222 ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  z-index:2 ;
}

#windowBar {
  width:100% ;
  height:50px ;
  border-bottom: 1px outset #222222 ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
}

.close {
  width:50px ;
  height:50px ;
  border:none ;
  border-left: 1px outset #222222 ;
  background:white ;
  font-size:2rem ;
  cursor:pointer ;
}

.close:active {
  background-color:lightgrey ;
  border-left: 1px inset #222222 ;
}

.windowContent {
  width:100% ;
  height:calc(100% - 50px) ;
  overflow:auto ;
}

.objType {
  width:100% ;
  height:75% ;
  border: 1px outset #222222 ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  cursor:pointer ;
}

.objType:active {
  background-color:lightgrey ;
  border-left: 1px inset #222222 ;
}

#spriteEditor {
  display:none ;
}

.coolBtn {
  background-color:white ;
  color:black ;
  border: 1px outset #222222 ;
  cursor:pointer ;
  margin:5px ;
}

.coolBtn:active {
  background-color:lightgrey ;
  border: 1px inset #222222 ;
}

canvas {
  border: 1px solid black ;
  margin:10px ;
  background-image:url("images/transparent.png") ;
}

#textureEditor {
  display:none ;
}

#gameContent {
  width:100% ;
  height:100% ;
  overflow:auto ;
}

#gameMusic {
  width:90% ;
}

#newEventPrompt {
  position:absolute ;
  width:50% ;
  height:50% ;
  background-color:white ;
  margin-left:25vw ;
  margin-top:25vh ;
  border: 1px outset #222222 ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  z-index:2 ;
  display:none ;
}