/*
  Make sure width and height measurements include padding and borders.
*/
* {
  box-sizing: border-box;
}

/*
  Import a nice script font to complement the outer space theme.
  From: https://fontlibrary.org/en/font/xolonium/
*/
@font-face {
  font-family: "xolonium";
  src: url("fonts/Xolonium-Regular.otf");
}

body {
  background: black;
  color: lightgreen;
  font-family: xolonium;
}

header {
  clear: both;
  text-align: center;
}

main {
  width: 100%
}

aside {
  width: 100%
}

button {
  border-radius: 5px;
  background-image: linear-gradient(black, gray, black);
  color: lightgreen;
}

details {
  border-top: 1px dotted lightgreen;
  padding-bottom: 0.5em;
}

details p {
  margin-left: 1em;
  padding-right: 1em;
}

details table {
  margin-left: 1em;
  padding-right: 1em;
  table-layout: fixed;
  width: 100%;
}

details input[type="number"] {
  background: black;
  color: lightgray;
  border-radius: 5px;
  width: 6em;
}

.highlight {
  background: lightgreen;
  color: black;
}

.input-group {
  text-align: center;
}

.item-selector {
  display: none;
}

.nav-button {
  width: 3em;
}

.numeric {
  text-align: right;
}

#news-date, #finances-wallet, #cargo-summary, #defenses-summary, #helm-port-code {
  float: right;
}

#ship-name, #title {
  font-size: 125%;
  text-align: center;
}

#viewscreen {
  border: 2px solid lightgreen;
  border-radius: 25px;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

@media screen and (min-width: 1200px) {
  body {
    margin-left: 5%;
  }

  main {
    float: left;
    width: 45%
  }

  aside {
    float: left;
    width: 45%
  }

  .nav-button {
    width: 4em;
  }

  #ship-name, #title {
    font-size: 200%;
  }    
}