html, body {
  background-color: black;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow: hidden;
}

input, button {
  font-size: inherit;
  padding: 1px 3px;
}

#content {
  width: 100%;
  height: 100%;
}

canvas {
  display: block; /* remove scrollbars */
}

#debug {
  left: 0;
  top: 0;
  position: fixed;
  white-space: pre-wrap;
}

.screen {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.screenwrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#gamescreen,#fullscreen {
  pointer-events: none;
}

.hflex {
  display: flex;
  flex-direction: row;
}

.vflex {
  display: flex;
  flex-direction: column;
}

.fluid {
  flex: 1;
}

.flexcenter {
  align-self: center;
}

#dynamic_text {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%
}

#status {
  position: absolute;
  left: 75%;
  top: 0%;
  bottom: 0%;
  padding: 10px;
  overflow-y: auto;
}

#status .header {
  font-size: 1.2em;
}
#status .line {
  padding-left: 20px;
}
#port .line {
  padding-bottom: 20px;
}
#port {
  padding-top: 40px;
}

.icon {
  background-size: contain;
  height: 18px;
  width: 18px;
  display: inline-block;
  background-position-y: 4px;
  padding-top: 2px;
  background-repeat: no-repeat;
}
.floater .icon {
  background-position-y: 8px;
  padding-top: 0px;
  -padding-bottom: 4px;
  margin-top: -10px;
  height: 25px;
}
.icon-food {
  background-image: url(img/food.png);
}
.icon-pop {
  background-image: url(img/pop.png);
}
.icon-money {
  background-image: url(img/money.png);
}
.icon-harv {
  background-image: url(img/harv.png);
}
.icon-mine {
  background-image: url(img/mine.png);
}

.floater .good {
  background-color: green;
}
.floater .meh {
  background-color: rgba(128,128,128,0.5);
}
.floater .bad {
  background-color: red;
}
.floater .money {
  background-color: rgba(128,128,128,0.5);
}

.floater {
  font-size: 0.75em;
  position: absolute;
  width: 200px;
  margin-left: -100px;
  margin-top: -0.7em;
  text-align: center;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.75);
  transition:all 4.4s ease-in;
  opacity: 1.0;
  transform: scale(1.5);
}
.floater.fade {
  opacity: 0.0;
  --transform: scale(1.0);
  margin-top: -3em;
}

.tip {
  color: #AAA;
  font-size: 0.75rem;
}

.button {
  border: white solid 1px;
  border-radius: 8px;
  color: #000;
  background-color: #DDD;
  cursor: pointer;
  padding: 4px;
  display: inline-block;
  user-select: none;
}
.button:hover {
  border: #DDD solid 1px;
  background-color: #FFF;
}

#port-tip {
  background-color: #222;
  border: black solid 1px;
  border-radius: 10px;
  font-style: italic;
  color: #DFD;
  padding: 10px;
}

.porttranssect {
  padding: 5px;
  display: inline-block;
}