body {
  /* Fallback background */
  background: url(../images/homepage.jpg) no-repeat center center fixed;

  /* Gradient background */
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(../images/homepage.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


h1 {
  font-family: 'Helvetica Neue', sans-serif;
  color: lightgrey;
  font-weight: bold;
  font-size: 62px;
  margin-top:35px;
  background:none;
  margin-left:70px;
  margin-right:70px;
}

@media screen and (min-width: 420px) {
    h1 {
      font-size: 68px;
    }
}

/* Start Playing button */
#enter-name-begin-btn {
  background-color: #aa0000;
  border-color:#aa0000;
}

/* Create game button */
#startGameButton {
  background-color: #aa0000;
  border-color:#aa0000;
}


#pre-name-container {
}

#post-name-container {
  position: absolute;
  top: 25%;
  width: 100vw;
}

.join-game-btn {
	width: 100%;
}

#games-list {
  margin-bottom: 0px;
}

#game-options-panel {
  margin-left: 0px;
  margin-right: 0px;
}

#game-name-entry {
  margin-bottom: 15px;
}

#decimal-resources-label {
  margin-top: 15px;
}

#dynamic-rates-container {
  margin-top: 15px;
}

.vertical-center {
  overflow-x: auto;
}

.vertical-center span {
  white-space: nowrap;
}

.background-viewport {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #EEEEEE;
	z-index: -1;
}

.hexagon-wrapper-home {
  text-align: center;
  position: absolute;
  display: inline-block;
  z-index: 1;
}

.hexagon-home {
  height: 100%;
  width: 57.735%;
  display: inline-block;
  z-index: 1;
}

.hexagon-home:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
  z-index: 1;
}

.hexagon-home:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
  z-index: 1;
}

.hexagon-home, .hexagon-home:before, .hexagon-home:after {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}


#animated-hex {
	width: 400px;
	height: 400px;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: rotatingHex;
}

@keyframes rotatingHex {
	from {
		transform: translate(calc(50vw - (200px * 1.15470)), calc(65vh - 200px)) perspective(400px) rotateX(45deg) rotate(0deg);
	}

	to {
		transform: translate(calc(50vw - (200px * 1.15470)), calc(65vh - 200px)) perspective(400px) rotateX(45deg) rotate(360deg);
	}
}