canvas{
  position:absolute;
  width:100%;
  height:100%;
  left: 0;
  top: 0;
}

body{
  overflow:hidden;
  height: 100%;
  width: 100%;
}

.PartyDisplay{
  position:absolute;
  left:0;
  top:0;
  width:200px;
  z-index: 100;
  height:40%;
  background-color: rgba(100, 100, 100, 0.3);
}

.GameMenu{
  /*width:100%;
  height:100%;
  position:absolute;
  background-color: 0;*/
  text-align: center;
  display:block;
}

.GameMenuWrapper{
  left:0;
  top:0;
  width:100%;
  height:100%;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Title{
  font-size: 7.5em;
  color:#FFFFFF;
  position:absolute;
  top:100px;
  text-shadow: 10px 10px 30px black;
}
.Demo{
  font-size: 1.5em;
  color:#FFFFFF;
  position:absolute;
  top:250px;
  text-shadow: 2px 2px 6px black;
}

.MenuButton{
  height:30px;
  padding:0.2em;
  margin:0.3em;
  background-color:#DADADA;
  display:block;
  line-height:30px;
  cursor: pointer;
  transition: background-color 100ms;
  color: #000000;
}

.MenuButton:hover{
  background-color: #AAAAAA;
}

.PartySelectionWrapper{
  left:0;
  top:0;
  width:100%;
  height:100%;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.PartyWrapper{
  left:0;
  top:0;
  width:100%;
  height:100%;
  position:absolute;
  display: block;
  justify-content: center;
  align-items: center;
}

.PlayerList{
  position:absolute;
  top:10%;
  left:2%;
  width:20%;
  height:70%;
  background-color: #000000;
}

.PlayerListList{
  color:white;
  list-style-type: none;
}

.Chat{
  position:absolute;
  top:10%;
  left:24%;
  right:2%;
  height:70%;
  background-color: #000000;
}

.ChatInput{
  position:absolute;
  height:20px;
  left:0;
  width:100%;
  bottom:0;
}

.StartButton{
  position:absolute;
  top:85%;
  width:20%;
  right: 2%;
  background-color: #00FF44;
  text-align: center;
  height:35px;
  line-height:35px;
  transition: border-radius 100ms, background-color 100ms;
}

.StartButton:hover{
  border-radius:10px;
  background-color:#22FF88;
  cursor: pointer;
}

.MurderEditor{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  z-index:2;
  text-align: center;
}

.HotBar{
  position:absolute;
  width:400px;
  height:40px;
  bottom:10px;
  left:50%;
  transform: translate(-50%, 0);
  background-color:rgba(255,255,255,0.3);
  border: solid 2px #999999;
  border-collapse: collapse;
}

.HotBarSlot{
  text-align: center;
  border-right: solid 2px #999999;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  image-rendering: pixelated;
}

.MurdererDone{
  position:absolute;
  right: 10px;
  top: 10px;
  height: 35px;
  width: 130px;
  text-align: center;
  line-height: 35px;
  background-color:#00FF44;
  transition: border-radius 100ms, background-color 100ms;
}

.MurdererDone:hover{
  border-radius:10px;
  background-color:#22FF88;
  cursor: pointer;
}

.Won{
  position: absolute;
  color: white;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  left: 0;
  text-align: center;
  height: 100%;
  top: 0;
  font-size: 3em;
  font-weight: 900;
}

.HelpColoum{
  width:800px;
  margin:auto;
}

.HelpRow{
  height:150px;
  width:100%;
  margin:20px;
}

.HelpImageWrapper{
  width:40%;
  height:100%;
  float:left;
  text-align: center;
}

.HelpImage{
  height:100%;
  max-width:100%;
}

.HelpTextNextToImageWrapper{
  display:table;
  height:100%;
  float:right;
  width:60%;
}

.HelpTextNextToImage{
  display:table-cell;
  vertical-align: middle;
  font-size: 1.3em;
  font-weight: 500;
  color:white;
}

.HelpMenuButton{
  height:30px;
  padding:0.2em;
  margin:0.3em;
  background-color:#DADADA;
  display:block;
  line-height:30px;
  cursor: pointer;
  transition: background-color 100ms;
  width:100px;
  margin: auto;
  text-align: center;
}

.HelpMenuButton:hover{
  background-color: #AAAAAA;
}

.MessageOverlay{
  transition: opacity 300ms;
  background-color: rgba(0,0,0,0.8);
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  text-align: center;
  opacity:0;
  font-size:2em;
  z-index:2;
}

.Waiting{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  text-align: center;
  font-size:2em;
  z-index:2;
  text-align: center;
  color: #FFFFFF;
  background-color: #000000;
  background-image: url("assets/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  image-rendering: pixelated;
}

.scores {
  margin: auto;
}

.HelpWrapper{
  left:0;
  bottom:50px;
  top:0;
  width:100%;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}

.About{
  left:0;
  top:0;
  width:100%;
  height:100%;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.CenteredText{
  color:white;
  font-size: 1.2em;
  width: 300px;
}

body{
  font-family: 'Roboto', sans-serif;
  background-color: #000000;
  background-image: url("assets/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  image-rendering: pixelated;
}

canvas{
  z-index:1;
}