@font-face {
  font-family: highScore;
  src: url(fonts/MonstersAttack.ttf); }
@font-face {
  font-family: openSans;
  src: url(fonts/OpenSans.ttf); }
@font-face {
  font-family: arcade;
  src: url(fonts/arcade.ttf); }
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
  font-family: openSans, sans-serif; }
  html body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    text-align: center; }
    html body h1 {
      display: block;
      font-size: 2em;
      -webkit-margin-before: 0.67em;
      -webkit-margin-after: 0.67em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      font-weight: bold;
      font-family: openSans, sans-serif; }
    html body h2 {
      display: block;
      font-size: 1.5em;
      -webkit-margin-before: 0.83em;
      -webkit-margin-after: 0.83em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      font-weight: bold;
      font-family: openSans, sans-serif; }
    html body h3 {
      display: block;
      font-size: 1.17em;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      font-weight: bold;
      font-family: openSans, sans-serif; }
    html body button:focus {
      outline: 0; }
    html body button {
      cursor: pointer; }
    html body .topTitle {
      margin-top: -10px; }
    html body .backButton > i {
      text-decoration: none; }
    html body .backButtonContainer {
      width: 128px;
      margin-bottom: 10px; }
      html body .backButtonContainer .backButtonATag {
        text-decoration: none; }
        html body .backButtonContainer .backButtonATag .backButton > i {
          margin-right: 10px;
          font-size: 25px; }
        html body .backButtonContainer .backButtonATag .backButton {
          width: 127px;
          height: 30px;
          font-size: 18px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin: auto;
          cursor: pointer;
          background-color: white;
          border: none;
          color: black; }

html #indexBody input:focus {
  outline: 0; }
html #indexBody input[type=text]:focus {
  border-bottom: 1px solid blue; }
html #indexBody input[type=text] {
  border: none;
  border-bottom: 1px solid black; }
html #indexBody a {
  color: black;
  text-decoration: none; }
html #indexBody .fas {
  cursor: pointer; }
html #indexBody #topBar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }
  html #indexBody #topBar #gameTitle {
    width: 25%; }
  html #indexBody #topBar .buildingContainer > button {
    margin: 5px auto; }
  html #indexBody #topBar .buildingContainer {
    border: 1px solid black;
    margin: auto 5px;
    width: 75%;
    margin-right: 11px; }
    html #indexBody #topBar .buildingContainer .buildingContainerContent > div {
      margin: auto 10px; }
    html #indexBody #topBar .buildingContainer .buildingContainerContent {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center; }
      html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons {
        width: 75%;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        flex-wrap: wrap; }
        html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons #sendSoldierToClaimLand {
          margin-bottom: 14px; }
          html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons #sendSoldierToClaimLand input {
            width: 100px; }
        html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons .buildingButtonBox > p {
          margin-bottom: 2px; }
        html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons .buildingButtonBox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: auto 5px 10px 5px; }
          html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons .buildingButtonBox button {
            width: 310px;
            margin-bottom: 5px;
            background-color: #ccc; }
html #indexBody .cityName {
  width: 180px; }
html #indexBody .cityInputsContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }
  html #indexBody .cityInputsContainer #cityNameInput {
    margin: auto 10px; }
html #indexBody .pageLinkContainer > a {
  margin: auto 10px; }
html #indexBody .pageLinkContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: auto; }
  html #indexBody .pageLinkContainer div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center; }
  html #indexBody .pageLinkContainer .pageLink {
    color: black;
    text-decoration: none; }
  html #indexBody .pageLinkContainer .muteIndicator {
    font-size: 23px;
    margin-bottom: 5px;
    cursor: pointer; }
html #indexBody #creditsLinkBox {
  margin-top: -15px; }
html #indexBody #scoresLinkBox {
  margin-top: -15px; }
html #indexBody .mainGameContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 15px; }
  html #indexBody .mainGameContainer .gameBox {
    border: 1px solid black;
    width: 50px;
    height: 580px; }
  html #indexBody .mainGameContainer .leftGameBox {
    margin: auto 10px;
    width: 22.5%; }
    html #indexBody .mainGameContainer .leftGameBox .inventoryMainContainer {
      display: flex;
      flex-direction: row;
      justify-content: center; }
  html #indexBody .mainGameContainer .middleGameBox {
    margin: auto 5px;
    width: 70%; }
    html #indexBody .mainGameContainer .middleGameBox .gameTextContainer {
      margin-bottom: 0;
      height: 120px; }
      html #indexBody .mainGameContainer .middleGameBox .gameTextContainer .gameText {
        font-size: 19px; }
      html #indexBody .mainGameContainer .middleGameBox .gameTextContainer #gameWarnings {
        color: #f53d3d; }
    html #indexBody .mainGameContainer .middleGameBox .mainInfo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap; }
      html #indexBody .mainGameContainer .middleGameBox .mainInfo .mainSatsTitle {
        margin-right: 5px; }
      html #indexBody .mainGameContainer .middleGameBox .mainInfo .mainCounter {
        margin-right: 15px; }
    html #indexBody .mainGameContainer .middleGameBox .populationButtons > button {
      height: 29px;
      width: 166px;
      font-size: 12px;
      margin: auto 3px; }
    html #indexBody .mainGameContainer .middleGameBox .populationButtons {
      display: flex;
      flex-direction: column;
      align-content: center;
      flex-wrap: wrap; }
      html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox {
        margin: 10px auto; }
        html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox .mainGameBtn {
          height: 35px;
          width: 200px;
          font-size: 13px;
          margin: 0; }
        html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox .farmerBtn {
          background-color: #533C16;
          color: white; }
        html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox .soldierBtn {
          background-color: #4D5227;
          color: white; }
        html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox .minerBtn {
          background-color: #FFD700;
          color: black; }
        html #indexBody .mainGameContainer .middleGameBox .populationButtons .converterButtonBox .lumberJackBtn {
          background: url("../assets/images/plaid.png") no-repeat;
          background-size: cover;
          color: white; }
    html #indexBody .mainGameContainer .middleGameBox .mainButtonContainer .nextDayBtn {
      height: 29px;
      width: 166px;
      font-size: 12px;
      margin-top: 15px; }
  html #indexBody .mainGameContainer .rightGameBox {
    margin: auto 10px;
    width: 22.5%; }
    html #indexBody .mainGameContainer .rightGameBox .researchContainer .researchButtonBox {
      margin-bottom: 10px; }
      html #indexBody .mainGameContainer .rightGameBox .researchContainer .researchButtonBox .researchIndivButtonBox {
        margin-bottom: 10px; }
        html #indexBody .mainGameContainer .rightGameBox .researchContainer .researchButtonBox .researchIndivButtonBox p {
          margin-bottom: 2px; }
        html #indexBody .mainGameContainer .rightGameBox .researchContainer .researchButtonBox .researchIndivButtonBox .researchBtn {
          background-color: #113A74;
          color: white; }
html #indexBody .bottomGameContainer {
  width: 98.6%;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  justify-content: center; }
  html #indexBody .bottomGameContainer .bottomGameContentContainers {
    width: 50%;
    border: 1px solid black; }
    html #indexBody .bottomGameContainer .bottomGameContentContainers .forgeBtn {
      margin-bottom: 10px;
      background-color: #EB903A;
      color: white; }
  html #indexBody .bottomGameContainer #forge {
    margin-left: 4px; }
  html #indexBody .bottomGameContainer #store {
    margin-right: 4px; }
    html #indexBody .bottomGameContainer #store .storeInput {
      width: 70px; }
html #indexBody .graveyard {
  width: 98.6%;
  border: 1px solid black;
  margin: 10px auto;
  text-align: center; }
  html #indexBody .graveyard .tombstoneContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    html #indexBody .graveyard .tombstoneContainer .tombstone {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      html #indexBody .graveyard .tombstoneContainer .tombstone .tombstoneText {
        color: white;
        background-color: black;
        height: 37px;
        width: 135px;
        margin-bottom: 19px;
        margin-top: -2px; }
html #indexBody .breakDown {
  cursor: pointer; }
html #indexBody .infoModalContent {
  margin: auto -70px; }
  html #indexBody .infoModalContent .infoModalTextContainer {
    margin: auto 8px; }
    html #indexBody .infoModalContent .infoModalTextContainer .infoModalTitle {
      text-decoration: underline;
      margin-bottom: 5px; }
    html #indexBody .infoModalContent .infoModalTextContainer .infoModalText {
      text-align: left; }
  html #indexBody .infoModalContent .infoModalCloseButton {
    margin-bottom: 5px; }
html #indexBody #gameOverModal {
  margin: auto -400px; }
  html #indexBody #gameOverModal p {
    margin-left: 5px;
    text-align: left; }
  html #indexBody #gameOverModal #gameOverModalDialog {
    width: 400px; }
  html #indexBody #gameOverModal #userNameInputContainer {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; }
    html #indexBody #gameOverModal #userNameInputContainer #userNameInput {
      margin-right: 10px; }
  html #indexBody #gameOverModal .otherHighScoreSubmitBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 10px; }
html #indexBody .modalText > p {
  text-indent: 50px;
  text-align: left;
  margin: auto 8px; }
  html #indexBody .modalText > p #oneChanceStoreButtonContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; }
html #indexBody #buildingInfoModal .infoModalTextContainer p {
  text-align: left; }
html #indexBody #villagePreach1Modal {
  margin: auto 180px; }
  html #indexBody #villagePreach1Modal .modalText {
    text-align: center;
    text-indent: 0; }

.itemTextBoxLeft, .itemTextBoxRight {
  display: flex;
  flex-direction: column;
  margin-left: 10px; }

.legendaryItem {
  color: #7A24C2; }

@media only screen and (max-width: 1439px) {
  html #indexBody .mainGameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center; }
    html #indexBody .mainGameContainer .leftGameBox {
      width: 98%; }
    html #indexBody .mainGameContainer .middleGameBox {
      width: 98%; }
    html #indexBody .mainGameContainer .rightGameBox {
      width: 98%; }
  html #indexBody #topBar #gameTitle {
    width: 95%; }
  html #indexBody #topBar .buildingContainer .buildingContainerContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto; }
    html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons {
      display: flex;
      flex-direction: column;
      align-items: left;
      margin: 0; }
      html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons .buildingButtonBox {
        justify-content: left;
        align-items: left;
        flex-wrap: wrap; }
        html #indexBody #topBar .buildingContainer .buildingContainerContent .buildingButtons .buildingButtonBox button {
          width: auto; }
  html #indexBody .modal .modal-dialog {
    margin: auto;
    width: 50%; } }
@media only screen and (max-width: 1332px) {
  html #indexBody #topBar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    html #indexBody #topBar .buildingContainer {
      width: 98.6%;
      margin: auto; } }
@media only screen and (max-width: 1439px) {
  html #indexBody .mainGameContainer .gameBox {
    height: auto; }
  html #indexBody .pageLinkContainer div {
    flex-direction: column; } }
html #instructionsBody {
  color: white;
  background: url("../assets/images/instruction'sBackground.jpg") no-repeat;
  background-size: cover; }
  html #instructionsBody p {
    text-align: justify; }
  html #instructionsBody p, html #instructionsBody h1, html #instructionsBody h2, html #instructionsBody h3 {
    Text-Shadow: #000000 1px 0 0, #000000 1px 1px 0, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px; }
  html #instructionsBody .storyContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65%;
    margin: auto; }
    html #instructionsBody .storyContainer .storyText {
      text-indent: 50px; }
  html #instructionsBody table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px; }
  html #instructionsBody td, html #instructionsBody th {
    border: 1px solid #dddddd;
    padding: 8px;
    color: black;
    text-align: center; }
  html #instructionsBody tr:nth-child(even) {
    background-color: #dddddd; }
  html #instructionsBody tr:nth-child(odd) {
    background-color: #fff; }

html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto; }
  html #creditsBody {
    padding: 0;
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center; }
    html #creditsBody a {
      text-decoration: none;
      color: #2d4691;
      cursor: pointer; }
    html #creditsBody #credits {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      html #creditsBody #credits .creditsTitle {
        text-decoration: underline; }
    html #creditsBody .resourcesTitleText {
      text-decoration: underline; }
    html #creditsBody .resources {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly; }
    html #creditsBody .musicTitle {
      text-decoration: underline; }
    html #creditsBody .musicSubtitle {
      font-weight: bold;
      font-size: 1.10em; }
    html #creditsBody .musicLicenses {
      width: 80%;
      margin: auto; }

html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto; }
  html #highScoresBody {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: white; }
    html #highScoresBody .highScoreTitleContainer {
      display: flex;
      flex-direction: row;
      margin-bottom: -40px;
      align-items: center;
      justify-content: center; }
      html #highScoresBody .highScoreTitleContainer .highScore {
        font-family: highScore, sans-serif;
        font-size: 45px; }
      html #highScoresBody .highScoreTitleContainer .zombieIcon {
        height: 65px; }
    html #highScoresBody .clearScores {
      font-size: 13px;
      border-radius: 0%;
      margin-bottom: 10px; }
    html #highScoresBody .tables {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly; }
      html #highScoresBody .tables table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 45%;
        margin: 10px 10px; }
        html #highScoresBody .tables table .publicHighScoreCaption {
          margin-bottom: 34px; }
        html #highScoresBody .tables table caption {
          font-size: 25px;
          font-weight: bold; }
          html #highScoresBody .tables table caption button {
            margin-bottom: 5px;
            border-radius: 0%;
            font-size: 13px; }
        html #highScoresBody .tables table td, html #highScoresBody .tables table th {
          border: 1px solid #ddd;
          text-align: left;
          padding: 8px; }
        html #highScoresBody .tables table tr {
          background-color: black;
          color: white;
          font-family: arcade, openSans, sans-serif;
          font-size: 13px; }
        html #highScoresBody .tables table .localPlace {
          width: 35px;
          text-align: center; }
        html #highScoresBody .tables table .globalPlace {
          width: 35px;
          text-align: center; }
        html #highScoresBody .tables table .medalContainer {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center; }
          html #highScoresBody .tables table .medalContainer .medalImage {
            width: 18px; }
      html #highScoresBody .tables .mobileTableNavigate > button {
        font-family: arcade, openSans, sans-serif;
        font-size: 12px;
        cursor: pointer;
        background: none;
        border: none;
        color: white; }
      html #highScoresBody .tables .mobileTableNavigate > p {
        font-family: arcade, openSans, sans-serif;
        font-size: 12px;
        color: white; }
      html #highScoresBody .tables .mobileTableNavigate {
        display: none; }
    html #highScoresBody #tableNavigateContainer {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly; }
      html #highScoresBody #tableNavigateContainer .tableNavigate > button {
        font-family: arcade, openSans, sans-serif;
        font-size: 12px;
        cursor: pointer;
        background: none;
        border: none;
        color: white; }
      html #highScoresBody #tableNavigateContainer .tableNavigate > p {
        color: white;
        font-family: arcade, openSans, sans-serif;
        font-size: 12px; }
      html #highScoresBody #tableNavigateContainer .tableNavigate {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 45%;
        margin: 10px 10px; }

@media only screen and (max-width: 944px) {
  html #highScoresBody .tables {
    display: flex;
    flex-direction: column;
    align-items: center; }
    html #highScoresBody .tables .dateColumn, html #highScoresBody .tables .globalDate, html #highScoresBody .tables .localDate {
      display: none; }
    html #highScoresBody .tables .mobileTableNavigate {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 100%; }
    html #highScoresBody .tables .mobileTableNavigate > p {
      cursor: pointer; }
    html #highScoresBody .tables #localHighScoreTable, html #highScoresBody .tables #publicHighScoreTable {
      width: 95%; }
  html #highScoresBody #tableNavigateContainer .tableNavigate {
    display: none; } }
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto; }
  html #achievementsBody {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: #fff; }
    html #achievementsBody #mainAchievementBox {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap; }
      html #achievementsBody #mainAchievementBox .achievementBox {
        width: 249px;
        margin: auto 10px; }
        html #achievementsBody #mainAchievementBox .achievementBox .achievementBoxTitleText {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center; }
          html #achievementsBody #mainAchievementBox .achievementBox .achievementBoxTitleText i {
            font-size: 1.5em;
            margin: auto 5px; }
        html #achievementsBody #mainAchievementBox .achievementBox p {
          margin-top: -10px;
          text-align: left; }
      html #achievementsBody #mainAchievementBox .gold {
        color: gold; }

/*# sourceMappingURL=main.css.map */