body {
  background-color: black;
  /* margin-left: 50px; */
  /* padding:0px;
  margin:0px; */
}
#page {
  position: absolute;
  /* top: 16px; */
  /* left: 100px; */
  /* width: 800px; */
  /* padding: 32px; */
  background-color: white;
  /* box-shadow: 4px 4px 4px gray; */
  border-radius: 4px;
  /* padding: 8px; */
  /* box-shadow: 4px 4px 8px rgba(128, 128, 128, 0.5); */
  font-size: larger;
  border: solid 1px black;
}
#chiapage {
  position: fixed;
  display: none;
  background-color: black;
  border: 8px solid #333;
  border-radius: 12px;
  box-shadow: 4px 4px 8px rgba(127, 127, 127, 0.75);
  overflow: hidden;
}
#topbar {
  background-color: #333;
}
#close,
#small,
#medium,
#large {
  float: right;
  padding-top: 4px;
  padding-right: 10px;
  padding-left: 4px;
}
#back {
  position: absolute;
  /* background-color: blanchedalmond; */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
#front {
  position: absolute;
  /* background-color: rgba(255, 255, 255, 0.25); */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  /* cursor: url("img/brush60.png"), grab; */
}
#side {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 12px;
  border: 4px solid rgba(255, 255, 255, 0.5);
  box-shadow: 4px 4px 8px rgba(127, 127, 127, 0.75);
}
#tab {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid black;
  border-left: 0px solid black;
  box-shadow: 4px 4px 8px rgba(127, 127, 127, 0.75);
}
#wall {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.button {
  position: relative;
  width: 82%;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 8px;
  /* font-size: 24px; */
  border: 2px solid white;
  background-color: rgba(255, 255, 255, 0.75);
  margin: 5%;
  padding: 2%;
  text-align: center;
  font-weight: bold;
  color: #333;
}
.selected {
  background-color: #333;
  color: white;
}
.seedspot {
  position: absolute;
  height: 23px;
  width: 24px;
  background-image: url("img/seed.png");
}
.waterSpot {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("img/water2.png");
}

#walls {
  position: absolute;
  display: none;
  top: 0px;
  width: 400px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 4px 4px 4px darkgray;
}
#walls img {
  border: 1px solid black;
  border-radius: 8px;
}
#tv {
  position: relative;
  float: right;
  top: 0px;
  left: 0px;
  width: 430px;
  height: 300px;
  margin: -4px;
  padding: 0px;
}
#tvtop {
  position: relative;
  top: 0px;
  width: 400px;
  height: 51px;
}
#tvleft {
  position: relative;
  left: 0px;
  top: -6px;
  width: 49px;
  height: 168px;
}
#tvright {
  position: relative;
  top: -6px;
  left: 218px;
  width: 128px;
  height: 168px;
}
#tvbottom {
  position: relative;
  top: -12px;
  left: 0px;
  width: 400px;
  height: 51px;
}

#tv iframe {
  position: absolute;
  top: 42px;
  left: 35px;
  width: 250px;
  height: 182px;
}
#gather {
  position: absolute;
  display: none;
  top: 0px;
  width: 400px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 4px 4px 4px darkgray;
}
#inputs {
  position: relative;
  top: 20%;
  text-align: center;
  width: 25%;
  border-radius: 12px;
  /* background-color: rgba(255, 255, 255, 0.5); */
}
#inputs input {
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0);
  border: 0px solid rgba(255, 255, 255, 0);
  text-align: center;
}

#chiatitle {
  /* border: 4px solid gray; */
  width: auto;
}
#chiatitle img {
  width: 400px;
}