.maincontainer {
  display: grid;
  grid-template-columns: 240px 800px;
  grid-template-rows: 352px 24px 24px 376px 24px;
  font-family: "Barlow Condensed", sans-serif;
}

img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.tileinfo {
  display: grid;
  grid-template-rows: 1fr 4fr;
  background-color: red;
}

.tileinfoheader {
  background-color: grey;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.tileinfopic {
}

.tileinfotitle {
  font-weight: bold;
  align-self: center;
  margin-left: 5px;
}

.tileinfobody {
  background-color: lightblue;
}

.recipes {
  display: grid;
  grid-template-rows: 1fr repeat(3, 3fr);
}

.recipesheader {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1px;
}

.recipeheader {
  grid-column: 1 / 4;
}

.reciperow {
  display: grid;
  font-size: 18px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.timer {
  margin-right: 3px;
  border-radius: 2px;
}

.timerselected {
  border: 1px solid black;
}

.besttimer {
  background-color: lightgreen;
}

.oktimer {
  background-color: yellow;
}

.badtimer {
  background-color: yellow;
}

.worsttimer {
  background-color: red;
}

.ingredient {
  grid-column: 2/3;
}

.gameboard {
  background-color: green;
  grid-column: 2/3;
  grid-row: 1/5;
  display: grid;
  grid-template-columns: 1fr 16fr 1fr;
  grid-template-rows: 1fr 16fr 1fr;
}

.gamegrid {
  background-color: green;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
}

.buildingmenu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 6fr;
}

.categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  background-color: #338b9f;
}

.buildings {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(5, 1fr);
  background-color: lightblue;
}

.buildingshidden {
  display: none;
}

.nwcorner {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.necorner {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}
.swcorner {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}
.secorner {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.horizontalborder {
  grid-row: 2 / 16;
}

.verticalborder {
  grid-column: 2 / 16;
}
.cell {
  text-align: center;
  border: 1px solid white;
  font-size: 2em;
}

.board {
  width: 720px;
  height: 720px;
}

.header {
  width: 100%;
  height: 24px;
  border: 1px solid black;
}

.leftcolumn {
  float: left;
  width: 260px;
  height: 720px;
}

.buildingcontrolpanel {
  float: left;
  width: 260px;
  height: 212px;
  border: 1px solid black;
  background-color: lightblue;
  margin: 2px;
}

.buildingcontrolcategory {
  float: left;
  width: 260px;
  height: 210px;
  border: 1px solid white;
  background-color: lightskyblue;
}

.buildingcontrolcategorybutton {
  float: left;
  width: 42px;
  height: 42px;
  background-color: lightslategray;
}

.buildingcontrolcategorybuttons {
  display: none;
}

.selectedbuildingmenubutton {
  border: 2px solid black;
}

.buildingmenudeletebutton {
  grid-column: 1/2;
  grid-row: 6/7;
}

.eastborder {
  background-color: tan;
}

.westborder {
  background-color: tan;
}

.northborder {
  background-color: tan;
}

.southborder {
  background-color: tan;
}

.stats {
  float: left;
  width: 720px;
  height: 240px;
}

.statstitle {
  float: left;
  width: 720px;
  height: 20px;
  background-color: grey;
  margin: 1px;
}

.statsline {
  float: left;
  width: 720px;
  height: 20px;
  background-color: lightblue;
  margin: 1px;
}

.grid {
  float: left;
  width: 640px;
  height: 640px;
}

.pond {
  background-color: blue;
}

.grass {
  /* background-color: lightgrey; */
}

.selected {
  border: 2.5px solid black;
}

.watered10 {
  border-color: #00008f;
  border-radius: 10%;
  border-width: 3px;
}
.watered9 {
  border-color: #1111ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered8 {
  border-color: #2222ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered7 {
  border-color: #3333ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered6 {
  border-color: #4444ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered5 {
  border-color: #5555ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered4 {
  border-color: #6666ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered3 {
  border-color: #8888ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered2 {
  border-color: #aaaaff;
  border-radius: 10%;
  border-width: 3px;
}
.watered1 {
  border-color: #ccccff;
  border-radius: 10%;
  border-width: 3px;
}
.watered0 {
  /* just in case */
  opacity: 1;
}

.penaltyOverlay3Plus {
  border-color: red;
  border-radius: 10%;
  border-width: 3px;
}

.penaltyOverlay2 {
  border-color: orange;
  border-radius: 10%;
  border-width: 3px;
}

.penaltyOverlay1 {
  border-color: yellow;
  border-radius: 10%;
  border-width: 3px;
}

.noedge {
  border-color: red;
  border-radius: 50%;
  border-width: 2px;
}

.ocean {
  background-color: cornflowerblue;
}

.river {
  background-color: blue;
}

.mountains {
  background-color: brown;
}

.goldenrod {
  color: goldenrod;
}

.red {
  color: red;
}

.grey {
  color: grey;
}

.brown {
  color: brown;
}

.blue {
  color: blue;
}

.lightblue {
  color: lightblue;
}

.orange {
  color: orange;
}

.darkgreen {
  color: darkgreen;
}