body {
  height: 100vh;
  /*background: url('../backgrounds/tile.png');*/
  background: url('../backgrounds/congruent.png');
  background-color: darkgrey;
  cursor: default;
}

.canvas {
  border: 1px solid black;
  border-radius: 5px;
  background: url('../backgrounds/wasteland.jpg');
  background-position: bottom;
  height: 500px;
  margin: 0 auto;
}

.modal {
  height: 500px;
  width: 1200px;
  position: absolute;
  margin: 0 calc((100% - 1200px) / 2);
  border-radius: 5px;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;

}

.canvasContainer {
  display: flex;
  overflow: hidden;
  user-select: none;
  z-index: 1;
}

.start-btn, .continue_btn {
  padding: 0 10px;
  background: #FF0000;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 52px;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 10px;
  box-shadow: 0 2 5 rgba(0, 0, 0, .4);
  cursor: pointer;
}

.start_text {
  cursor: pointer;
}

.game_title, .game_over_title {
  font-size: 120px;
  font-family: 'Bangers', cursive;
  color: white;
  text-shadow: -5px 4px 0 #000;
}
.start_window, .game_over_window {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  position: absolute;
  align-self: center;
}


.open_screen {

}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility .25s, opacity .25s linear;
}

.game_over{
  /*flex-direction: column-reverse;*/
}


.main-modal{
  z-index: 10;
  position: absolute;
  border-radius: 4px;
  background: red;
  width: 100vw;
}

.active{
  display: none;

}

.info_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-title {
  font-family: 'Bangers', cursive;
  color: white;
  font-size: 48px;
  text-align: center;
  display: flex;
  align-items: center;
  user-select: none;

}
.instructions {
  display: flex;
  flex-direction: column;
  color: white;
  font-family: 'Roboto', cursive;
  font-size: 26px;
  user-select: none;
}


.modal-backdrop {
  /*position: fixed;
  z-index: 5;
  background: rgba(0, 0, 0, 0.75);*/
  }

.info-bar {
  display: flex;
  justify-content: flex-end;
  width: 1200px;
  margin: auto;
  margin-bottom: 5px;
  user-select: none;
}

/* CONTACT ICONS */
.icons {
  cursor: default;
}

ul.icons li {
	display: inline-block;
	line-height: 1em;
	padding-left: 0.25em;
}

.icon {
	text-decoration: none;
	position: relative;
  font-family: FontAwesome;
  font-style: normal;
}

.icon.circle {
	transition: all 0.2s ease-in-out;
	border-radius: 100%;
	display: inline-block;
	height: 2.25em;
	left: 0;
	line-height: 2.25em;
	text-align: center;
	text-decoration: none;
	top: 0;
	width: 2.25em;
}

.icon.circle:hover {
	top: -0.2em;
}

.fa-github {
	background: #dcad8b;
	color: #fff;
}

.fa-github:hover {
	background: #e1b89b;
	background: #F1C5A9;
}

.fa-linkedin {
	background: #0077B5;
	color: #fff;
}

.fa-linkedin:hover {
  background: #0087CF;
}