@import "./colors.css";

body {
  background-color: var(--swatch-foundation);
  overflow-y: auto;
  overflow-x: hidden;
}

#root {
  background-color: var(--swatch-foundation);
  font-family: "Lexend Exa";
  position: absolute;
  width: 95%;
  left: 2.5%;
  height: 90%;
  top: 5%;
}

#planet-stonybrook-banner {
  position: relative;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 5%;
  text-align: center;
  background-color: var(--swatch-primary);
  color: white;
  font-size: 24pt;
  border-color: black;
  border-width: 2px;
  border-style: solid;
}

#planet-stonybrook-tabs {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 13%;
  height: 5%;
  background-color: var(--swatch-contrast);
}

.planet-stonybrook-tab {
  position: relative;
  background-color: var(--swatch-complement);
  top: 5%;
  font-family: "Lexend Exa";
  bottom: 5%;
  text-align: center;
  cursor: pointer;
  float: left;
  height: 90%;
  width: 20%;
  border-color: black;
  border-width: 2px;
  border-style: solid;
}

.planet-stonybrook-tab:hover {
  background-color: var(--swatch-contrast-hover);
  color: white;
  border-color: white;
}

#planet-workspace {
  position: absolute;
  left: 0%;
  top: 18%;
  width: 100%;
  height: 100%;
  background-color: var(--swatch-accent);
}

#health-status-bar {
  position: absolute;
  left: 0%;
  top: 5%;
  width: 100%;
  height: 8%;
  text-align: center;
  background-color: var(--swatch-foundation);
  color: white;
  font-size: 24pt;
  border-color: black;
  border-width: 2px;
  border-style: solid;
  display: flex;
  flex-direction: row;
}

#health-bar {
  position: relative;
  width: 50%;
  left: 5%;
  border-radius: 10px;
  border-color: black;
  border-width: 2px;
  border-style: solid;
  background-color: var(--swatch-status-bar-background);
  height: 75%;
  top: 10%;
}

#health-bar-progress {
  position: relative;
  border-radius: 10px;
  border-color: black;
  border-width: 2px;
  font-size: 18pt;
  color: black;
  width: 50%;
  height: 100%;
  background-color: var(--swatch-complement);
  /* Center Text veritically */
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  white-space: nowrap;
}

#available-food {
  position: relative;
  width: 25%;
  left: 22%;
  border-radius: 10px;
  border-color: black;
  border-width: 2px;
  border-style: solid;
  background-color: var(--swatch-status-bar-background);
  height: 75%;
  top: 10%;
  color: white;
  font-size: 18pt;
  /* Center Text veritically */
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}