* {
  margin: 0; }

ul {
  list-style: none;
  padding: 0; }

html {
  height: 100%; }

body {
  height: 100%;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  font-family: sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #484848;
  color: white; }
  body > footer {
    background: #2b2b2b; }

main {
  flex-grow: 1; }

button:focus-visible {
  outline: none; }

body > footer {
  display: flex;
  align-items: center;
  padding: 20px; }
  body > footer h1 {
    padding: 0 20px;
    margin-right: 20px; }
  body > footer .general-info span {
    padding: 10px; }
  body > footer .general-info + .general-info {
    margin-left: 40px; }
  body > footer > button {
    margin-left: auto;
    padding: 25px 30px; }

main {
  display: flex;
  overflow-x: scroll; }
  main > ul {
    padding: 40px;
    display: flex; }

.person {
  display: flex;
  flex-direction: column; }
  .person .person-info {
    flex-grow: 1; }
  .person + .person {
    margin-left: 20px; }

.person-info {
  overflow: hidden;
  padding: 20px;
  background: #222;
  display: flex;
  flex-direction: column; }
  .person-info > * + * {
    margin-top: 15px; }
  .person-info > header {
    display: flex; }
    .person-info > header .person-profile {
      text-align: center; }
      .person-info > header .person-profile > img {
        width: 100px;
        height: 100px; }
      .person-info > header .person-profile > p {
        margin-top: 15px; }
    .person-info > header .person-happiness {
      width: 200px;
      height: 200px; }
    .person-info > header > * + * {
      margin-left: 20px; }
  .person-info > .person-news {
    flex-grow: 1; }

.person-news {
  overflow-y: scroll;
  padding: 10px;
  background: #FEFBAF;
  color: #000; }
  .person-news li + li {
    margin-top: 15px; }

.person-holdings {
  display: flex;
  flex-direction: column;
  margin-top: 20px; }
  .person-holdings > ul > * + * {
    margin-top: 15px; }
  .person-holdings .trade-buttons {
    display: flex;
    flex-direction: column;
    margin-top: 30px; }
    .person-holdings .trade-buttons button + button {
      margin-top: 20px; }

button {
  border-radius: 10px;
  border: 0;
  padding: 10px;
  font-size: 20px;
  transition: 200ms background-color; }
  button.button--buy {
    background: #92E09A; }
  button.button--sell {
    background: #E19D9D; }
  button.button--end-turn {
    background: #61b8ff; }
  button:hover:not(:active) {
    background: white; }

.named-data {
  display: flex; }
  .named-data > p:first-child {
    flex-grow: 1; }